Hacker News new | ask | show | jobs
by ryanSrich 4644 days ago
I find that following a prefix method works quite well for organizing a lot CSS. For example (using sass):

    .home-header-h1{
        font-size: 20pt;
        padding: 0px;
        margin: 0px;
        line-height: 1.3;
    }
    .home-header-h1-blue{
        @extend .home-header-h1;
        color: blue;
    }
    .home-header-h1-green{
        @extend .home-header-h1;
        color: green;
    }
This helps keep classes out of your HTML and avoids large amounts of nested CSS. Here's the compiled source:

    .home-header-h1, .home-header-h1-blue, .home-header-h1-green {
          font-size: 20pt;
          padding: 0px;
          margin: 0px;
          line-height: 1.3; }

    .home-header-h1-blue {
          color: blue; }

    .home-header-h1-green {
          color: green; }
2 comments

But with classes with "green" and "blue" in the names, you're still mixing meaning and presentation and hurting maintainability. See: http://thecodelesscode.com/case/95
Just nit picking here, but I think your selectors are a bit redundant and long. What do you think about something like this?

    .home-header-h1{
        font-size: 20pt;
        padding: 0px;
        margin: 0px;
        line-height: 1.3;
    }
    h1.home-blue{
        @extend .home-header-h1;
        color: blue;
    }
    h1.home-green{
        @extend .home-header-h1;
        color: green;
    }
But I think if I was trying to truly minimize maintenance I would do something like... (in LESS not familiar with sass)

    h1.home {
        font-size: 20pt;
        padding: 0px;
        margin: 0px;
        line-height: 1.3;

        &.blue {
            color: blue;
        }

        &.green {
            color: green;
        }
    }