Friday, 28 June 2013

Sharing CSS Properties Between Classes

Very recently I came across a situation where one of the existing CSS class was a perfect fit for it except for its background property. Just because 1 property was unwanted, I thought to override it with 'style' attribute and setting the background with no image. Very straightforward! Despite the simplicity of this solution, I felt to check what is the recommended practice in such scenarios...may be putting needed common features in one class and inheriting from it. I stumbled across the question- Does CSS support inheritance? (I felt stupid for not knowing the answer).
There are tools/frameworks like OOCSS and LESS which do support inheritance. Without any of them, the better approach to my scenario would be to have a css class and write common properties in it. Then repeat the css class and add rest of the properties to it. Here it is:

.oldClass, .newClass{
 common properties go here
}

.old class{
 the extra one goes here e.g. background: url("../images/arrow.png");
}

No comments:

Post a Comment