title: Reducing CSS Code Repetition
body: <p>I am finding myself constantly reusing various blocks of code in CSS for various elements. One is rounded corners. Example code below:</p>
  
  <pre><code>-moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  </code></pre>
  
  <p>I've tried 2 different methods to reduce code repetition, which both have cons.</p>
  
  <p>The first is to wrap the code in a class such as .rounded10 and add this class to all the elements on the page that require rounded borders (there's a good 20+). Bootstrap do something similar, but I don't like this method as it introduces unsemantic data into the HTML.</p>
  
  <p>The second is to create a list of elements in CSS that should have rounded borders like:</p>
  
  <pre><code>.offers, .welcome, .sidebar, .post {
     ... Rounded corners code here ...
  }
  </code></pre>
  
  <p>I'm not sure if this method is even used, I've not seen it.</p>
  
  <p>Are there any other method's I've missed or anything that can help me reduce this repetition in such circumstances. Things get messy especially when you have to use browser vendor properties.</p>
  
  <p>I do not use SASS or LESS, or any CSS frameworks, or helpers such as Compass (although I have). I preferrer to code with vanilla CSS. It's just the way I work. Please no suggestions on using those.</p>