[Recoil42]

Yes. My point is that you avoid namespace conflicts.

Say you're building a windows-style scrollbar:

                |-> up arrow button
    scrollbar --|-> track -> drag button
                |-> down arrow button

Rather than having a CSS file (1) full of long, convoluted global class names:

    .scrollbar-frame{}
    .scrollbar-button-up{}
    .scrollbar-button-down{}
    .scrollbar-track{}
    .scroolbar-track-drag-button{}

or (2) full of overly-verbose endless trails (imagine how this gets when you're working with a complex object 5-6 levels deep)

    .scrollbar-frame{}
    .scrollbar-frame > .button-up{}
    .scrollbar-frame > .button-down{}
    .scrollbar-frame > .track{}
    .scrollbar-frame > .track > .drag-button{}

you can do this:

    .scrollbar-frame{
        .button-up{}
        .button-down{}
        .track{
            .drag-button{}
        }
    }

On compilation, you'll end up with a final result somewhat like example 2 -- but you weren't forced to write your first-level selector over and over the whole time. Your code also resembles the structure logic much closer at write time.

It gets better, too. Let's say we wanted to define our buttons in the classic windows 95/98 style -- grey, with a 1px relief border. In the classic CSS style, using example 2 as a pattern, we'd have to do it this way, duplicating our definitions the whole way:

    .scrollbar-frame{}
    .scrollbar-frame > .button-up{
        height: 20px; 
        width: 20px;
        background: #ccc;
        border-top: 1px solid #ddd; 
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #888;
        border-right: 1px solid #888;    
    }
    .scrollbar-frame > .button-down{
        height: 20px;
        width: 20px;
        background: #ccc;
        border-top: 1px solid #ddd; 
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #888;
        border-right: 1px solid #888;
    }
    .scrollbar-frame > .track{}
    .scrollbar-frame > .track > .drag-button{
        width: 20px;
        background: #ccc;
        border-top: 1px solid #ddd; 
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #888;
        border-right: 1px solid #888;    
    }

However, using SASS/LESS, we could define a mixin. Using SASS, here's how you'd achieve the exact same thing:

    //Define a mixin
    @mixin greybtn{
        width: 20px;
        background: #ccc;
        border-top: 1px solid #ddd; 
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #888;
        border-right: 1px solid #888;
    }

    .scrollbar-frame{
        .button-up{
            height: 20px
            @include greybtn; //Include our mixin.
        }
        .button-down{
            height: 20px
            @include greybtn;
        }
        .track{
            .drag-button{
                @include greybtn;
            }
        }
    }

The resultant code will be almost exactly the same, but you just wrote a lot less to get there, and will have an easier time of modifying it in the future. You can see the massive benefit in both speed and organization this allows, especially on large projects.

[Kiro]

This is actually a great argument. I'm almost convinced. However, in the second example, wouldn't it be better to just have a .scrollbar-frame > .button with all the styles and then just do class="button up" and class="button down"?

[coldtea]

Yes, but this enables it to be reused in other contexts, where the names "up" and "down" would not make much sense, but you would like to have the same border style for some reason.

Plus, you could turn this into a mixin "function", with the actual colors of the states changed depending on where you include it.

So the way he writes it, you could have a green, blue, whatever version of those borders, with the same one line (plus a parameter), whereas in CSS you would have to do:

up-blue, up-red, up-green, down-blue, down-red, down-green etc classes.