I was just wondering what people though was the best practice regarding css classes. Is it better to have lots of classes (padding, background colours, margins, borders etc) with a small number of definitions, and then style HTML elements with lots of different classes, or have a smaller number of classes but give more definition to these classes?
On a project I am currently working on, the team I am working with are choosing the former, and there are lots of styles, for example, the LI elements have a background colour, this is styled by assigning each LI a class, instead of assigning the colour in the CSS. It seems to me like this will bloat the HTML a lot more than a few extra lines of CSS.
Unless each of the LI's require different backgrounds that's pretty inefficient. It's always worth trying to condense CSS down to relevant and efficient proportions.
In the case of LI's and UL's you might get more success by using pseudo selectors like :first-child, :last-child, nth-child and nth-of-type. That being said, depending on what browsers you're supporting nth-child and nth-of-type might present problems.
Can you show an example or upload the HTML & CSS somewhere, we all might be able to chip in ways it can be accomplished easier and lead to better editing for future changes.
This is one of the reasons preprocessors are gaining popularity. You can use a minimal number of classes but not end up with a huge CSS file. But if you're not able to use one then I'd just be sensible about the number of classes used, like the guys above said; helper classes are very useful but don't take it to the extreme and start adding classes for every attribute. It's better for the 1 CSS file to be larger rather than for many HTML files to be bloated.
@andy_unleash - I agree with you. It is a very inefficient way of doing things. The LI was just an example. This is happening all over the site, but that is the way the in house developers want to proceed, so who I am to argue as a contractor, I am just here to help with more hands on deck, and adjust to their coding standards. Seems the wrong way to do it though. Ho hum, will be moving on to the next project soon, so not to worry :)
I like to start generic with tags and how I want them to look for the entire site. Then I add helper and pseudo classes for certain situations. Then work on ids.
However I don't like having a bunch of helper classes because then I end up adding tons of classes to each tag to make them look right.
On a project I am currently working on, the team I am working with are choosing the former, and there are lots of styles, for example, the LI elements have a background colour, this is styled by assigning each LI a class, instead of assigning the colour in the CSS. It seems to me like this will bloat the HTML a lot more than a few extra lines of CSS.
Any thoughts?
In the case of LI's and UL's you might get more success by using pseudo selectors like :first-child, :last-child, nth-child and nth-of-type. That being said, depending on what browsers you're supporting nth-child and nth-of-type might present problems.
Can you show an example or upload the HTML & CSS somewhere, we all might be able to chip in ways it can be accomplished easier and lead to better editing for future changes.
"You should imagine them as parts of the perfect sub from Subway or Quiznos" - can't remember who tweeted this
@andy_unleash - I agree with you. It is a very inefficient way of doing things. The LI was just an example. This is happening all over the site, but that is the way the in house developers want to proceed, so who I am to argue as a contractor, I am just here to help with more hands on deck, and adjust to their coding standards. Seems the wrong way to do it though. Ho hum, will be moving on to the next project soon, so not to worry :)
However I don't like having a bunch of helper classes because then I end up adding tons of classes to each tag to make them look right.