A much-wanted feature in future versions of CSS is to be able to use alternative and smarter shortcuts to shorten CSS code. Some of these are already being implemented in alternative CSS languages, but the new CSS 3 has no sign of this. With greater support, perhaps basic CSS could become smart enough to handle these shortcuts in another 10 or so years, when CSS 4 is introduced.
To see the benefit anyway, let’s look at a few examples in which smarter shortcuts would be beneficial.
When many elements from a certain class or ID share the same properties, things can get a bit repetitious:
- #navigation h1, #navigation h2, #navigation h3{
- font-family: Verdana, Tahoma, sans-serif;
- letter-spacing: -1px;
- }
Smarter syntax would tighten things up, saving both time and space in the style sheet:
- #navigation [h1,h2,h3]{
- font-family: Verdana, Tahoma, sans-serif;
- letter-spacing: -1px;
- }
As most of us know, styling links in CSS can be a huge hassle. Nesting these elements, as shown above, is a great solution, but a smarter syntax for dealing with pseudo-classes would also be good:
- a:link, a:active, a:visited
- {
- font: bold 10pt Verdana, Tahoma, sans-serif;
- color: #444444;
- }
- a:hover
- {
- color:#000;
- }
- #navigation a:link, #navigation a:visited,
- {
- font: normal 10pt Verdana, Tahoma, sans-serif;
- color: #000;
- }
- #navigation a:active, #navigation a:hover
- {
- font-size: 14pt;
- }
Having all these pseudo-classes in the way is rather inefficient. Grouping them would be much smarter:
- a[:link, :active, :visited] {
- font: bold 10pt Verdana, Tahoma, sans-serif;
- color: #444444;
- }
- a:hover{ color:#000; }
- #navigation a[:link, :visited] {
- font: normal 10pt Verdana, Tahoma, sans-serif;
- color: #000;
- }
- #navigation a[:active, :hover] {
- font-size: 14pt;
- }
While the solution in the example above saves only a little space, that extra space can do wonders in a larger style sheet. And most will agree that this is a much easier way to read and understand style sheets.
The general goal for any situation like this is to be able to share elements, pseudo-classes and any other type of extension with o one declared class or ID, rather than repeating the class or ID name repeatedly.
(+2)
