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.
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>
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
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
Stephen talked yesterday about how the CSS working group seems to focus on special effects over real fundamental changes.
Special effects are great, but we need *more*.
The language needs better ways to express all the things i&#x2019;ve been talking about.
Example, YUI standard module format.
Imagine you could define a css class to be an prototype, a repeating pattern of code off which more specific objects could be built.
Important because, as we saw before, order matters.
Let&#x2019;s look at what the code is doing.
Is there another way to arrive at this magic number? To not need to do the calculation by hand in each specific instance of the object?
Let&#x2019;s look at what the code is doing.
Is there another way to arrive at this magic number? To not need to do the calculation by hand in each specific instance of the object?
Let&#x2019;s look at what the code is doing.
Is there another way to arrive at this magic number? To not need to do the calculation by hand in each specific instance of the object?
Stephen talked yesterday about how the CSS working group seems to focus on special effects over real fundamental changes.
Special effects are great, but we need *more*.
The language needs better ways to express all the things i&#x2019;ve been talking about.