Hacker News Reader

Comment by deckiedan | Hacker News Reader

I think the specific problem of CSS & JS (rather than the more interesting 'separation of concerns' conversation) is partly due to CSS itself not being fully separatable.

It's used for style & design, but also for functionality. In some ways, ideally, function related CSS would be stored with the module, but site-level design CSS would be separate.

Additionally, CSS by design has greedy selectors. If I put in a:

   a { text-decoration: none; border-bottom: 1px solid pink;}

in my site.css, it will muck up any components which use an <a> tag, but don't specifically re-write the border.

Are there good solutions to this?

I kind of feel in some ways, with SPAs and web apps being a thing rather than simple pages, we need a new way of defining styling, which then compiles to CSS, figuring out the correct over-rides along the way.

View on HN

Some solutions to the greedy css selectors are how web components can limit scope to certain elements. Angular 2 has some level of emulation for this. CSS modules also tries to achieve something similar through scoped classnames.

> It's used for style & design, but also for functionality

So true.

I once searched days for a broken event handler in JavaScript, just to find out that somewhere deep inside a CSS file, someone disabled events for the element.

Didn't even know CSS had that power.

> inside a CSS file, someone disabled events for the element.

I never heard of that. I just looked up CSS pointer-events [0], is that what you're referring to or are there others?

[0] http://caniuse.com/#feat=pointer-events

Yes, this disabled the clicks on an element.

I really didn't know CSS could do that. http://caniuse.com/#search=css%20pointer-events for any one whose mind was blown by this.

The idea seems to be, that designers have more flexibility.

You can layer elements how you like and then, in the end, disable all the elements "in the front" of the element that you want to have "clickable".

Until one uses it, it might be hard to realize how incredibly useful it is. From both CSS and JS perspectives. I rarely use it simply because of older IE lacking support.

http://www.slideshare.net/stubbornella/object-oriented-css/2...

The first simple thing is to avoid element level selectors, stick to class names as much as possible. Another is to namespace your CSS.

Element level selectors are so often demonized and having written quite a bit of CSS in my life, I have come to appreciate how easy it is to write and maintain CSS when you actually use those element level selectors mixed with relationship selectors ( >, +, ~,) and attribute selectors.

I don't demonize them, I use them too. But if you rely on them too much then eventually it causes problems. Especially on a large project that grows over time in CSS and HTML.

Attribute selectors are indeed handy and are on par with class names in my suggestion.

Reply on news.ycombinator.com