best practices for CSS naming convention

[quack]

I've had a large PHP site written for me (I had little HTML knowledge when I started but now need to maintain the site).

The developer used a Structural naming convention in the CSS rather than a Presentational naming convention. Understanding this now makes things a bit easier for me.

Where I'm stuck now is that I have a lot of declarations like this...

.paddingTopBottom1{  // Notice the '1' not '10'
padding: 10px 0px 10px 0px;
text-align:center; // And everything else added
background-color:#FFFFFF;
color:#FFFFFF;
}
.paddingTopBottom2px{
padding: 2px 0px 2px 0px;
border: 0px;
margin: 0px;
}
.paddingTopBottom5px{
padding: 5px 0px 5px 0px;
}
.paddingTopBottomLeft5px{
padding: 5px 0px 5px 5px;
}
.paddingTopBottom10px{
padding: 10px 0px 10px 0px;
}
.paddingBottom10px{
padding: 0px 0px 10px 0px;
}
.paddingBottom5px{
padding: 0px 0px 5px 0px;
border:0px;
}

I need to get my head into this but it seems like the developer used an existing declaration when he knew it or just made another when he didn't. The structure of the entire site is almost exactly the same by appearance, but one page may have a div with padding on the right and another page will have padding on the left of an adjacent div. There's one CSS file that's 1700 lines.

Any suggestions as to how: 1) I can improve this going forward and 2) What would be a good and proper way of structuring basic declarations such as padding like this?

Thanks much

[D_Blackwell]

Nothing wrong, IMO, with structural names or presentation names or even using both. However, you hit on the issue with:

seems like the developer used an existing declaration when he knew it or just made another when he didn't.

What he is trying to do (sort of) is set up some 'global' classes so that he can plug in the one he wants, when he needs it - kind of like a 'library' of padding options, e.g.-

<div class="container padding-option-1">

This allows you make .container more flexible, more usable. One could easily add a small library of boder: and background: declarations, and the same container could be used many times and the user would never know it was the same box restyled,e.g. -

<div class="container padding-option-1 border-a background-d">

However, what we have here is a mess. The declartionas are all unique. None are quite the same. But how many can you need?

There's one CSS file that's 1700 lines.

He didn't design the site, he just added more CSS every time he added to the site.

I built a large site for a company over a period of years. They were a small outfit that grew and grew and hit big. The site was well designed, but the needs changed beyond anything anticipated several times. To keep the site from bloating I 'reset' the CSS with newer, leaner 'primary stylesheets' as needed. The old ones kept the original pages fully functional, and then I used the newer ones for the newer site sections. Built to do more and support more, the stylesheets were slim and trim. The largest sheet was the original, at 550 lines, where there just wasn't time to build the site fast enough for the growth of the business. I knew that it had a lot of junk in it, but the company was growing like a weed, and they needed new pages, sections that shouldn't have been needed for years..... It can get messy if you have t build fast and the needs of yesterday are obsolete today.

To answer your question, I would set up a new primary stylesheet that has just what the site needs, and use this new stylesheet for all new pages - an 'on the fly' redesign. Existing pages will, for now, use the old stylesheet, but new pages will get the improved verion.

Also, look for 'sectional' CSS. That is, most of the site will have 'global' styles that are used everywhere. An 'Articles' section might have a unique design - used only on pages in that section. A 'Product' section might have a unique design - used only on pages in that section.

Rather than tack every CSS declaration on to one sheet, call several, separate sheets as needed. Maybe the 'Articles' pages get links to a global sheet and an articles sheet. Products pages get links to a global sheet and a products sheet. Each section gets the CSS that it needs, not all of the CSS for the entire site - most of which is not needed. This could trim down the global sheet by a significant percentage.

You do have to be more aware of id and class names when using several sheets and plugging them in. Be very descriptive so that you don't use the same names on more than one sheet and then find that those sheets are both needed for a section.

I can see what he is doing with the padding declarations, but the differences between some are so minor, it would be a lot easier to settle on a compromise. He has;
padding-top and and padding-bottom with 5px and 10px options.
He has padding-bottom: with 5px and 10px options.
Then a couple of odd-ball declarations, that might be used quite a bit, or 'one and done'. Hard to guess.

Best bet is that the CSS might not be as bad as you think, but because it is all on one sheet, you have a massive CSS file, rather than the neater 'sectionalized' sheets - which are also a lot easier read, track, monitor, and change as needs change.

[quack]

THANKS D...! That's very helpful and much of the answer I was looking for. Overall I do think the coder did a good job with the site and with how I gave him info, but now I need to deal with learning what I wish I knew beforehand.

I think that starting a new CSS file is the answer. I always seem to be going up-and-down comparing declarations then I just end up making new ones too.

More specifically, on the padding issue; would you recommend something like having (for example)
.paddingLeft2
.paddingRight2
.paddingTop2
.paddingBottom2
.paddingLeft5
.paddingRight5
.paddingTop5
.paddingBottom5, etc...

assuming that these are common and somewhat universal declarations?

Thanks again

[D_Blackwell]

then I just end up making new ones too.

That's the danger for any growing site - even if pretty well designed and taking future growth into consideration as best as possible. If you need a new container, and an existing one is not compatible because of simple things like background: border: color: width: - then a whole new declaration block is added for another container. Over time, unless drawing from 'templates' that are reused often, a sheet is so hard to follow that it is easier just to add a new container- and so forth.

Yes, on the padding issue; if you have several padding declarations that are used quite a lot, the easiest way is to create the 'library' approach as shown in your last post.

1) This means that you can create 'clean' containers that are easily customized. Just plug the container class and the padding class into the HTML and you're set. An analogy similar to 'library', would be 'recipe'; picking the ingredients needed for the container and avoiding the creation of more and more containers.

2) I've been preaching the 'library' or 'recipe' approach for a long time. It remains rarely discussed or recommended. So - you may get strongly dissenting views noting that it adds file size..... IMO, file size impact is minimal, it is most often dramatically reduced, the stylesheet is a whole lot easier to use, and the HTML a lot easier to markup.

3) Just use /*COMMENTS*/ in your CSS to 'sectionalize' what you are doing.

4) 'Template' oriented design of CSS and HTML will also make both a lot easier to manage. Don't give every page a new design or layout. I do like giving different sections unique (but complementary) designs, but this is one area where multiple stylesheets kick in. You call the 'global' sheet that the entire site uses, and you call the sheet that the section with that design uses.

[quack]

Your library approach seems to make sense. Just as a guess, my CSS file could be 1/4 the size that way. There's lots of redundancy and understanding that your own code always looks foreign after a while, I'm very big on structures and standards. I think it's the lack of standard that's had me very confused when trying to work with the current CSS.

Thanks again. Your information has been a big help!

[Fotiman]

In general, using names class names like "padding" or "bottom" is a bad idea. Instead, use class names that describe the content. If you use class names like "padding" or "bottom", then what happens when you want to change them? For example, lets use this example:

.paddingBottom10px { 
  padding: 0px 0px 10px 0px; 
} 

Now lets say that you want to change the presentation of the item that you've applied this class to, and you want it to have 5px of padding all around and a black 1px border. You could:

1. Modify the existing CSS to look like this:

.paddingBottom10px { 
  padding: 5px;
  border: 1px solid #000; 
} 

But this is going to cause confusion, as your class name describes specific presentational attributes which are not being applied.

2. Create a new CSS style rule and then update your HTML markup with the new class. This costs you one of the main benefits of CSS. In this case, you need to modify all of your content in order to change your presentation.

If you use class names that describe content, then you could simply modify only the CSS rules. For example:

.bookTitle {
  font-weight: bold;
}
.bookAuthor {
  font-style: italic;
}

So in general, I would avoid class names that are Structural or Presentational (they both equate to presentation in the examples you've provided).

[swa66]

The guidance I'd give is to first

• Like Fotiman said above, have only names that describe your content.

  To give an example: a class with the name red is wrong.
  A class with the name "warning" is much better.
  That way if you want it to be red, have a border, have stop sign in the background etc. it is all possible without having to change the html.

• Next there is often a tendency to style class by class.
  This means you're not using the most powerful tools of CSS: the cascade, the inheritance, specificity.

  E.g. if you have a default font and a font you want for titles ?
  You could (and we way to often see it that way) set a font on every single class.
  Or you could do
  

  
  body {
   font-family: "my fancy font", serif;
  }
  h1, h2, h3, h4, h5, h6 {
   font-family: "my fancy title font", sans-serif;
  }
  

  
  And then if your menu needs to have the same font as your titles, you can just add it to the headers:
  

  
  body {
   font-family: "my fancy font", serif;
  }
  #menu, h1, h2, h3, h4, h5, h6 {
   font-family: "my fancy title font", sans-serif;
  }
  

  
  And the rest of the style for the menu can go elsewhere in the file.

  Do the same with colors, etc and you'll notice that changing the color in the CSS, change the font in the CSS all of a sudden is easy: it's all located together, you don't need to remember that #abcdef is the color your theme uses, cause you just add it to where that color is used.

• Avoid divitis and classitis: the overuse of divs (and spans) and classes (and ids): get rid of it in the html. This does mean learning a bit about selectors and how you can use them but in the end your code will be simpler and cleaner.

• Avoid some red flags in the CSS:
  background-color:#FFFFFF;
  color:#FFFFFF;
  Most can't read white text on white background. It might even get you a penalty for cloacking ...
  

As for the names themselves: keep them simple, easy to remember.

HTH

[quack]

Thanks folks. I think it's necessary for me to get a better handle on CSS before I go much further. I'm seeing more-and-more why I'm confused when I go over the current site and how so many different developer styles can be mixed together making some nasty stew.

Does anyone have any recommendations on some good BEGINNER CSS reading or tutorials?