Specificity question about global selectors

Hi folks,
I have couple of classes which have same background and border expect for with and heights. What I did was collect all classes and gave them the common attributes ( i.e bg n border) and other handle widths and height separately. My question is that am I limited to numbers of classes to join them e.g right now I have 20 selectors combined which I’d having same property. Is there a limit of how much selectors I can group for a specific style?

There is probably a limit but unlikely that it will ever be reached as it would be many thousand I expect.

I assume you mean something like this:


.test1, .test2, .test3, .test4, .test5, 
.test6, .test7, .test8, .test9, .test10, 
.test11, .test12, .test13, .test14, .test15, 
.test16 {
background:red;
color:white;
border:1px solid #000
}

Wouldn’t it have been easier to create a one single new class that defines all the above and then just add that class to the element.


<div class="introtext [B]highlight[/B]">etc...............

You have to be careful with creating too many specific classes just for borders or margins otherwise you end up with css tag soup and not much better than using the font tag.

Grouping styles together is a useful process as long as it doesn’t make the stylesheet hard to manage. I like the styles for a rule to be in one place where possible.

Hm this technique is pretty much what those fancy new grid systems do… the result is their famous cryptic-obscuro classnames:
span class=“s27g12”
or whatever. They end up with this because their classes get really style-specific.

If you have one class for one property then you’ll have large HTML and the ability to mix and match just about anything.

If you group more sanely as Paul suggests you’ll have smaller HTML and less mix-n-match ability… so what you’re going to do is look at what the most number of possible differences are. If there are, like, 5 differences, grouping like Paul did makes more sense.

There is no specific limit to the number of selectors for a ruleset. (You can look at the common reset styles out there if you want to be on the safe side, e.g. “Reset revisited”.)

Regarding the thread title, if you say global but mean “universal” selector (*), it does not count regarding specificity.

what i have is like 20 of classes which share same background color as well as border color and thickness. other than that they have there own margin’s and padding’s. i group the background and border of same attributes together and remaining style i.e margin and padding i left them in there own seprates selector classes respectivly. e.g


div.class1,div.class2,div.class3,.class4,.class5{background:white;border:1px solid pink;}

and for the rest attributes


div.class1{margin:10px;}
div.class2{margin:10px 5px 5px,10px}

and so on.
just wanted to make sure it doesn’t create any problem. coz creating a rule with same bf and border is crazy and is time consuming. so with the above example. is it ok?

I think either way is ok, but it depends. If in the future you add to the html it would be less work to use a class as Paul mentioned, for the bg and border on new parts. When you only restyle, then the clustered classes has more options as you can regroup them without touching the html.

i didn’t understand much what you said. could u be more despritive. sorry having a bad bad

Hi,

I think Eric meant instead of this:


div[COLOR=#6666ff].class1[/COLOR],div[COLOR=#6666ff].class2[/COLOR],div[COLOR=#6666ff].class3[/COLOR],[COLOR=#6666ff].class4[/COLOR],[COLOR=#6666ff].class5[/COLOR][COLOR=#66cc66]{[/COLOR]background[COLOR=#3333ff]:white[/COLOR];border[COLOR=#3333ff]:[COLOR=#993333]1px[/COLOR][/COLOR] [COLOR=#993333]solid[/COLOR] pink;[COLOR=#66cc66]}[/COLOR]

Do this:


[COLOR=#6666ff].commontheme [/COLOR][COLOR=#66cc66]{[/COLOR]background[COLOR=#3333ff]:white[/COLOR];border[COLOR=#3333ff]:[COLOR=#993333]1px[/COLOR][/COLOR] [COLOR=#993333]solid[/COLOR] pink;[COLOR=#66cc66]}
.class1{margin:10px;}
.class2{margin:10px 5px 5px,10px}

[/COLOR]



<div class="class1 commontheme">Test</div>
<div class="class2 commontheme">Test</div>


You can use either but at some point it becomes easier to use one method over the other.

Don’t bother pre-fixing all the classes with “div” either as that is just a waste. If you have different rules using the same class but for different elements then it is safer just to use a new class in most cases.

ah well. u say it right but as now i had some like 10k pages uptil now. having a common class would be a diaster and time consuming. nevertheless i’ll keep it in my mind for the time i get on my hands to work and trim down my so many css classes.

Yes, it all depends on what works best at the time. There is no hard and fast rule except whatever makes life easier and more manageable. :slight_smile:

speaking of making like easy… naming classes are like so difficult. u just run out of words of what to keep

Try to think about why you are applying styling to that particular bit, and give class names based on the purpose/meaning of the content, eg .info, .warning, .highlight, .specialoffer, and so on.

And remember that you don’t need to slap a class on absolutely everything, there are often smarter ways to reduce the number of times you use a class.

:eek:what u mean by that

Try to think about why you are applying styling to that particular bit, and give class names based on the purpose/meaning of the content, eg .info, .warning, .highlight, .specialoffer, and so on.

Hahahaha.

This we can do on our own projects. But it’s a pipe dream when your boss says “make it pop”.

I actually had a class once called “makeitpop”.

You can style elements by their context. For example if you have a list where all the list items are styled the samme then don;t add a class to each list item but instead add a class to the ul and then you can styles all lists via that one class.

e.g. ul.menu ul.menu li{etc…}

I often see pages where authors have added redundant classes to every list item so a little forethought goes a long way. If you need one list item styled differently the just add the class to that one item.

You can do similar things for sections and style the inner content via the parents id/class etc.

You’ll often see people write things like

<ul id="nav">
<li class="navitem"><a href="#" class="navlink"></a></li>
<li class="navitem"><a href="#" class="navlink"></a></li>
<li class="navitem"><a href="#" class="navlink"></a></li>
<li class="navitem"><a href="#" class="navlink"></a></li>
<li class="navitem"><a href="#" class="navlink"></a></li>
</ul>

All the classes there are completely unnecessary. You can target the <li>s with
#nav li {...}
and you can target the <a>s with
#nav li a {...}
which is much shorter, easier, and less likely to have mistakes.