CSS styling which way is better

[Ani minadze]

Hi,
I’m styling navigation and want to know which way is better for use

i have

nav.mainNavigation>li*5>a

and which way is better to style link like this:

.mainNavigation {
a {
color: #fff;
}
}

or create new selector and add class for links?

.color-white {
color: white;
}

and my html

nav.mainNavigation>ul>li*5>a.color-white

[Paulie_D]

Firstly…don’t do this:

.color-white {
color: white;
}

Class names shouldn’t be that specific…what if you decide to change the color to red...color-white doesn’t make a lot of sense then.

As for what’s best…that’s entirely up to you…there are whole books on naming schemes and conventions…BEM, SMACCS etc.

If your CSS selector is specific (enough) you often don’t need a class at all.

[Ani minadze]

thank for answer,

i hace many elements with white color, and i always do this thing

.myNewSelector > li > a { color: #fff; }
.myNewestSelector > span {color: #fff;}
.myOldSelector > div >a  { color: #fff; }

is it correct?
i think if i create new selector like .color-white {color:#fff;} and add that in my html its will be good or not?

[Shikkediel]

If there are more than a few elements, it could be handy and more readable. Of course you could also do this :

.myNewSelector > li > a, .myNewestSelector > span {
color: #fff; 
}

[Paulie_D]

If the color of white is a part of a color scheme then it does, perhaps make sense to use a separate class.

BUT it’s the name of the class that’s important…it has to be meaningful and descriptive at the same time without being overspecific.

So

.brand_color-light {
color: white;
}

.brand_color-alert {
color: red;
}

.brand_color-success {
color: green;
}

would, perhaps be better practice.

[Author]

Posts