is there a recommended nesting limit on css

[akurtula]

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

[Michael_bonds]

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

[Author]

Posts