Css Module 34

  Module 34 : CSS Nesting – Writing Cleaner CSS Using Nesting Techniques

Module Objective

By the end of this module, learners will:

Understand what CSS nesting is and how it improves code structure.

Learn how to use native CSS nesting (supported in modern browsers).

Understand the difference between preprocessor-based nesting (like SCSS) and native CSS nesting.

Implement best practices and avoid common pitfalls with nesting.

Write cleaner, more readable, and maintainable CSS using nesting techniques.

1. Introduction to CSS Nesting

What is CSS Nesting?

   

  

CSS Nesting allows you to write CSS rules inside other rules. This technique groups related styles together and avoids repetition, making stylesheets cleaner and more maintainable.

Traditionally, CSS was flat. You had to repeat selectors:

css code

.navbar { background-color: #333; } .navbar ul { list-style: none; } .navbar ul li { display: inline-block; }

With CSS nesting, this becomes:

css code

.navbar { background-color: #333; ul { list-style: none; li { display: inline-block; } } }

2. Why Use CSS Nesting?

Benefits:

Reduces repetitive selectors

Improves readability

Reflects the HTML structure visually

Easier to manage styles for component-based design

3. Native CSS Nesting Syntax (CSS Level 4)

Current Support

CSS nesting is now supported in major browsers like Chrome, Safari, and Edge. Firefox support is coming soon. Use with progressive enhancement in mind.

Syntax

Basic Example:

css code

.card { padding: 20px; background-color: white; &:hover { background-color: #f0f0f0; } h2 { font-size: 1.5em; } p { color: gray; } }

& refers to the parent selector.

Nested rules must be inside the opening and closing block {} of the parent.

4. Nesting in Preprocessors (SCSS Example)

SCSS has had nesting for years.

scss code

.button { padding: 10px 15px; &:hover { background-color: blue; } span { font-weight: bold; } }

Compiled CSS:

css code

.button { padding: 10px 15px; } .button:hover { background-color: blue; } .button span { font-weight: bold; }

5. Best Practices for Nesting

Limit nesting to 2–3 levels deep. Too much nesting = hard to read and maintain.

Avoid deep nesting with HTML tags like div > ul > li > a > span {}.

Use nesting only when there's a clear relationship between parent and child selectors.

Bad Example (Over-nesting):

css code

.container { .header { .menu { ul { li { a { color: red; } } } } } }

This becomes very hard to maintain. Instead, flatten where possible.

6. Practical Exercises

Exercise 1: Convert Flat CSS to Nested CSS

Flat CSS:

css code

.card { border: 1px solid #ccc; } .card .title { font-size: 18px; } .card .description { color: #666; } .card:hover { background-color: #fafafa; }

Task: Convert the above into nested CSS.

Expected Output:

css code

.card { border: 1px solid #ccc; .title { font-size: 18px; } .description { color: #666; } &:hover { background-color: #fafafa; } }

Exercise 2: Write Nested CSS for a Navigation Bar

HTML:

html code

<nav class="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </nav>

Task: Write nested CSS to:

Style .navbar with a dark background

Remove list styles

Style <a> with white text and a hover effect

Expected Output:

css code

.navbar { background-color: #222; ul { list-style: none; padding: 0; li { display: inline-block; a { color: white; text-decoration: none; &:hover { color: yellow; } } } } }

7. Advanced Use Cases

Media Queries Inside Nesting

css code

.card { padding: 20px; @media (max-width: 600px) { padding: 10px; } h2 { font-size: 1.5em; @media (max-width: 600px) { font-size: 1.2em; } } }

8. Common Mistakes and How to Avoid Them

Mistake

Why it's bad

Fix

Over-nesting

Hard to maintain

Flatten deeply nested rules

Nesting unrelated selectors

Breaks modularity

Keep rules related

Using & incorrectly

Produces invalid selectors

Always test and inspect output

9.

PreparingProjects

Tips:

Use nesting for components or BEM blocks.

Use PostCSS or SCSS if you want compatibility with older browsers.

Keep style logic co-located with components if using frameworks like React, Vue, etc.

10. Slide Structure:

Title Slide: "CSS Nesting – Writing Cleaner CSS"

What is Nesting? (with flat vs nested example)

Why Nest? (benefits)

Native CSS Nesting Syntax (examples)

SCSS Nesting (compare syntax)

Best Practices

Exercise 1: Flat to Nested

Exercise 2: Navigation Styling

Advanced Use Cases (media queries)

Common Mistakes

Summary and Q&A

11. Assessment Questions

What is the role of & in nested CSS?

How many levels deep is recommended for nesting?

Rewrite the following flat CSS into a nested format. (Give flat CSS example)

What are the pros and cons of using CSS nesting?

Explain how media queries work inside nested blocks.