5 ms·
> Delete the widget? Delete the file. This rarely happens. I would argue that creating an automated system to enforce "rules" should be favored over forcing e
by qudat 8y ago
> Delete the widget? Delete the file.
This rarely happens. I would argue that creating an automated system to enforce "rules" should be favored over forcing every developer to know the rules and abides by them.
It is much easier to understand the relationship between css and js when the css is just a js variable.
Having built many large applications using the CSS file method, css modules, each widget gets its own file, co-locating css files with the js, I much prefer using `styled-components`. It provides a ton of flexibility, it opens doors for dynamic css by leveraging js (the hacks I've seen, had to write to get css dynamic is astounding), and I don't have to look very far to see how it's being used because the CSS is literally attached to the component I'm using. All I do in VSCode is cmd+click and bam, I can see the CSS for this component. There's no need for naming convention, there's no worry about global css variables getting into your styles, and there's no digging around looking for css that might be influencing your component. The best part for me is: when I delete the component, the CSS is gone as well. There's no thought put into scouring the FS to find lingering CSS that used to be used.
I love `styled-components` and most of the designers I work with also enjoy it.
- LocalPCGuy 8y agoWhy wouldn't the CSS file be deleted? It should be co-located with the widget, so you just delete the entire widget folder.
- ravenstine 8y agoYeah, it's really not hard to delete a CSS file. People really are that lazy, but that's on them, not the technology.
- BurningFrog 8y agoThis is a losing argument. Judge all you want, but you can only change technology, not human nature. Good engineering is to find pragmatic solutions that work in the real world.
- exogen 8y agoNobody thinks it's hard to delete a file. It's hard to know when you can delete a rule. Are you positive that all the rules in your component's CSS file only affect that component? Then great, delete the whole file. What about the individual rules within that file? How do you know whether your app is still rendering any components with the `fancy` modifier anymore? Keep in mind any JS on the page could be be dynamically toggling the `fancy` class, including in very rare circumstances, including from dynamic data that might bring the string "fancy" with it so that you can't just grep your codebase for it. Is it safe to delete the `fancy` rule? Another problem is that even BEM admits that sometimes nested selectors are necessary. It's right there in the BEM FAQ: "While in general BEM recommends avoiding nested selectors, in this case they are reasonable." Sometimes you need your button to look a certain way when it's inside a nav menu item. So what's the solution? Either a nested selector (targeting both the nav item and the button) or a new modifier on your button, like `is-in-nav-item`. Eventually your app changes and you're not rendering any buttons in nav items anymore. Maybe nav items don't even exist anymore and you at least remembered to delete those. Are you also going to remember all the places in your code you need to track down to delete these obsolete nested selectors/modifiers? Or is there just going to be dead code now? What if the selector is slightly more general, and you're not sure if it's targeting other things as well? Are you confident that you won't break anything else? CSS selectors are effectively global. Anything could be secretly relying on the styles that a selector applies. That is the problem. Not deleting a file. Your individual component CSS files are now the "append-only" stylesheets, not necessarily the whole combined stylesheet.
- LocalPCGuy 8y ago> Are you positive that all the rules in your component's CSS file only affect that component? Absolutely
- exogen 8y agoThanks for ignoring everything but the simplest case! No further questions. You've solved CSS.
- barryvan 8y ago
- satvikpendem 8y agoYou would like Vue's Single File Components, where HTML, JS, and CSS are all in one file. It's great.