There may be situations where you would like parts of a same style to be used through out your website but also need things a bit differently across certain elements. A combination of #ID and .Class selectors can usually do the job but there will be cases where a combination of of multiple classing would be better for the job.

To try and make this situation more clear for you to understand lets take a look at an example. We have a website that has many sections in it that we need consistent styling too. A news section, forms, portfolio items.. How we need the styling done for these 3 items is each will be contained within a border and have a background color fill.

we could solve this problem by using a combination of #ID and .Class selectors.
CODE

.news_container {
border: solid 1px #aaaaaa;
background-color: #eeeeee;
width:80%;
}

.forms {
border: solid 1px #aaaaaa;
background-color: #eeeeee;
width: 400px;
}
.item {
border: solid 1px #aaaaaa;
background-color: #eeeeee;
width:300px;
}
#add_form{
width:500px;
color:0000ff;
}
#delete_form{
width:500px;
color:#ff0000;
}

Here by using a combination we can control how our elements will get displayed to some extent without too much repeating code, But there is still repeating code across .news_container, .forms, .item with the background and border declaration's. Now if we wanted to change the color of the border and fill we could have to change it in 3 places. This may not be much of an issue if we didn't have too many sections but it can be annoying and a pain if you have to change it in 10 places if your site is very large.

Now you might think why not just create one class for the border and file style across multiple elements and apply it that and then use the ID to controls the widths. This would work if we only had 1 element of each so the using ID's would be valid. Remember we can only have 1 unique ID per element. As for our news and portfolio items there can be many so that wont work alone.

Here is where multi classing can help. You can break down what is consistent across your elements and give that a class of its own. In our example its the border and fill we want. Next identifiy what other classes you'll need again in our example its the news_container class with a width specific to news and a portfolio item class with its own width. We can then apply the base class of the element with the specific class to it(Multiclassing).


Heres the solution (Multiclassing)
CODE

.box{
border: solid 1px #aaaaaa;
background-color: #eeeeee;
}
.news_container {
width:80%;
}

.forms {
width: 400px;
}
.item {
width:300px;
}
#add_form{
width:500px;
color:0000ff;
}
#delete_form{
width:500px;
color:#ff0000;
}


We can use it in this fashion to address our problem
CODE


<div class='news_container box'>
</div>

<div class='forms box'>
</div>

<div class='item box'>
</div>



Now all our elements are making use of the base class .box which has the consistent styling while also getting the specific styles associate with their kind of element. Now when you need to change the style of the border and fill you only have to do it in one place. This will help you cut down on your CSS code and make maintaining code much easier. The only thing you will need to do is think about what you need thats consistent across the different types of elements on your page and break them down into classes.

Note. You need spacing between classes.

I just learned this last night and cleaned up my own CSS code a bit with it. I hope it helps if you didn't know about it like I did.

Peace
Sone.

 

 

 


Reply