[CSS3 general Grammar]

Hi Friends!

I have a concern about the whole grammar for the CSS3. Nowadays smarter and faster ways to accomplish best results are a must. Since a long time ago many developers around the world have been developing template languages to handle CSS files wrinting less code and doing more. Well, a week ago a friend of my at work just shown me this: http://lesscss.org/. I'm not at all involved with this project, but I got really impressed because practically all of my best ideas (among some more) for a better CSS maintainability were implemented in this project for Ruby and Rails. I think it would be great if CSS itself worked just like this.

The possibility of include at least part of the proposed "variables, mixins, operations and nested rules" of the "lesscss" project in a future specification. Let me show you how I think the CSS grammar in general should work [taken from http://lesscss.org/docs.html]:


Variables
=========
These are pretty self-explanatory:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

Outputs:

#header { color: #6c94be; }

Note that variables are actually 'constants' in that they can only be defined once.


Mixins
======
Mixins are a way of including ('mixing in') a bunch of properties from one rule-set into another rule-set. So say we have the following class:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

And we want to use these properties inside other rule-sets. Well, we just have to drop in the name of the class where we want the properties, like so:

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

The properties of the .bordered class will now appear in both #menu a and .post a. (Note that you can also use #ids as mixins)


Nested rules
============
Ability to use nesting instead of, or in combination with cascading. Lets say we have the following CSS:

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
#header .logo:hover {
  text-decoration: none;
}

We could also write it this way:

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    :hover { text-decoration: none }
  }
}

The resulting code is more concise, and mimics the structure of your html.


Operations
==========
Any number, color or variable can be operated on. Here are a couple of examples:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

The output is pretty much what you expect - CSS understands the difference between colors and units. If a unit is used in an operation, like in:

@var: 1px + 5;

CSS will use that unit for the final output-6px in this case.


Namespaces & Accessors
======================
Sometimes, you may want to group your variables or mixins, for organizational purposes, or just to offer some encapsulation. You can do this pretty intuitively in CSS - say you want to bundle some mixins and variables under #bundle, for later re-use, or for distributing:

#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    :hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

Now if we want to mixin the .button class in our #header a, we can do:

#header a {
  color: orange;
  #bundle > .button;
}

CSS also allows you to access specific properties or variables from different rule-sets:

#defaults {
  @width: 960px;
  @color: black;
}

.article { color: #294366; }

.comment {
  width: #defaults[@width];
  color: .article['color'];
}

Variables and accessors can be used almost interchangeably, use whichever is best suited for the situation-accessors might make more sense if that property only needs to be accessed once.


Scope
=====
Scope in CSS is very similar to that of programming languages. Variables and mixins are first looked for locally, and if they aren't found, the compiler will look in the parent scope, and so on. Note that the order of declaration does matter.

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

Comments
========
Both C-style and inline comments are authorized:

/* One hell of a comment */
@var: red;

// Get in line!
@var: white;



So, what are your thoughts on it?

Cheers!
Gerson.

AVISO: A informa??o contida neste e-mail, bem como em qualquer de seus anexos, ? CONFIDENCIAL e destinada ao uso exclusivo do(s) destinat?rio(s) acima referido(s), podendo conter informa??es sigilosas e/ou legalmente protegidas. Caso voc? n?o seja o destinat?rio desta mensagem, informamos que qualquer divulga??o, distribui??o ou c?pia deste e-mail e/ou de qualquer de seus anexos ? absolutamente proibida. Solicitamos que o remetente seja comunicado imediatamente, respondendo esta mensagem, e que o original desta mensagem e de seus anexos, bem como toda e qualquer c?pia e/ou impress?o realizada a partir destes, sejam permanentemente apagados e/ou destru?dos. Informa??es adicionais sobre nossa empresa podem ser obtidas no site http://sobre.uol.com.br/.

NOTICE: The information contained in this e-mail and any attachments thereto is CONFIDENTIAL and is intended only for use by the recipient named herein and may contain legally privileged and/or secret information.
If you are not the e-mail?s intended recipient, you are hereby notified that any dissemination, distribution or copy of this e-mail, and/or any attachments thereto, is strictly prohibited. Please immediately notify the sender replying to the above mentioned e-mail address, and permanently delete and/or destroy the original and any copy of this e-mail and/or its attachments, as well as any printout thereof. Additional information about our company may be obtained through the site http://www.uol.com.br/ir/.

Received on Wednesday, 3 March 2010 23:24:33 UTC