Menu
Possible Duplicate:
Avoiding repeated constants in CSS
We have some "theme colors" that are reused in our CSS sheet.
Is there a way to set a variable and then reuse it?
E.g.
.css OurColor: Blue H1 { color:OurColor; } 
900
To declare a variable in CSS, come up with a name for the variable, then append two hyphens (–) as the prefix. The element here refers to any valid HTML element that has access to this CSS file. The variable name is bg-color , and two hyphens are appended.
CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries. A good way to use CSS variables is when it comes to the colors of your design.
Using CSS variables doesn't require any significant changes in existing stylesheets or new tools and can be easily applied to old projects. Instead of having a hex color code written down in hundreds of places in a file, you can have it defined in just one place – with a CSS variable.
There's no requirement that all styles for a selector reside in a single rule, and a single rule can apply to multiple selectors... so flip it around:
/* Theme color: text */ H1, P, TABLE, UL { color: blue; } /* Theme color: emphasis */ B, I, STRONG, EM { color: #00006F; } /* ... */ /* Theme font: header */ H1, H2, H3, H4, H5, H6 { font-family: Comic Sans MS; } /* ... */ /* H1-specific styles */ H1 { font-size: 2em; margin-bottom: 1em; } This way, you avoid repeating styles that are conceptually the same, while also making it clear which parts of the document they affect.
Note the emphasis on "conceptually" in that last sentence... This just came up in the comments, so I'm gonna expand on it a bit, since I've seen people making this same mistake over and over again for years - predating even the existence of CSS: two attributes sharing the same value does not necessarily mean they represent the same concept. The sky may appear red in the evening, and so do tomatoes - but the sky and the tomato are not red for the same reason, and their colors will vary over time independently. By the same token, just because you happen to have two elements in your stylesheet that are given the same color, or size or positioning does not mean they will always share these values. A naive designer who uses grouping (as described here) or a variable processor such as SASS or LESS to avoid value repetition risks making future changes to styling incredibly error-prone; always focus on the contextual meaning of styles when looking to reduce repetition, ignoring their current values.
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
