What I’m missing in CSS [příspěvek v archivu]

In fact, there is only one thing I'm missing in CSS. But I miss it virtually every day: a kind of reusable parameters. What does it mean? Very often, I create a large stylesheets for a large project. A color palette is given and color codes are repeated many times through the stylesheet. It would be very nice to be able to predefine those colors as parameters (or user-defined keywords) at the beginning of the stylesheet, and then only use these symbolic values. Something like this (the syntax doesn't matter now):

@define {
   baseText: #003366;
   canvas: #f0f0f0;
   }

body {
   color: @baseText;
   background: @canvas;
   }
a:hover {
   color: @canvas;
   background: @baseText;
   }

If I need to replace a color in whole CSS, I could only edit one value in the @define section. If I want to change the color palette of the web site at once, I could edit only these predefined values.

Or, why use it for colors only? These substitutions could be useful in many ways.

@define {
   textColor: #003366;
   emphColor: #660000;
   canvasColor: #f0f0f0;
   baseFont: "palatino linotype", palatino, serif;
   titleFont: "Helvetica Narrow Black", Impact, Techno, sans-serif;
   stdPadding: 0.2em 2em 0.3em 1em;
   }
@define {
   stdBorder: 1px solid @textColor;
   }

body {
   color: @textColor;
   background: @canvasColor;
   font: 1em/1.67 @baseFont;
   }
h1 {
   color: @emphColor;
   font: 250%/1 @titleFont;
   }
.box {
   padding: @stdPadding;
   border: @stdBorder;
   }

Something like this would be very helpful in CSS 3.

Note: I'm sorry for this english spot on a non-english blog. I have no better place for it now. Comments in english only, please (if one is able to publish a comment through a Czech form).

Petr Staníček, 18. 1. 2008 000 11.53 • Rubrika: IT, Webdesign • 15 komentářů u textu s názvem What I’m missing in CSS

15 komentářů k článku »What I’m missing in CSS«

[1] Vložil(a): Radek 18. 1. 2008 v 12.20

Obviously, there exist some (at least academic) attempts to solve this problem:
http://www.fit.vutbr.cz/…DP/BP.php.cs?…

Unfortunately, the work is not authorized for publishing but contacting the supervisor might be useful if you are interested.

Anyway, wouldn't be class inheritance more powerfull solution? It has been discussed for quite long time. E.g.:

.normalText {
color: black;
font-weight: normal;
}

.importantText {
@inherit .normalText
font-weight: bold;
}

[2] Vložil(a): dgx 18. 1. 2008 v 12.31

This can be solved by some kind of preprocesor. But I am missing in CSS one thing, which cannot be solved anyway. It is „backtracking“ in selectors:

ul [li] p.message {
border: 1px solid black;
}

…and Border is applied to LI instead to P.

Something like XPath would be very helpful in CSS 3 ;)

[3] Vložil(a): Pixy 18. 1. 2008 v 14.11

[2] dgx, that's the obvious „missing parent selector“ problem, as mentioned also here (which article is the reason for this blogspot). And, as Bruce notes, there is an implementation problem with it.

Anyway, yes, it can be kind of solved by a preprocessing. I'm planinng to use a server-side-scripted CSS in my next projects – like „style.aspx“ with a palette definition and variable color codes. It will work so, but it's very unfriendly solution. You can't work and test offline, you can't use CSS editors etc. Beeing it right in CSS, it'd be much better.

[1] Radek, class inheritance is also an interesting idea, but it's something different. And, additionally, you can solve it in CSS2 by multiple selectors and cascade override:

.normalText, .importantText {
color: black;
font-weight: normal;
}
.importantText {
font-weight: bold;
}

is exactly the same definition.

[4] Vložil(a): papi 18. 1. 2008 v 14.20

Yes, you can use a preprocesor. On the other side, you can comment your stylesheet and if you want to change some kind of color (text, background,…) you can use a „change function“ in your text editor. For example:

.class {
color: #000000; /* Text-color */
}

In this stylesheet, where you comment colors of text as a „Text-color“, you can change string „#000000; /* Text-color /“ to „#ffffff; / Text-color */“. Many text-editor have function to change string in all document.

[5] Vložil(a): Littlemaple 18. 1. 2008 v 14.49

And sth like this would be nice too:

/* constants */
@define {
   leftColWidth: 200px;
   rightColWidth: 400px;
   somethingElse: 5px;
   }

/* layout */
#leftCol {
   width: @leftColWidth;
   ...
   }
#rightCol {
   width: @rightColWidth;
   margin-left: @leftColWidth;
   ...
   }
#sthWeird {
   position: absolute;
   left: @leftColWidth + @somethingElse;
   ...
   }

:)

[6] Vložil(a): Pixy 18. 1. 2008 v 14.54

[5] Yes. Anyway, expressions are already a part of the CSS3 draft.

[7] Vložil(a): kahi 18. 1. 2008 v 17.04

I agree with your suggestion, pixy. In my mind, there is a similar idea – variables do not represent values but attribute-value pair ev. multiple definitions (this is maybe closer to the inheritance conception [1]). But also I'm not able to evaluate practical side of each approach.

[8] Vložil(a): rarous 18. 1. 2008 v 21.39

Something like that will be nice, but using @ for variables reference is imho fail.

I'm preparing asp.net preprocessor for something like this:

/* definition */
@var $company-blue: #2465B7;
@var $company-green: #A0B424;

a{color:$company-blue;}
a:hover{color:$company-green;}

/* other rules… */

It will be mor powerful with preprocessor conditions like @if IE6 { ... }.

:)

[9] Vložil(a): Pixy 18. 1. 2008 v 22.09

[8] I don't think so. I consider the @-notation correct, for the @-prefix are not used yet in property values, as well as consistent, because the „@“ is typical operator used in CSS (unlike the dollar symbol). In fact, the CSS grammar allows @-keywords as the valid property value (but it's not used yet, AFAIK).

However, the syntax really doesn't matter, the principle is important. I don't care, if other syntax is used to allow predefined constants or variable values in CSS, I also would be satisfied.

[10] Vložil(a): tiso 18. 1. 2008 v 23.00

And why not (before CSS3 and browsers support for CSS3) this way:

/source stylesheet:/
body {
color: #bad001;
background: #bad002;
}
a:hover {
color: #bad002;
background: #bad001;
 }

/source replacements:/
#bad001 #003366
#bad002 #f0f0f0

…and from source stylesheet and source replacements generate (once) output → live stylesheet for web… And #badxxx values must not by just colors, it can by any posible values for property. Or more: snippet of CSS code – something like class definition in CSS (not in (X)HTML), …

Ak sú tam chyby tak sorry, ale angličtinu zvládam čítať, s písaním je to už horšie… Išlo mi o myšlienku.

[11] Vložil(a): dusoft 19. 1. 2008 v 13.11

If anybody is interested in my CSS Alias Concept from around 2003, just go to:
http://www.mezzoblue.com/…ss_optimiza/#…

I know that saving of bandwidth is not that important as it used to be, but aliases could be applied to make the working with long CSS files easy for users.

[12] Vložil(a): Komanc 19. 1. 2008 v 13.33

If you are using PSPad editor, you can try this script http://temp.bulant.cz/…essingCSS.js (copy this script to directory in /PSPad/Script/JScrip­t). After start (click in Skript menu or press CTRL+SHIFT+AL­T+A hotkey) action will be create new file in directory with original „template“ file.
It coming-out from syntax this article. But I programmed it only for fun. No warranty :)

[13] Vložil(a): Pixy 19. 1. 2008 v 20.41

[11] No, I'm not using PSPad. Every programmer, even the beginner, can program a simple program or script for that easy replacements. But it doesn't solve the problem. How would you use it in large projects, how would you edit and adjust CSS with it in large stylesheet containing hundreds selectors, how would you apply it within a production teams? There are thousands options for a „workaround“ of this, but only the native implementation into CSS can really solve it.

Additionally, imagine, when will be CSS3 available for public and how could look out the internet in the future. Reusable APIs, predefined templates, a need for easily adjustable CSS skins, variable color palettes with single layout etc. is what we can meet even today…

[14] Vložil(a): Onecar 19. 1. 2008 v 23.11

[6] Are you serious? Something like that would be the greatest thing in CSS3 for me, hope it happens :-).

[15] Vložil(a): Pixy 20. 1. 2008 v 12.25

[13] See the calc() function in the CSS3 draft

Váš komentář

Upozornění: Pokud vás téma tohoto příspěvku nezajímá, nebaví, dotýká se vás či vás dokonce uráží, tak prosím odejděte a pokud možno se nadále ve vlastním zájmu dalším podobným vyhýbejte. Hlavně se to prosím nesnažte autorovi sdělovat v komentářích, takové příspěvky nikoho nezajímají a budou nejspíš vymazány. Totéž platí pro vaše názory na osobu autora, na jiné přispěvatele, mluvení z cesty, ze spaní či pod vlivem omamných látek a další podobné výlevy nesouvisející s tématem článku. Jinými slovy, toto je prostor soukromého blogu určený pro komentování příspěvku publikovaného výše, nikoli k chatování a volné diskusi. Děkuji za pochopení.

Abyste mohli komentovat, musíte se přihlásit.