The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS best practice, lots of classes or larger class definitions

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #38185

    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.

    Any thoughts?

    Taufik Nurrohman

    @karlpcrowley My favorite classes:

    .alignleft {}
    .alignright {}
    .aligncenter {}

    .button {}
    .button.small {}

    .text-left {}
    .text-right {}
    .text-center {}

    .tip {}
    .alert {}
    .download {}
    .update {}
    .demo {}
    .try {}
    .note {}

    .netral {} /* for: border:none;outline:none;background:transparent;box-shadow:none; */

    .full {}

    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.


    Thanks for the comments guys.

    @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 :)

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.