In Svelte, you can write styles in a
<style> tag within a
.svelte component. The Svelte compiler will add specific classes to scope styles to that component.
In Vue, you can add an attribute called
scoped to a
<style scoped> within an SFC (single file component) enables similar behaviour where the CSS is scoped to that component only.
In Angular, you can write CSS in the context of a component, referencing the stylesheet in the component constructor. Angular provides a specific
:host selector which refers back to the component iself.
I find that this behavior works great for small demos and small projects. You can write CSS directly within the context of the component and automatically scope component styles. This is quick and works well, and it typically leads to fewer of the typical CSS problems where one style is overriding another.
You can code without having to worry about an overall CSS architecture (like BEM/ITCSS for example). Your code is right in the spot where you are probably editing. There are clear benefits to this approach.
However, I believe that for a project of a respectable size there are still good reasons to maintain a separate CSS architecture:
There’s so much change in tech. It seems like every year there’s something new. But the expected HTML and CSS doesn’t really change that much. If you make sure your CSS is separate from your JS logic, your styles will be more portable, and you don’t run the risk of having to rewrite your CSS over and over.
So, in conclusion, before you go all-in on scoped styling, consider the portability of your code.
Your email address will not be published. Required fields are marked *