I don't quite follow... are global styles the ones that the browser provides as standard, or styles applied to <html>/<body>, or something else again?
Regardless, the tone of the post reminds me of something I've done on a few occasions: writing entirely domain-specific XML, then styling it throughout with CSS into something presentable. It's a bit of a pain, and I'm sure it'd fail completely in older browsers, but it completely avoids the slightly-unpredictable nature of default styles.
Traditionally, we'll apply typographic styles to elements like strong, em, p, ul, h1, h2, h3 etc, in the global scope. We are adding these styles to the elements globally. We think to ourselves "we're using the cascade!" and wrongly thinking that we're saving lines of code in the long run.
So the argument is to only style individual blocks of text, instead of saying "All H1 elements everywhere on this page will have this style". His "copy" class removes all typographical styling, so whatever styles you apply to a block will work without having to remove e.g. bullets from a list manually every time. (edited)
I'm sorry but I can't continue to take your suggestion that "global typographic styles suck" when you advocate using:
.copy * { margin:0 0 $text-baseline 0; }
There is nothing wrong with correct use of cascading styles. If you are finding that you are constantly changing the styles, then you are doing it wrong and making poor choices in your inheritance/"super" selector.
(While, on the topic, you know that CSS selectors/rules are applied and read, from right to left. This is how the inheritance works. Using your "reset" would mean that you are slowing down the CSS rendering considerably by matching * wildcard, and then limiting the selector to only .copy elements. It's probably the biggestsingle anti-pattern in CSS. Don't do it.
I think you've missed the point. I'm not saying that using the cascade is bad, I'm saying that you need to have better control over it. Applying styles in the global scope gives you no control over it. When I say "global type styles" I'm referring to styles in the global scope, not cascaded styles.
You need to be able to separate your styles into layout and decoration for them to be re-usable. Anything in the global scope becomes a problem. It's the same as writing modular code in any other language.
Regarding the rendering speed, it has been proven multiple times that the performance impact of wildcard selectors is so unnoticeable it's not worth even worrying about at all.
When you build anything large enough that needs to be maintained and scaled by a team of people you need to limit to the cascading of styles or your stylesheets will grow out of control. So yes, the cascade can bite you in the ass and does suck unless you know how to control it.
The point seems to be that global styles don’t generally make sense for text because you’re frequently going to refine them to the point where few or no properties are common. That’s a reasonable assertion, and I agree that avoiding global styles for text generally makes stylesheets easier to manage, but like the author, I have no hard evidence to back this up.
5 comments
[ 6.7 ms ] story [ 197 ms ] threadRegardless, the tone of the post reminds me of something I've done on a few occasions: writing entirely domain-specific XML, then styling it throughout with CSS into something presentable. It's a bit of a pain, and I'm sure it'd fail completely in older browsers, but it completely avoids the slightly-unpredictable nature of default styles.
So the argument is to only style individual blocks of text, instead of saying "All H1 elements everywhere on this page will have this style". His "copy" class removes all typographical styling, so whatever styles you apply to a block will work without having to remove e.g. bullets from a list manually every time. (edited)
(While, on the topic, you know that CSS selectors/rules are applied and read, from right to left. This is how the inheritance works. Using your "reset" would mean that you are slowing down the CSS rendering considerably by matching * wildcard, and then limiting the selector to only .copy elements. It's probably the biggest single anti-pattern in CSS. Don't do it.
You need to be able to separate your styles into layout and decoration for them to be re-usable. Anything in the global scope becomes a problem. It's the same as writing modular code in any other language.
Regarding the rendering speed, it has been proven multiple times that the performance impact of wildcard selectors is so unnoticeable it's not worth even worrying about at all.
When you build anything large enough that needs to be maintained and scaled by a team of people you need to limit to the cascading of styles or your stylesheets will grow out of control. So yes, the cascade can bite you in the ass and does suck unless you know how to control it.