Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I always read articles that suggest to not use presentational CSS class names. Currently I'm working on a small website project. The footer on this website looks like this: Footer

Although it's pretty simple, I'm not exactly sure how to name the class names. At the moment, I'm using this grid system, which uses class names like "one-quarter", "one-half" and so on. Easiest way would then probably be to use a HTML structure like this:

<footer class="footer">
        <div class="grid">
            <div class="grid__item one-quarter">
                <h5>Adress</h5>
                Lorem Ipsum<br>
                Lorem Ipsum
            </div><!--
            --><div class="grid__item one-quarter">
                <h5>Adress</h5>
                Lorem Ipsum<br>
                Lorem Ipsum
            </div><!--
            --><div class="grid__item two-quarters">
                <nav class="nav--meta">
                    <!-- UL / LI for the navigation -->
                </nav>
            </div>
        </div>
    </footer> 

But for several reasons I'll have to use SASS silent classes instead of using those classes like "one-quarter" directly in my HTML structure:

.classname {
     @extend %grid__item;
     @extend %one-quarter;
     // ...
}

So I'm not sure how to name my different columns inside my footer. "footer_left" / "footer_right" are very presentational, so is "footer_adress" (content might change in future) / "footer_nav". Are there any best practices around or an article about CSS class naming in general?

And I'm aware that this is mostly personal opinion, but I would still like to hear from others how they deal with it.

share

migration rejected from codereview.stackexchange.com Apr 15 '14 at 14:14

This question came from our site for peer programmer code reviews. Votes, comments, and answers are locked due to the question being closed here, but it may be eligible for editing and reopening on the site where it originated.

closed as primarily opinion-based by gnat, GlenH7, Bart van Ingen Schenau, World Engineer Apr 15 '14 at 14:14

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise.If this question can be reworded to fit the rules in the help center, please edit the question.

3  
Pretty sure this is considered off-topic for this site, especially since there's no code to review (and find an off-site resource for me is definitely off-topic). As a general rule of thumb, naming should be done based on the element's purpose rather than how it looks. –  cimmanon Dec 6 '13 at 16:21
    
@cimmanon Ok thanks, for me there is code to review. Even though you are right that this could be considered off-topic. Where would be a better place to ask those kind of questions? –  demrks Dec 6 '13 at 17:18

2 Answers 2

up vote 3 down vote accepted

There seems to be 2 underlying issues behind this question

Fear of using selectors other than id/class

The usual rationale behind using a class/id rather than child/descendant selectors is because

  • You want it to still work if you move the element to another location on the page
  • Someone beat you with the don't use child/descendant selectors because they are slow stick (btw, they're not that slow, just don't go overboard)

The first point doesn't apply in this case because your elements are already being styled a specific way because of where they are on the page in relation to other elements. If you need to move the element, it is almost certain that it will need to have its styling adjusted as well in order for it to fit into your grid. There's no reason not to use child/descendant selectors in this case.

Unless you need to style each address independently, putting a unique class on each one isn't going to get you anything. Just use element/descendant selectors or give them the same class and be done.

Markup chosen purely because it makes the grid styles easier to work with

Choose good markup (group it logically, use descriptive classes/ids when you use them, etc), then worry about the styling.

More logical markup:

<footer class="primary">
    <ul class="addresses"><!-- could be a section instead -->
        <li><address>Somewhere
            1234 Maple St.
            Anytown, USA</address></li><!-- address tag may or may not be appropriate here -->
        <li><address>Somewhere Else
            5678 Elm St.
            Anytown, USA</address></li>
    </ul>

    <nav><!-- unless this is the primary navigation for the content this footer belongs to, nav is used here inappropriately -->
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </nav>
</footer>

Sass:

footer.primary {
    @extend %grid;

    .addresses, .addresses li, nav {
        @extend %one-half;
        @extend %grid__item;
    }
}
share
    
Thanks for your answer! Actually i used to write my HTML without all this kind of classes some years ago. But after some time i stumbled over some articles, which told me to do it differently (e.g. csswizardry.com/2012/10/…). And for some reason i really liked this whole OOCSS approach combined with BEM-like class names ("__" and "--"). I'm more a designer than a front-end developer, so i assume there are different opinions about this subject, but i'm just guessing... –  demrks Dec 6 '13 at 22:00
    
...I thought about naming the class names similar like you did it with ".adresses". But i wasn't sure, because that seems to be a very presentational class name (css-tricks.com/semantic-class-names). What if (what most likely will happen over time) there won't be any adresses anymore in the footer, but just plain text? Or the first adress stays and just the content of the second column changes to plain text? Most of the time it's pretty hard for me to change the HTML, because sometimes a CMS is generating the HTML inside some script files i don't have access to. What would you do then? –  demrks Dec 6 '13 at 22:01
    
I don't see .addresses as being presentational: the list is a collection of addresess. It could just as easily be named .contact-info, which may be more appropriate in this context. Unfortunately, the markup has to change when the content changes, which in turn requires style changes. Sometimes that's just how it is. Your new footer content may require more or less space than its predecessor. I can't really offer advice regarding coping with CMS, since I don't use them myself. –  cimmanon Dec 6 '13 at 22:11
    
Thanks, i like the idea of using ".contact-info", since it is more general. I don't need to deal with CMS either, but sometimes i'll have to work with a backend developer, who sets up the CMS and all that kind of stuff. Still not sure if using selectors or classes are better, because there are so many different opinions about this subject. Probably it is related to the structure of the HTML and in my example it would be better not to use classes everywhere. Anyway, thanks for your help! –  demrks Dec 6 '13 at 22:25

That is NOT what CSS classes are for. <footer class="footer" /> is, by itself, a mammoth code-smell. You only need grid and nav--meta, while the rest can and should be detected via either HTML structure or properly constructed CSS rules.

The only time you should need to add classes are for items where there isn't a distinct HTML tag for what you want, or you want to treat the same tag differently in a declarative aspect. Class names are part of the HTML, after all, and that means they're part of the content -- and you shouldn't mix content with presentation, especially in HTML 5.

You can place the same SASS function calls you have now into:

footer  {}
div.grid  {}
div.grid div  {}
#nav-meta {}

And that's assuming that your design for some reason can't just have a footer > div rule, or just apply .grid to the <footer> itself.

share
    
Thank you for your help. I already tried to explain the reasoning behind all this class names in my answer to cimmanon. Unfortunatly i can't apply .grid to the footer itself, because the footer is centered with "margin: 0 auto". The grid class, which is based on "CSS Wizardy Grid System" (see link at the top) uses a negative margin to the left for the gutters ("margin-left: -$gutter;"). That way i don't have to use a class of "last-item" for the last grid item in a row... –  demrks Dec 6 '13 at 22:13
    
So you suggest to not use classes at all but the CSS descendant selector? I assume i might have to change the "> div" to "> ul" or something if the HTML changes? Is that considered as the better practice opposed to using specific (and semantic) class names? –  demrks Dec 6 '13 at 22:14
    
The CSS class names in your example aren't semantic, they're layout. Even .grid isn't semantic. (And, YES, if the HTML changes beyond the original design parameters, you may need to adjust your layout... unless your layouts are clean.) –  DougM Dec 6 '13 at 23:48
    
If you're using that setup, and care about semantic HTML, you should use SASS's silent classes to keep separation between content and layout. –  DougM Dec 6 '13 at 23:53
    
Thanks, using sass silent classes was my intention anyway as stated above. Since both you and cimmanon now told me, i will kick out some class names and use descendant selectors for this purpose. –  demrks Dec 7 '13 at 0:13

Not the answer you're looking for? Browse other questions tagged or ask your own question.