A code should be organized. That’s the fact and I think is a very good one for the opening of the text about nesting. So... CSS is used for describing the presentation of a document written in a markup language. There are few more texts to check on CSS, e.g. , , . Every one of us is familiar with that and knows that you first need a to detect an element and after that comes . positions in CSS text underline relative units selector the styling For the best way to select the desired element, we should use every trick there is - . However, , and every element must be selected separately. In another word, if there is a child element it should be defined completely separate from the parent. selectors CSS doesn’t allow nesting Less and Sass Less and Sass are which extend CSS language in valuable ways. Just one of many improvements they offer is an easier and more natural way of defining nested elements and its relative position among themselves, nesting! CSS pre-processors It is an option which has same interpretation in less and sass so the next explanation is universal for both of them. Nesting makes the code easy to read, extend, and maintain. Nesting An example will tell everything (and then I will explain it, just in case): Less/Sass: .grandparent{ .parent1{ .child1{} .child2{} .child3{} } .parent2{ .child1{} .child2{} } } CSS: .grandparent .parent1 .child1{} .grandparent .parent1 .child2{} .grandparent .parent1 .child3{} .grandparent .parent2 .child1{} .grandparent .parent2 .child2{} So, instead of the defining child elements with space in the same line (CSS syntax), pre-processors enable you to use the same structure as in e.g. HTML. So if the child3 element is a child of the parent1 and parent1 is a child of the grandparent, all that is defined just like that. Ampersand As a developer, I'm full of best practices and pieces of advice and here comes one on this. Nesting ~~should~~ must be used for pseudo-classes because it is a must. To define a specific state of an element, it is necessary to add pseudo-class next to the selector and with nesting, it's ultra-intuitive - just put ampersand next to pseudo-class. Besides this use, it can (but it's unnecessarily) be used next to the child selector but with . The `&` always refers to the parent selector when nesting. `_` .child{ &:active{} } If the ampersand is located right next to the child element in nesting, it is compiled into a double class selector. Less/Sass .child{ &.grandchild{} } CSS .child.grandchild{} Conclusion Deep nesting, which is actually recommended, - it’s hard to reuse, override and make CSS file bigger, but developers who use it are aware of it all and it’s not a problem (believe me). has its downsides Use everything available to make your code writing experience as fast and as easy as you can. Nesting is naturally one of those things, so use it maximally!

RSpec Testing: Let Vs. Before

How To Create Box Element Using CSS Only

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Nesting in Less and Sass

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Active Record Associations in Rails

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Active Record Associations in Rails

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps