Why handling multiple classes in CSS. 1. Please pin point the major key rolls.? 2. Where we should not have to use multiple classes as advice.?

Multiple classes in css

Multiple classes is great thing in css, it allow you to add more than one classes following is example

<p class=”quotes nomargin right”>…</p>

Basically for website when you want to give more effects these are used, specially in good formatting because if you just want your text to be bold or quoted, than you can define a class where only small things change. Now in any paragraph where you want to apply, just add that class.

Advantages of classes

It makes easier to add any special effect on your elements with creating additional classes. So it also let you compact your stylesheet by not creating additional classes. In grid framework this give wonderful facility by defining special classes which you may add any tag. It also allows you to keep standard in whole site.

Disadvantage

Multiple classes are supported in all major browser but still some do not support so to give previous versions compatibility it can be disadvantage.

Multiple Classes in a css is very useful and great.

 

Point of using it is that to add many style effects in one element. for example without multiple class and you have3 css classes you want to add for styleing:

.bold {font-weight:700} .nomargin {margin:0} .italic {font-style:italic}

and you want to apply this to some element, without multiple css you will do it like this:

[div class="nomargin"]

[div class="bold"]

[div class="italic"]

Text you want to style is here....

[/div]

[/div]

[/div]

 

But with multiple classes, all what you need is to include them in one element like this:

[div class="nomargin bold italic"]

Text you want to style is here....

[/div]

 

As for advantages, from what you saw its ability and flexibily to add multi styles to one element and control it, its a useful tool if you having standard styles that common in most of your pages (font size, weight, margins, padding, default messages styles, common box styles,etc....)

As for disadvantages, IE <=6 does not support it perfectly , it does support it but puggy in some cases, so in order to keep urself in safe area make sure first class you put in multiple classes inside elements got the most important style you need.

 

Another disadvantage that it become little harder to understand and read if keeping add multiple classes to element more and more:

[div class=" class1 class2 class3 class4 ....... classN"]...[/div]

 

So make sure to combine styles that you think its common in your website and use it most of the time in one class instead of multiple class.

 

Combinations of Classes and IDs

The big point here is that you can target elements that have combinations of classes and IDs by stringing those selectors together without spaces.

ID and Class Selector

As we covered above, you can target elements by a combination of ID and class.

<h1 id="one" class="two">This Should Be Red</h1> #one.two { color: red; }

Double Class Selector

Target an element that has all of multiple classes. Shown below with two classes, but not limited to two.

<h1 class="three four">Double Class</h1> .three.four { color: red; }

Multiples

We aren't limited to only two here, we can combine as many classes and IDs into a single selector as we want.

.snippet#header.code.red { color: red; }

Although bear in mind that's getting a little ridiculous =)

Example

So how useful is all this really? Especially with ID's, they are supposed to be unique anyway, so why would you need to combine it with a class? I admit the use cases for the ID versions are slimmer, but there are certainly uses. One of those is overriding styles easily.

#header { color: red; } #header.override { color: black; }

The second targets the same element, but overrides the color, instead of having to use:

.override { color: black !important }

or perhaps prefacing the selector with something even more specific.

More useful is multiple classes and using them in the "object oriented" css style that is all the rage lately. Let's say you had a bunch of divs on a page, and you used multiple various descriptive class names on them:

<div class="red border box"></div> <div class="blue border box"></div> <div class="green border box"></div> <div class="red box"></div> <div class="blue box"></div> <div class="green box"></div> <div class="border box"></div>

They all share the class "box", which perhaps sets a width or a background texture, something that all of them have in common. Then some of them have color names as classes, this would be for controlling the colors used inside the box. Perhaps green means the box has a greenish background and light green text. A few of them have a class name of "border", presumably these would have a border on them while the rest would not.

So let's set something up:

.box { width:100px; float: left; margin:010px10px0; } .red { color: red; background: pink; } .blue { color: blue; background: light-blue; } .green { color: green; background: light-green; } .border { border:5px solid black; }

Cool, we have a good toolbox going here, where we can create new boxes and we have a variety of options, we can pick a color and if it has a border or not just by applying some fairly semantic classes. Having this class name toolbox also allows us to target unique combinations of these classes. For example, maybe that black border isn't working on the red boxes, let's fix that:

.red.border { border-color: #900; } Border color on red box changed because it had both the red class and border class

Based on this demo page.

Specificity

Also important to note here is that the specificity values of selectors like this will carry the same weight as if they were separate. This is what gives these the overriding power like the example above.

Browser Compatibility

All good current browsers support this as well as IE back to version7. IE6 is rather weird. It selects based on the first selector in the list. So ".red.border" will select based on just ".red", which kinda ruins things. But if you are supporting IE6, you are used to this kind of tomfoolery anyway and can just fix it with conditional styles.

 

Mutiple Classes is good if you want to make your code organized and re-useable however it should be use wisely

Now days most CSS Frame Works lIke bootsrap , Foundation , YAML heavely used this approch , Regarding browser support its quite safe as only IE<6 has issue with this approch

 

Mainly we need to focus on write Simentic Code