5 ms·

This is what Sass files do to your CSS files if you abuse nesting Aren't they just using BEM, which is a quite popular css methodology? I don't see how this is

by tmy03 8y ago

This is what Sass files do to your CSS files if you abuse nesting Aren't they just using BEM, which is a quite popular css methodology? I don't see how this is a bad thing.

nailer 8y ago
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.
- redmaniack 8y ago
  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; }
  - Raphmedia 8y ago
    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.
  - nailer 8y ago
    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; }
redmaniack 8y ago
I'm not saying using BEM is a bad thing. Not at all, I'm using it too and like how it plays with Sass/scss. e.g. I do like how Sass makes it easier to write BEM-like code similar to the below: // style.scss .btn { ... &--success { ... . } } // style.css .btn {...} .btn-success {...} But when abusing Sass nesting and choosing a weak naming convention, the resulted CSS selectors can go wild. Here's an example: https://github.com/tootsuite/mastodon/blob/995f8b389a66ab76ec92d9a240de376f1fc13a38/app/javascript/styles/contrast/diff.scss https://github.com/tootsuite/mastodon/blob/995f8b389a66ab76e...
- JeremyBanks 8y ago
  Is output verbosity a problem? Narrower selectors are easier to reason about and faster to process, and compression should take care of most of the size difference, since it's so repetitive.

by tmy03 8y ago

This is what Sass files do to your CSS files if you abuse nesting Aren't they just using BEM, which is a quite popular css methodology? I don't see how this is a bad thing.

nailer 8y ago

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.

redmaniack 8y ago
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; }
- Raphmedia 8y ago
  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.
- nailer 8y ago
  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; }

redmaniack 8y ago

I'm not saying using BEM is a bad thing. Not at all, I'm using it too and like how it plays with Sass/scss. e.g. I do like how Sass makes it easier to write BEM-like code similar to the below: // style.scss .btn { ... &--success { ... . } } // style.css .btn {...} .btn-success {...} But when abusing Sass nesting and choosing a weak naming convention, the resulted CSS selectors can go wild. Here's an example: https://github.com/tootsuite/mastodon/blob/995f8b389a66ab76ec92d9a240de376f1fc13a38/app/javascript/styles/contrast/diff.scss https://github.com/tootsuite/mastodon/blob/995f8b389a66ab76e...

JeremyBanks 8y ago
Is output verbosity a problem? Narrower selectors are easier to reason about and faster to process, and compression should take care of most of the size difference, since it's so repetitive.