6

I'm quite a CSS beginner. I've read some introductory books but now I came across a sort of question that isn't answered in any of them:

Let's say I have a basic HTML-based website with a standalone CSS file. Now I'm creating a new CSS class or ID and I want it to have a meaningful name of course because I'll probably come back to those lines a couple of times again. For creating a meaningful name there are two options:

  1. I can name them hide-upper-space or small-seethrough-border - these kinds of names are very helpful when reading the HTML file, but in CSS file there will be a mess of all these classes and IDs from all HTML documents mixed together. Moreover, when I want to remove or modify one HTML document I won't be able to clear or modify the appropriate lines in the CSS file because I won't know if they affect also some other HTML documents.

  2. On the contrary, I can name them blog-footnote or gallerythumbs-upper-left and it will make my CSS file thoroughly readable, structured and easily modifiable, but it's useless information in HTML documents - when you're reading the HTML code for the footnote of your blog then blog-footnote is just plain useless class name.

I hope you get my point.
I'd guess that one of these options is the actual way how the CSS should be used but I can't figure out which one and why. Thank you for helping me to use the CSS the proper and effective way.

11

I'm no HTML/CSS expert so take this answer with a grain for salt but I think you are still missing the essence of why CSS exists in the first place.

Back in the day, we only had HTML so yes, you could tell exactly what the size, color, padding...etc of every element was, but this also made HTML harder to read more difficult to modify if you ever wanted to try different layouts and/or color schemes.

CSS was introduced so that you could have a very well defined and clear separation between document structure/content(HTML) and its visual appearance(CSS). So you want elements with names like "blog-footnote" and "gallery-thumb" because in HTML those names further help define the structure and meaning of the element. You see the element and you know exactly what it's for.

Those names are "useless" in a sense that you still have no idea how (or even where) that element will appear on the screen, but HTML shouldn't give you that information. That's what CSS is for.

To better understand this separation, take a look at CSS Zen Garden. That's exactly the same HTML document (i.e. same content) but presented using different CSS styles that people have submitted.

  • 5
    you still have no idea how that element will appear on the screen, but HTML shouldn't give you that information. You have no idea how helpful this line was for me. Thank you. – Jeyekomon Jan 12 '14 at 10:58
2

I can name them hide-upper-space or small-seethrough-border... On the contrary, I can name them blog-footnote or gallerythumbs-upper-left...

You should do neither of these.

Instead, you should favor a mobile-first CSS framework* like Bootstrap that has a semantic naming convention:

  1. Semantic class names. Building reusable components is a challenge in designing any kind of framework, and since Bootstrap is about style we want reusable style definitions. The classes provided by Bootstrap are meaningful without being specific about presentation details. For example, classes like warning, important, info, and alert all have an obvious meaning, but they don't give away any spoilers about the background colors they'll use. You can then use these Bootstrap classes in any application and even with heavy amounts of customization, the class names still make sense.
  • Bootstrap's grid layout means that you can write your markup to look nice on all form factors. Classes like small-seethrough-border and gallerythumbs-upper-left are a "code smell" to me because they imply that the page was written for just one form factor.
  • 2
    blog-footnote (a note placed below the blog about content in the blog) and gallerythumbs-upper-left (upper-left corner of the gallery, which probably has a special style) are semantic names. – Izkata Jan 12 '14 at 4:01
  • blog-footnote - 'Yes'; but gallerythumbs-upper-left troubles me because it implies some top left padding or margin that probably only makes sense on one form factor. My advice: Favor a grid system like Bootstrap. – Jim G. Jan 12 '14 at 4:39
  • 1
    @JimG. Thank you. Those class names were just rather poorly chosen examples. The second ones were trying to be semantic, the first ones were close to writing class="blue-verdana centered-text". Which didn't appear wrong to me at first but now I understand that it's almost as useless as a direct inline styling. – Jeyekomon Jan 12 '14 at 10:23
  • 1
    You can't recommend bootstrap and semantic naming in the breath. You just can't. Bootstrap wouldn't know a semantic name if one slapped it upside the face. Sure, it has warning, important, and a few others, but the vast majority is directly related to what it looks like. – RubberDuck Sep 20 '16 at 23:17
  • 1
    @RubberDuck. Agree with you there. Bootstrap is littered with unsemantic class names, especially when it comes to grid. rows, columns, col-xlg-4 col-lg-4 col-md-12 etc are not semantic – Louise Eggleton Dec 7 '18 at 22:05
-2

Well to start with ID's and classes are not really a CSS concept, rather, they are used to identify certain HTML elements - CSS and JavaScript both can then utilize this. Thus both are a part of HTML, and should be semantic descriptions, HTML provides structure and semantic context - not style.

So the best names describe either what the element is (ID) or what that kind of element is for (class). This is more in line with your second example. The ID's and class names are more analogous to naming variables than marking what styles you want where. If an element is the container for a comment give it the class commentCointainer, if it is the main menu bar, give it the ID menuBar.

Remember that if you make the class underlined-text then you have essentially obviated the point of external CSS, it would be simpler to just use the style attribute. Class and ID names that describe the style will also make it harder to change later. Suppose there is an area of my page that is blue, so I call it bluePart - this is descriptive of the style, but if later I want it to be red I will need to fix it in the HTML and in the CSS (even worse if it is a class that shows up in multiple places in many files).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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