current community

your communities

more stack exchange communities

Stack Exchange
tour help
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.
up vote 4 down vote favorite

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.

share|improve this question
1  
thecodelesscode.com/case/95 –  Idan Arye Jan 12 at 12:25
1  
@IdanArye Now I understand. bows. –  Lego Stormtroopr Jan 12 at 23:24
add comment

4 Answers 4

up vote 8 down vote accepted

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.

share|improve this answer
2  
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 at 10:58
add comment
up vote -2 down vote

For starters, try to group elements with the same CSS style into classes, if you feel you need the id to help you read your code. With each element having more that one class, you could use less lines of css with the same appeal, and your code will still be readable.

share|improve this answer
add comment
up vote -2 down vote

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).

share|improve this answer
add comment
up vote 3 down vote

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.
share|improve this answer
1  
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 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 at 4:39
    
For the gallery corner, I was thinking more along the lines of a background image, like a folded corner or something, if you have a different image as the background for the whole gallery –  Izkata Jan 12 at 4:47
    
@Izkata: Ya - Nothing really wrong with that. All in all, this is an issue of style rather than objective truth. –  Jim G. Jan 12 at 5:00
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 at 10:23
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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