multiple elements with similar css

Question

I have multiple html elements. They use very similar css styles. Only difference is border style (one element has all but left border, another all but right etc).

So far, i used to create several different styles which have only one line of code different. That seriously bloated my css file. Is there any better solution to my problem? Is there any kind of inheritance that i could use?

Answer 1

There is many ways to achieve that.

1. Use multiple selectors:

   selector #1, selector #2, selector #3 {
       /* common styles */
   }
   selector #1 { border-left: none; }
   selector #2 { border-right: none; }
   selector #3 { border-top: none; }
   

2. Depending on document structure you can try something like this:

   <ul>
      <li>Element #1</li>
      <li>Element #2</li>
      <li>Element #3</li>
   </ul>
   
   
   ul li {
       /* common styles */
   }
   ul li:first-child { border-left: none; }
   ul li:last-child { border-right: none; }
   

3. Use multiple classes:

   <ul>
      <li class="border no-left">Element #1</li>
      <li class="border">Element #2</li>
      <li class="border no-right">Element #3</li>
   </ul>
   
   
   .border {
       /* common styles */
   }
   .border.no-left { border-left: none; }
   .border.no-right { border-right: none; }