Re:CSS Variables in Firefox Nightly
by crazygringo on Sunday December 15, 2013 @12:28PM
(#6910050)
But this still isn't a complete solution -- if you want the same color as a "color" in one place, "background-color" in another, and "border-top-color" in another, you're still repeating yourself. Likewise if you want to do math with paddings/margins etc.
I don't know why, if you're using LESS or equivalent, you wouldn't use variables. It makes for vastly more maintainable CSS than the approach you take.
Arguably a more maintainable technique would be to use multiple classes and define, e.g. a "brand" class just for this color, so you can have a simpler standalone rule:
.brand {
color: #bada55;
}
While that's good practice, it's a challenge to get it right on a large legacy systems, so I still find variables useful in practice. Also, it's nice to be able to perform functions involving variables, e.g.
.brand {
color: lighten($link-color, 20%);
background: ($link-bg + $page-bg)/2;
}The long list of selectors can ba a problem too, IE 6-9 only supports up to 4095 selectors per style sheet (http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164...). However there are workarounds like @importing multiple style sheets.
Re:CSS Variables in Firefox Nightly
by prezjordan on Sunday December 15, 2013 @12:27PM
(#6910048)
Sometimes you want the color to match the border color. The properties are not always the same, which is what causes repeat.
Variables are also useful when you can do calculations on them.
Re:CSS Variables in Firefox Nightly
by cheapsteak on Monday December 16, 2013 @01:14AM
(#6913183)
SASS can give you the same result:
%red
color: #f00
%blue
color: #00f
header
@extend %red
div
@extend %blue
#foo
@extend %red
p
@extend %red
header, #foo, p {
color: #F00;
}
div {
color: #00F;
}
I have found with JS heavy frontends, simple solutions like this stop being effective quickly. I have about as many sass file as I do JS files in my project. Being able to use variables defined elsewhere in all those files is essential.
The way I ended up solving the CSS variables issue (i.e. replacing the same property/value combination in multiple locations) was to actually regroup selectors.
For example, I'd have:
The only annoying thing is that it can result in a long list of selectors (although I'd put them on one line anyway). But one thing I truly appreciate with this approach is that you can edit any value with your browser's inspector, and see it instantly update all instances at once. It's great to test out new colors for example.The other option would be to have a specific class that would apply this style. But then, you'd move the styling from the CSS to the HTML, and I've always tried to prevent myself from breaking this golden rule.