ModularCSS project/idea

The problem Cascading Style Sheets are a maintainability nighmare: they badly scale for large/complex sites, they use magic values instead of constants (so double maintenance problem occurs, e.g. consistently changing trivial things like colours across the website), they don't relate to page structure.

References:

• http://www.glazman.org/weblog/dotclear/index.php?2004/12/14/746-calling-for-a-new-css-revolution which also notes other needs, notably offset positioning (e.g. "the right side of this element 3em plus 2px to the left of that element).
• http://lists.w3.org/Archives/Public/www-style/2002Aug/0379.html from where the multi-property idea (below) comes
• http://lists.w3.org/Archives/Public/www-style/2002Nov/0010.html from where macros (@define below) idea comes
• http://simon.incutio.com/archive/2003/07/22/featureRequest
• http://www.w3.org/TR/NOTE-CSS-potential List of suggested extensions to CSS

Proposed solution

Approach Apply standard good engineering practices to CSS design and syntax. Enable and define clear consistent mapping to CSS 2.1 syntax so automated conversion is possible. Keep it as simple as possible.

A few additional constructs to modularize the sheets:

• @param -- enable CSS to pick params from HTTP GET request
• @define -- define constants used in rules
• @region -- relate part of CSS to a block in HTML
• @if/@elsif/@else -- conditionally apply part of stylesheet
• multi-properties -- enable several properties before ":" in rules

one-line comments -- enable // comments in addition to / */

Details are listed below.

One-line comments

Allow C++ style comments "from here to end of line".

Example:

See the examples of other constructs below.

Mapping:

Clear -- remove "//", wrap comment in / / pair.

Multi-properties

Allow several properties to be listed in one rule.

Example:

  // hide text by color
  p.invisible {
    background, color: white;
  }

Mapping:

Clear: split into several rules with the same value for individual properties.

@param

Declares that the CSS expects an URI parameter. The parameter is then used as if it was defined via @define (see below). The default value must be defined for each parameter for cases when the stylesheet is not accessed by an URI.

Example:

 
  @param fg(black)    // parameter 'fg' with default value 'black'
  /* use: style.css?fg=red&bgcol=#d0d0d0 */

Mapping:

Replace param usage ($param) by the value.

@define and $value

Defines a constant token to use in rules. Token usage must not occur within the definition.

Example:

  @define textfont(Times New Roman, serif)
  // ILLEGAL:
  @define bodyfont(Garamond, $textfont)

  body {
    font-family: $textfont;   // here the constant's value is substituted
    font-size: small;
  }

Mapping:

Replace token usage ($name) by the value.

@region

Creates a scope in the CSS that is related to a named block in HTML. The name of the region is a CSS selector consisting only of "id" or "class" HTML element attributes. Inside the @region declaration, regular rules can be used -- their selectors then apply only within the named HTML block. Region declarations cannot be nested.

Example:

Assume the following HTML code:

<div id="menu">
  <ul>
  <li><a href="first">First option</a></li>
  <li><a href="second">2nd option</a></li>
  <li><a href="last">Last option</a></li>
  </ul>

  <ul class="admin">
  <li><a href="copy">Copyright</a></li>
  <li><a href="mailto:addr@domain.tld">Email us</a></li>
  </ul>
</div>

Then the following CSS can be defined:

@region #menu {

  background: silver;     // these apply to the #menu DIV
  color: black;
  font-size: small;

  ul { margin-left: 0; }  // scoped elements, as if #menu ul etc. selectors
  ul li { list-style: none; margin-left: 0; }
}

@region #menu .admin {
  li a, li a:visited { color: gray; }
}

Mapping:

Expand into a series of rules with the region name prepended to each selector.

@if blocks

Include part of stylesheet based on token value. Conditional blocks cannot be nested.

Possible extensions to this conditional are (1) use references to properties in condition (e.g. if (body.color = black) ... ) and (2) use regexp comparison in addition to the plain string equal/nonequal.

Example:

#footer {
  @if ($fg) {    // token "fg" is defined
    color: $fg;
  }
  @else {
    color: black;
  }
}

#page {
  background: white;
}
@if ($pgborder != none) {    // re-style also inner blocks if border is used
  #page { background: silver; border: $pgborder; }
  #page #menu { border: none; }
}

Mapping:

Include only that part of conditional sheet for which the condition holds.

Back to NametyPruzkumy (in Czech)