Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS styling which way is better

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #236182
    Ani minadze
    Participant

    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

    #236186
    Paulie_D
    Member

    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.

    #236188
    Ani minadze
    Participant

    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?

    #236211
    Shikkediel
    Participant

    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; 
    }
    
    #236220
    Paulie_D
    Member

    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.