Hacker News Reader

Comment by nailer | Hacker News Reader

I agree this is BEM, not SASS nesting.

I dislike BEM because it requires modification of CSS classes to change how something looks - you add and remove classes to your `.login-box` to make it bigger or bluer or wider.

I prefer CSS auto-nesting (using Svelte) or SASS nesting (for older projects) so I can just modify my `.login-box` to add whatever styles it needs and not touch my HTML.

View on HN

Please read my comment above, also here's how the above "nesting" compiles to:

.compose-form .compose-form__modifiers .compose-form__upload-description input::placeholder { opacity: 1; }

Who need easy to read post-build selectors in the age of source maps? Much better to have a file that is easier to read before the build.

I did.

    .compose-form .compose-form__modifiers .compose-form__upload-description input::placeholder { opacity: 1; }

That looks like BEM, with all the underscores and modifiers.

Proper nested SASS would look like:

    .compose-form .upload-description input::placeholder { opacity: 1; }

Scoped CSS would look like:

    .compose-form-abc123 .however-deep-or-shallow-you-want { opacity: 1; }

Reply on news.ycombinator.com