[kangoo1707]

Nesting is okay for one-level.

However it violates the principle of least astonishment. How come a button inside .header differs from the button inside a .footer, then where are the differences defined, inside the button.scss or header.scss? Then one must take into consideration CSS Specifility and sprinkle !important everywhere.

Instead, use modifier (in BEM) or create two buttons (.header-button and .footer-button) or create 2 utility class (.is-header-btn, .is-footer-btn) or just use TailwindCSS and you're good to go for all kinds of requirements, without ever resort to !important

[luckylion]

> However it violates the principle of least astonishment. How come a button inside .header differs from the button inside a .footer, then where are the differences defined, inside the button.scss or header.scss? Then one must take into consideration CSS Specifility and sprinkle !important everywhere.

That's true. On the other hand, who is still trying to figure those things out without using their browser's dev tools and source maps?

Using Sass also doesn't mean that you can't use two button classes or utility classes.

[topicseed]

Yep, makes a lot of sense. I usually follow these guidelines but with larger "code as you go" projects, it gets a tad dirty.

Chrome Dev Tools help to find what's glitchy when styling misbehaves.