From Nicole's talk at JSConf.eu where she presented her wish list for the future of CSS. She presents a brand-new expanded syntax which allows for prototypes, mixins, and variables and explains how a preprocessor can be used today to achieve a richer language in older browsers.

1. WISH
CSS
LIST
WISH
wish wish wish wish wish wish wish

2. http://laughingsquid.com/css-is-awesome/

3. GOALS
❖ CSS is already awesome, but it can be even better!
❖ Make CSS a better declarative language
❖ Abstract repeating patterns in the code
❖ Do not make CSS a programming language

4. USABILITY
❖ CSS is already awesome, but it can be easier to author!
❖ Make CSS easier for newbies
❖ Improve performance by dramatically reducing the amount of
code
❖ Make the language more robust with more useful browser
warnings

5. VARIABLES
make global changes easier
Reference: CSS Variables,Glazman and Hyatt

6. DEFINE VARIABLES
variable group
@variables hex {
facebookBlue: #3b5998;
highlight: #FF9933;
}
variable name
@variables <var group name> { <var name>: <value> }

7. CALL VARIABLES
h2, h4, h6 {
/* call var */
color: hex.facebookBlue;
}
variable name
variable group
<var group name>.<var name>

8. PROTOTYPES
organize code into logical abstractions

9. EXAMPLE PROTOTYPE
mod
block
inner
hd
bd
ft
Example based on the standard module format from YUI

10. DEFINE PROTOTYPES
prototype
@prototype .mod {
margin: 10px;
}
@prototype <class name> { property: value; }

11. DEFINE PROTOTYPES
prototype
@prototype .mod {
margin: 10px;
children: b, .inner;
}
allowed nested children
@prototype <class name> { property: value; }

12. MODIFY PROTOTYPES
sub-node is a property
of the prototype
.mod .inner {
position: relative;
}
Inner becomes a property node of .mod

13. EXTEND PROTOTYPES
prototype
.weatherMod {
extends: .mod;
}
extends key
weather now has all the properties of mod,
including sub-nodes

14. EXTENDS - UNDER THE
HOOD
@prototype .mod,
.weatherMod{ ... }
.mod .inner,
.weatherMod .inner { ... }
.weatherMod { ... }
normal cascade order is respected

15. PROTOTYPE
ENCAPSULATION
.leftCol .inner { /* invalid */
color:red;
} sub-node is a property
of the prototype mod
inner belongs to mod and leftCol doesn't extend mod the
ruleset is invalid and should be ignored by the UA

16. MIXINS
combine small bits of repeating code

17. DEFINE MIXINS
@mixin .clearfix {
zoom:1;
}
mixin
@mixin <class name> { property: value; }

18. MODIFY MIXINS
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Any selector which references “.clearfix”
modifies the mixin

19. INCLUDING MIXINS
mixin
.line{
include: .clearfix;
}
include key
copies clearfix property value pairs to the
current location in the code

20. MIXINS - UNDER THE
HOOD
property value
.line {zoom:1;} pairs are copied
.line:after { from clearfix to
content: "."; line
display: block;
height: 0;
clear: both;
visibility: hidden;
}

21. USE MIXINS FOR SMALL
BITS OF REPEATING CODE
remove non-semantic classes from the html
like clearfix or rounded7px

22. MIXINS ARE NOT
CASCADED
Property value pairs are invoked as if they were declared at the
current location in the code.

23. PROTOTYPE SUB-NODES
define the relationship between
sub-nodes of the same prototype

24. SHOULD THIS BE POSSIBLE?
does it add enough value to justify the additional complexity?

25. I FOUND MYSELF WRITING
COMMENTS LIKE THESE
/*
margin top =
bottom height - corner height
*/
Values are predictable and easy to calculate because the
complexity lives in the abstraction.

26. SUB-NODES EXAMPLE
.flow .bottom {
height:4px;
margin-top:-4px;
} bottom corner
margin top = -
.flow .bl { height height
margin-top:-6px;
}
example from my open source project,
corner height is defined as 10px in the .mod prototype

27. SUB-NODE VALUE
CALCULATION
.mod .bottom {
height: 5px; calculation of margin based
} on defined values
.mod .bl {
height: 10px;
margin-top:
.bl.height - .bottom.height;
}
<subnode node class>.<css property>

28. SUB-NODES - UNDER THE
HOOD
❖ Use this syntax to define the relationship between the nodes
of an object
❖ Can only access nodes of the current object
❖ Can only access defined values (not computed style)
❖ Not intended to substitute for good flexible layout!

29. OUTCOMES
if the method and syntax are right,
the code should meet the stated goals

30. RESULTS ARE
PROMISING
In the parent node, if we
express these relationships,
the predictability of simple
skins can be improved
Reference: Gonzalo Cordero, Jenny Han Donnelly, Chris Klaiber

31. EASY PEASY
The complex bit is harder, but
the implementation of skins is dead simple.
.gonzalo {extends: .mod;}
.gonzalo,
.gonzalo .inner,
.gonzalo b {
background-
image:url(gonzaloModule.png);
}

32. EASY PEASY
The complex bit is harder, but
the implementation of skins is dead simple.
.gonzalo {extends: .mod;}
.gonzalo,
.gonzalo .inner,
.gonzalo b {
background-
image:url(gonzaloModule.png);
}
two rules to create
this rounded corner box

33. MUCH LESS CODE
easier to work with newbies

34. FLICKR PHOTO CREDITS
❖ Steampunk Gears, Needles, Rods 'n Such by Buz Carter

35. LET’S KEEP TALKING...
http://stubbornella.org
“stubbornella” on the web...
twitter, dopplr, slideshare, everywhere...
http://github.com/stubbornella/oocss/
http://groups.google.com/group/object-oriented-css

36. WISH
CSS
LIST
WISH
wish wish wish wish wish wish wish