Reducing CSS Code Repetition

Question

I am finding myself constantly reusing various blocks of code in CSS for various elements. One is rounded corners. Example code below:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;

I've tried 2 different methods to reduce code repetition, which both have cons.

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.

The second is to create a list of elements in CSS that should have rounded borders like:

.offers, .welcome, .sidebar, .post {
   ... Rounded corners code here ...
}

I'm not sure if this method is even used, I've not seen it.

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.

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.

Answer 1

Other than giving classes for certain features of that element and avoiding a CSS preprocessor there isn't much else you can do.

If you are finding yourself having about 20 odd classes for rounded corner sizes then you should question the consistency of your designs.

There are some great articles on HTML and CSS semantics such as http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ .

I'm not going to suggest you use something like SASS or LESS but I strongly recommend you do so. It will allow you to easily add rounded corner classes and save you time in outputting compressed formats of your CSS.