CSS Prototypes, Variables, and Mixins

W3C Proposal, 12 March 2010

This Version:

http://oocss.org/specification.html

Latest Version:

http://oocss.org/specification.html

Revision:

Revision 1.0

Authors:

Nicole Sullivan

William Cook

Copyright © 2009-2010 Nicole Sullivan^®, All Rights Reserved.

Abstract

Status of the document

Quick table of contents

1. CSS Prototypes
2. CSS Variables
3. CSS Mixins
4. Grammar
5. Property Table
6. Aknowlegements

Full table of contents

Generate this

Grammar

OOCSS requires small changes to the CSS grammar (highlighted below).

stylesheet
  : [ CHARSET_SYM STRING ';' ]?
    [S|CDO|CDC]* [ import [ [CDO|CDC] [S|CDO|CDC] ]* ]*
    [ variables [S|CDO|CDC]* ]*
    [ [ ruleset | media | page ] [ [CDO|CDC] [S|CDO|CDC] ]* ]*
  ;
import
  : IMPORT_SYM S*
    [STRING|URI] S* [ medium [ COMMA S* medium]* ]? ';' S*
  ;
media
  : MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* ruleset* '}' S*
  ;
medium
  : IDENT S*
  ;
page
  : PAGE_SYM S* pseudo_page?
    LBRACE S* declaration? [ ';' S* declaration? ]* '}' S*
  ;
pseudo_page
  : ':' IDENT S*
  ;
operator
  : '/' S* | COMMA S*
  ;
combinator
  : PLUS S*
  | GREATER S*
  | S+
  ;
unary_operator
  : '-' | PLUS
  ;
property
  : IDENT S*
  ;
ruleset
  : selector [ COMMA S* selector ]*
    LBRACE S* declaration? [ ';' S* declaration? ]* '}' S*
  ;
selector
  : simple_selector [ combinator simple_selector ]*
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ]? ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*]? ')' ]
  ;
declaration
  : property ':' S* expr prio?
  ;
prio
  : IMPORTANT_SYM S*
  ;
expr
  : [ VARCALL | term ] [ operator [ VARCALL | term ] ]*
  ;
term
  : unary_operator?
    [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
      TIME S* | FREQ S* ]
  | STRING S* | IDENT S* | URI S* | hexcolor | function | simple_selector S*
  ;
function
  : FUNCTION S* expr ')' S*
  ;
/*
 * There is a constraint on the color that it must
 * have either 3 or 6 hex-digits (i.e., [0-9a-fA-F])
 * after the "#"; e.g., "#000" is OK, but "#abcd" is not.
 */
hexcolor
  : HASH S*
  ;
variables
  : VARIABLES_SYM S* medium [ COMMA S* medium ]* LBRACE S* variableset* '}' S*
  ;
variableset
  : LBRACE S* vardeclaration [ ';' S* vardeclaration ]* '}' S*
  ;
vardeclaration
  : varname ':' S* term
  ;
varname
  : IDENT S*
  ;

Property Table

Four properties are added to the properties table.

Acknowledgements

Inspiration for this document came from the W3C CSS Specifications, CSS Variables by Daniel Glazman (Disruptive Innovations) and David Hyatt (Apple, Inc.), CSS Constants by fantasai, Less CSS, Chris Eppstein, Compass, SASS, css-discuss, www-style, and the many many web developers clamoring for the tools they need to do their jobs well.

Thanks also to the many people who have provided feedback for this document in it's various incarnations, including; David Hyatt, Tom Croucher, Nicholas Zakas, Stoyan Stefanov, Eric Schurman, Douglas Crockford, Aaron Gustafson, Fred Sauer, Hugo Haas, Brad Neuberg, John Allsopp, Tom Hughes-Croucher, Chris Mills, Doug Schepers, Chris Blizzard, Boris Zbarsky, David Baron, and Peter-Paul Koch.