Writing more intuitive code and making inheritance clear with nested rules

HTML elements in the hierarchy of the Document Object Model (DOM) of HTML5 documents are nested while CSS, on the other hand, does not reflect this nested structure. Less makes nesting of CSS selectors possible. With the nested selectors being used, your code reflects the nested structure of HTML5.

Getting ready

To get started, you will need to create a valid HTML5 file, including some nested elements. Your HTML, for instance, may look like the following code:

<section role="main">
<h1>heading</h1>
<p>some content</p>
</section>

You will also have to create an empty Less file named project.less. Make sure the head section of your HTML5 document also contains the following code:

  <link rel="stylesheet/less" type="text/css" href="project.less">
  <script src="less.js" type="text/javascript"></script>

How to do it…

In CSS, the section with the nested h1 and p elements can, for instance, be styled with the following CSS code:

section h1 {}
section p {}

However, with Less, you can style the same elements using the following Less code:

section {
  h1 {}
  p{}
}

How it works…

In the preceding example, nesting the selector mimics the nested structure of your HTML code. Nesting makes the code intuitive and so much easier to read and maintain. Less's code will also be more concise than its corresponding CSS code. You should use nesting with care; nesting too much will break your CSS code after small changes in your HTML. You should not try to nest your complete HTML structure, but nesting will be very useful to assign pseudo classes, such as hover, to your elements.

Note that the nested selectors in Less still compile to un-nested selectors in CSS.

To see how this works, use the following Less code:

section {
  h1 {font-size: 20em;}
  p{ padding: 0 10px;}
}

The preceding code will compile into the following CSS code:

section h1 { 
  font-size: 20em;
} 
section p { 
  padding: 0 10px; 
} 

There's more…

Although nesting your selector can make your code more intuitive, it can equally break other things. For instance, considering object-oriented CSS (OOCSS) principles; these do not allow nesting of headings (h1 to h6). Headings are considered to be built-in objects in OOCSS and so their appearance should be consistent across an entire site.

See also

• You can read more about OOCSS at http://appendto.com/2014/04/oocss/
• Read the presentation by Nicole Sullivan used to introduce OOCSS at http://www.slideshare.net/stubbornella/object-oriented-css