4 ms·
Even without Svelte, most of the problems people have with CSS go away if you do the following: - Avoid cascading (i.e. no nested selectors except when there's
by ravenstine 5y ago
Even without Svelte, most of the problems people have with CSS go away if you do the following:
- Avoid cascading (i.e. no nested selectors except when there's "no other way")
- Implement separate selectors for styling and page/component layout (separation of concerns)
- Using a good naming convention and stick with it
The first point can also be achieved with using style attributes if that floats your boat, although Svelte kind of gives you the best of both worlds just by compartmentalizing the CSS, not necessarily by preventing cascading.
I can't remember the last time I ever had to use !important except when I had to work with some ridiculous CSS "framework" my predecessors chose to use. At least !important was understandable back in the days when it was really hard to achieve some things with CSS, but these days I believe there's little to no excuse.
- bobbylarrybobby 5y agoPoints 1 and 2 sound a bit like CSS's new "layer" feature
- xiphias2 5y agoI believe that Svelte is so natural extension to the current web that - just like with CoffeeScript and ES6 - some of it should be adopted. Importing HTML files as modules with localized CSS+JS as web components would be one such option for example.
- deleted 5y ago[deleted]
- replygirl 5y agothis is called an html module: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/html-modules-explainer.md https://github.com/WICG/webcomponents/blob/gh-pages/proposal...
- xiphias2 5y agoThanks, it looks great. I'm happy that they didn't rush it. They don't talk much about compatibility with current web frameworks, I think they should. I really hope that it will be featureful enough to support being a target for compiling Svelte components (or even maybe React / Vue components) to HTML modules to be imported at some point, but still stay simple enough to be useful.
- reactor 5y agoMind telling a bit more on this second part "Implement separate selectors for styling and page/component layout (separation of concerns)"? Are you referring to classes (for styles) and probably id's for Javascript?
- adamauckland 5y agoLayout is the structure of the page, grids, master breakpoints etc. eg. .grid .row .column .banner Styling is setting colors/fonts/padding etc on a specific component. eg. .sign-up-form .delete-button .accept-button
- ratww 5y ago> I can't remember the last time I ever had to use !important except when I had to work with some ridiculous CSS "framework" my predecessors chose to use. At least !important was understandable back in the days when it was really hard to achieve some things with CSS, but these days I believe there's little to no excuse. Yep. I find of the usage of !important I see daily is failure of the programmer to understand precedence rules, which, as you pointed towards, is mostly due to cascading.