working around with specificity and autoprefixer
chiefjester opened this issue · comments
How do we work around with the specificity problem if we are declaring styles inline? 1.0.0.0?
One common use case is if you want to reuse a component and just change it slightly, like more padding or with different color? If you duplicate that component then you are not using the DRY principle.
Another question is about leveraging the power of autoprefixer which you can hook up with caniuse service and figure out what property should have prefix, special usecase is flex.
Last question is how to circumvent repetitions of styles if we're doing inline styles. Say instead of reusing classes, now we're reusing a lot of inline styles?
I would also like to note that yahoo has a quite different approach and was comparing it against inline styles. They call it Atomic CSS. http://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/
cc @vjeux
Specificity is a way of prioritizing rulesets that apply to the same element (mostly based on the selector)—for example "#blah" had a greater specificity than ".blah". With inline styles, there's only one ruleset and it doesn't use selectors so specificity doesn't come into play. If you want to combine style rules written as JavaScript objects, you can just combine them as you would any other JS objects; for example with Object.assign, xtend, etc.
Similar logic applies to reusing styles. There's no need to repeat anything since you have the full expressive power of JavaScript at your disposal. If you have styles you want to reuse, you can do that the same way you reuse any JS—by breaking them out into their own module and importing it wherever it's needed.
Beautifully simple!
@matthewwithanm
Thank you for the reply about object.assign and extend. However I just wanted to clear something. What I meant by reusability, say if you have 2 properties:
color: red; font-size: 15px; text-align: left; padding: 20pxon a class based approach you would just need to apply a classname for all instances of the component:
className="your-class"
However if you use inline styles, you would literally repeat all those 4 properties per component instance on the page. Hence I mentioned about the DRY principle.
If you break those styles into module, yes you're not repeating yourself and just doing a require on each style. However, how is that different from using a mixin of a css preprocessor? The net effect is you have duplicate styles being passed per DOM node.
<component style="color: red; font-size: 15px; text-align: left; padding: 20px"></component>
<component style="color: red; font-size: 15px; text-align: left; padding: 20px"></component>
...
<component style="color: red; font-size: 15px; text-align: left; padding: 20px"></component>
Ah, I see. DRY is usually used to refer to duplication in the developer-written source code—not the compiled output—but I see what you're getting at now.
Yeah, if you do inline styles, you could wind up with duplication of styles in the HTML. This may not be as big of a deal as it first seems (gzip is pretty good about compressing away that kind of duplication), but there are also tools like react-style-webpack-plugin which will generate CSS with unique class names automatically for each ruleset.
@matthewwithanm very interesting, so instead of inline styles, I'm gonna make pseudo classes in js? Also what of the auto prefixer, any ideas how is that implemented in this style?
Well they aren't pseudoclasses, but yeah. You still write them "inline"; the generation of classes is just a behind-the-scenes optimization—an implementation detail of the compilation.
As for autoprefixer, there are a few ways it could be done. One is to just have a JS function that prefixes styles and pass your style objects to that. Another is to use the webpack autoprefixer loader, though this wouldn't work for styles that were actually inline in the compiled output (e.g. styles that had to be computed at run time).
Have you checked out the #reactjs channel on freenode? There are a lot of people there (including the ones that work on react-style) who could probably answer all your questions in realtime.
React Style will add auto prefix functionality at some point of time, and it will work for inline styles + compile to css. Currently focusing on media queries though.
(btw. I'm sspi on irc)