Reasonable System for CSS Stylesheet Structure

Re:Reasonable System for CSS Stylesheet Structure by MatekCopatek on Tuesday November 03, 2015 @11:48AM (#10500738)

I always feel like these naming conventions are just one big workaround for the pain of a global namespace. We should tackle it with tools like CSS Modules[0], not with something as flimsy and error-prone as a naming convention.

[0] https://github.com/css-modules/css-modules

[ Parent | on HN ]

Re:Reasonable System for CSS Stylesheet Structure by bpatrianakos on Tuesday November 03, 2015 @03:16PM (#10502285)

CSS is not a programming language. You can't think about it the same way you'd think about your backend code or even client side JS. The global namespace is by design. It's a feature, not a bug. The whole point is to think about the Cascade. You go from vague to specific and that way you have entire classes of elements with base styles and specific components have additional styles attached.

CSS modules is a cool idea but I don't think there's anything wrong with CSS as it stands today. When you work in any language you need to understand and work with the language you have and I think that a lot of criticism of CSS boils down to "CSS doesn't work like this other language/paradigm I know and like".

[ Parent | on HN ]

Re:Reasonable System for CSS Stylesheet Structure by MatekCopatek on Tuesday November 03, 2015 @05:58PM (#10503354)

I humbly disagree.

No, CSS isn't a programming language, but that doesn't mean it can't use functionalities that are typical of programming languages - just look at variables, functions, arrays, maps and other features that preprocessors like SASS have brought us.

While some approaches are a matter of taste/habit, I think there's an extremely wide consensus that having everything available in global scope is bad.

If the global namespace really is by design, then why are we adopting conventions (such as the one in this very topic) that mostly aim to defeat it? Prefixing class names to apply them only to a specific component is nothing but a primitive way of limiting scope.

[ Parent | on HN ]

Re:Reasonable System for CSS Stylesheet Structure by Zikes on Tuesday November 03, 2015 @01:33PM (#10501520)

Shadow DOM[0] is a big step in the right direction, as well.

[0] https://w3c.github.io/webcomponents/spec/shadow/

[ Parent | on HN ]

Re:Reasonable System for CSS Stylesheet Structure by octref on Tuesday November 03, 2015 @01:41PM (#10501575)

In another comment[0] I also mentioned using Shadow DOM for modularizing CSS. However I got a comment "Shadow DOM is not the solution for CSS isolation for components." and the commenter referred me to css-modules.

I'm wondering what's the merit/advantages of using css-modules over using Shadow DOM to limit the scope of CSS rules.

[0]: https://news.ycombinator.com/item?id=10453076

[ Parent | on HN ]

Re:Reasonable System for CSS Stylesheet Structure by Zikes on Tuesday November 03, 2015 @01:54PM (#10501666)

Shadow DOM enforces CSS isolation incidentally, but is also part of the larger "web components" plan, which would also incorporate CSS modules.

In these cases you would fully encapsulate CSS, HTML, and JS on a per-component basis.

[ Parent | on HN ]