3 ms·
I've gone back and forth on this with a previous coworker before. My opinion on it now is: there's two common general ways to use css. One way is as a style cl
by gravity13 11y ago
I've gone back and forth on this with a previous coworker before.
My opinion on it now is: there's two common general ways to use css. One way is as a style class, which is something you'd apply in multiple places around your project (like `.error` setting font colors to red, for example). The other way is to markup specific content so that you can apply specific styles to it - for instance, pixel pushing a header to fit exactly where you think it should in this one instance (perhaps to align an upvote button with a username, or something).
The latter way really seems to just markup dom nodes purely for the sake of identifying them within their structure (I might use BEM or rscss especially for these).
The way I structure my css in projects follows from this - I extract common styles and pepper them throughout my app where needed (but they are never referenced in any js/$ selectors). These are intended to cascade.
And then I will scope my more specific css under a selector (using sass, or cssnext or whatever) to avoid polluting the global scope:
.some-view {
.header { ... }
.note { ... }
.icon { ... }
}
In the case of these nested selectors, they are more identifying tags for the content of the node, than they are declarations of a specific style. These are not intended to cascade.
So even though css classes "exist for styling purposes" I think they have two paradigms for use. One for marking up content for a general application of a style and another for marking a node to be given special treatment.
And taking that approach, I argue it's fair to use the same selectors for js as well as css.
Besides, in practice, you're going to realize you're just adding the same class name appended with `js-` everywhere `<div class='error error-box js-error-box'></div>` when you're using that `error-box` really only to mark the node for use.
Though I'd be curious to hear more about why you think this:
>Using CSS classes for both style and data binding would result in a maintenance nightmare, IMO.
- nilliams 11y agoIf you always use something like 'data-bind' for binding and keep classes solely for CSS it's easier to maintain simply because you know 'what classes you can delete' without having to look in two places (CSS and JS) to see what will be affected as a result.