Grow your CSS skills. Land your dream job.

is there a recommended nesting limit on css

  • # June 13, 2012 at 10:53 pm

    Hi

    I started using sass and one basic thing that I like is the way you can nest your css. It seems to make the code much cleaner and easier to manage. But is there a possibility that approach is bad on performance? So which is best:


    $one $two $three $four $five{
    background: red;
    }

    or


    $five{
    background: red;
    }

    Thanks

    # June 13, 2012 at 11:15 pm

    Actually, when writing SASS (or scss), your sass will actually be compiled. So performance will not be an issue.

    So, lets sat you wrote some sass similar to the following:

    #someWrapper {
    width: 960px;
    bockground-color: #333;

    p {
    font-family: Helvetica, Arial;
    font-size: 14px;

    a {
    color: #ccc;
    }
    }
    }

    Now, that really does look pretty doesn’t it?!?!

    That would be compiled down to the following css:

    #someWrapper {
    width: 960px;
    bockground-color: #333;
    }

    #someWrapper p {
    font-family: Helvetica, Arial;
    font-size: 14px;
    }

    #someWrapper p a {
    color: #ccc;
    }

    So, as you could probably tell, nesting could be virtually endless!

    But, you should probably take readability into consideration when writing SASS.

    -Mike

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".