Question 1

How do I implement these rules in a React project?

Accepted Answer

The guide recommends co-locating `.scss` files with React components and using a tool like `css-ns` to automatically prefix class names in JS. For example, you can namespace classes as `myapp-Component` and keep styles in a sibling `Component.scss` file for easy navigation and isolation.

Question 2

Is jareware/css-architecture better than BEM?

Accepted Answer

This architecture builds on BEM-like namespacing but adds stricter isolation rules, such as using child selectors to prevent leaks into nested components. It's more suited for large, component-based apps where sandboxing is critical, whereas BEM is more focused on naming conventions without enforced depth-wise isolation.

Question 3

How to handle media queries with this approach?

Accepted Answer

The guide shows that media queries work seamlessly within namespace blocks using preprocessor bubbling. For instance, in SASS, you can nest `@media (max-width: 500px)` inside `.myapp-Header` to scope responsive styles to the component, preventing unintended global effects.

Question 4

Can I use this with Vue or Angular instead of React?

Accepted Answer

Yes, the core CSS rules are framework-agnostic, focusing on preprocessor-based styling. However, JS integration tools like `css-ns` are React-specific, so you'd need to adapt the namespacing logic for Vue or Angular, possibly with custom helpers or build configurations.

Question 5

What are the main downsides compared to CSS-in-JS?

Accepted Answer

This architecture lacks runtime style generation and dynamic theming ease that CSS-in-JS offers, and it can't guarantee perfect isolation from external styles. It's better for teams preferring static, preprocessed CSS with predictable builds over JavaScript-driven styles.

Question 6

How to enforce these rules across a large team?

Accepted Answer

Use linting tools like Stylelint with custom rules for namespacing and selector nesting, combined with code reviews and the strict file mapping convention. The guide suggests consistency is key, so automating checks and educating on the 'local by default' philosophy helps maintain adherence.

8 rules for a robust, scalable CSS architecture

What is 8 rules for a robust, scalable CSS architecture?

Overview

Use Cases

Best For

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions