CSS Nesting vs CSS-in-JS

What are the main differences between CSS nesting and CSS-in-JS?

CSS nesting allows you to write nested selectors in your stylesheets, making it easier to manage styles hierarchically. CSS-in-JS, on the other hand, involves writing CSS directly within JavaScript files, often using libraries like styled-components or Emotion.

Which approach is better for large applications?

It depends on your team's workflow and preferences. CSS nesting can keep styles organized, while CSS-in-JS offers dynamic styling capabilities and scoped styles, which can be beneficial in large applications.

Can you give an example of CSS nesting?

Sure! In SCSS, you might write:

.nav {
  ul {
    list-style: none;
  }
  li {
    display: inline;
  }
}

This nests the styles for ul and li within the .nav class.

What about an example of CSS-in-JS?

In a React component using styled-components, it would look like this:

const Nav = styled.nav`
  ul {
    list-style: none;
  }
  li {
    display: inline;
  }
`;

This allows you to define styles directly in your component.