Hacker News Reader

Comment by lmm | Hacker News Reader

I've been saying for years that CSS is more trouble than it's worth if you're not writing your pages by hand. If I know that this element is an address field, I can style it like an address field, then and there. (Maybe optimize by using a uniquely-named class, or maybe not - pages are sent gzipped, that may well be good enough). Reusable, self-contained components are a great idea - but to be truly self-contained they need to include their styling.

View on HN

You can do this with Vue.js - https://github.com/vuejs/vueify. And it includes scoped encapsulation.

Makes things so easy that it feels like cheating.

This is the idea behind the new-ish "shadow dom" feature that is slowly being implemented by browsers. (Part of the larger "web components" concept that will hopefully become a thing at some point).

In the meantime... with some discipline you can keep things self-contained just by using unique classes for each component (like what BEM and other similar naming conventions espouse). Could also look into CSS linters to keep you and your team honest.

> will hopefully become a thing at some point.

I replied to the parent comment here - https://news.ycombinator.com/item?id=12308352. You might find it useful.

Thanks for the pointer. I'm actually a big fan of Vue.js and use it in several product sites/apps. However, if one is just wanting some componentization/isolation in their CSS and not actually building a javascript app, then it's kind of overkill. Also, while it does allow you to keep your component code in different files, by the time the browser is using your CSS it's still all in one big "global namespace" (so to speak), so you still need to enforce some discipline on your css class names, even if they're in different files. (Or perhaps I'm wrong about this and vueify modifies your classes or selectors or something to avoid this?)

Sure, this is more for cases where you want to create reusable components. Which, if you work on multiple projects, might be often.

Yep, it renames them - https://github.com/vuejs/vueify#scoped-css

Reply on news.ycombinator.com