Another great thing that has come about from Bootstrap is their use of class names to organise the styling of the framework. I’m sure the argument about exclusively using CSS classes could rage on but I’ve found on large sites with multiple developers it has been a great way to keep code modular and easy to change.

LESS is more

To give an example, Bootstrap tends to use a ‘base’ class and the build from it, like this:

<ul class="nav nav-tabs nav-stacked">
</ul>

I’ve come to enjoy this pattern, because when combined with LESS you can create some really nice, modular blocks of CSS. I’ll demonstrate with some button classes I have been writing for a design at work:

.btn {
    font-size: 14px;
    background-color: #a1a1a1;

    span {
        background-repeat: no-repeat;
    }

    &.btn-rounded {
        .border-radius(5px);
    }

    &.btn-pressed {
        .box-shadow(-1px 1px 2px 0 rgba(0, 0, 0, .1));
    }

    &.btn-prev {
        text-align: left;

        span {
            background-image: url("@{imgPath}buttons/arrow-left.png");
            background-position: left center;
            padding-left: 15px;
        }
    }

    &.btn-next {
        text-align: right;

        span {
            background-image: url("@{imgPath}buttons/arrow-right.png");
            background-position: right center;
            padding-right: 15px;

        }
    }
}

By using the & combinator we can keep the code nested beneath the .btn base class keeping the code easy to read and the resulting CSS is targeted just to the .btn class which is exactly what we want.

Overriding

In the example above I have two classes to control whether the button should have an arrow facing left or right. That’s great, but now I want to make a larger version of the button which involves overriding the current .btn-prev and .btn-next with new image paths:

    &.btn-large {
        @padding: 15px;
        font-size: 16px;
        padding-left: @padding;
        padding-right: @padding;

        &.btn-prev {
           span {
               background-image: url("@{imgPath}buttons/arrow-left-large.png");
               background-position: left 1px;
               padding-left: 20px;
               padding-right: 10px;
           }
        }

        &.btn-next {
           span {
               background-image: url("@{imgPath}buttons/arrow-right-large.png");
               background-position: right 1px;
               padding-left: 8px;
               padding-right: 20px;
           }
        }
    }

Now when I add a class of .btn-large to my <button/> element the .btn-prev and .btn-next I had already defined will be overridden by the two new definitions.

Once you start to create a little collection of classes like this, it becomes an absolute breeze to alter your designs by just swapping out different CSS classes and modifying existing ones just by adding additional classes.

However, like all things it can be easy to get carried away. So keep a sharp eye on your CSS output and ensure you don’t create needless selectors just because the nesting looks nice in your LESS files!