Nesting in Sass - Best approach

One of the very useful features of Sass is Nesting. Nesting is great when we need to write less and do more. Sass speed up the development process and output clean and tidy CSS. If you have no Idea what is Sass and how to Set up Sass - Read this basic articles. Though it is not mandatory it will give you a basic idea and familiarize you with Sass.

So, Let's get the idea more deeply on how to use Nesting in Sass.

In HTML we use Nesting at it's best.

<html>

<head>
    .... ....
</head>

<body>
    <div>
        <p>...</p>
        <div>...</div>
    </div>
</body>

</html>

As we see the HTML example, we get the best idea of Nesting. Div inside Div, span, p all are nested inside the body, further body, Head are nested in HTML Tag.

In CSS, we usually have to specify styles for these elements line by line using classes or IDs. Sass allows writing less for the same rule-set. Suppose we have div inside div and p inside the div,

<div class="box">
    <div class="content">
        <p> Lorem Ipsum </p>
    </div>
</div>

we will write something like this,

.box {
    width: 65em;
    height: auto;
    margin: auto;
    .content {
        // Nested inside .box
        width: 60em;
        margin: auto;
        p {
            // Nested inside .content
            color: #555;
            font-size: .9em;
        }
    }
}

Output:

.box {
    width: 65em;
    height: auto;
    margin: auto;
}
.box .content {
    width: 60em;
    margin: auto;
}
.box .content p {
    color: #555;
    font-size: .9em;
}

Nice. That is the simplest example of nesting. We can keep nesting as deeper as we want. But that is not advisable. As setting rule-set specificity may turn out to be the nightmare. Imitating DOM in Sass is not a good idea at all.

Here is why.

.one {
    .two {
        .three {
            .four {
                .fifth {
                    and so on...
                }
            }
        }
    }
}

Output:

.one .two .three .four .fifth {
    .......
}

There will be no any issue in doing so and it will output what you needed. This is quite genius work. But one thing we should remember, If Sass allow us to nest, it doesn't we must do it. Nesting deeper may cause code tough to read and hard to maintain. Further, in case we need to change the parent eg; .four to .some-class, then it will affect the deepest level selector as well. and yes, we have to change them to.

Nesting in Sass can be used to write shorthand. For example,

.button {
    border {
        style: solid;
        width: 1px;
        color: teal;
    }
}

and it will output:

.button {
    border-style: solid;
    border-width: 1px;
    border-color: teal;
}

Another good example of Sass Nesting is below:

.button {
    background: #c9302c;
    &:visited {
        background: #fff;
    }
    &:hover {
        background: #3baee4;
    }
    &:active {
        background: #4e4e4e;
    }
}

Nesting in Sass is perfect for Navigation or any Particular Module like Header, Footer etc. and for Pseudo classes as well.
Sass is for the Neat and Clean code. If you are using Sass for your project, try keeping the Nesting at most 4-level deep. This will keep the code clean and easy to maintain. This applies same for all preprocessor like Less, Stylus etc.

You might think that- 'I have never face any issues with multi-level nesting and it always works'. Well, That is true. But we should remember that nesting in Sass is a feature which makes our life a bit easy. Writing good code is what your goal should be rather pushing your code too much to get the result which may trouble and possibly not futuristic. If you think there is no need to nest this selector-- Do Not Nest.
Always keep your code neat and tidy. We use Sass or any other preprocessor to make the task easier and semantic not to make morecomplex.

Keep the specificity as less as you can, It will be much easier to override or customize the rules in future if needed. Read these beautiful articles about the specificity cssguidelin.es and www.htmldog.com

We will be happy to know what you prefer and why. How do you organize your code in term of Sass Nesting?

If you have any issue, let us know in the comment box.

Tags - Sass