CSS Wish List @JSConf
•
48 likes•4,991 views
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.
Recommended
More Related Content
Viewers also liked
Similar to CSS Wish List @JSConf
Similar to CSS Wish List @JSConf (20)
More from Nicole Sullivan
Recently uploaded
Recently uploaded (20)
CSS Wish List @JSConf
- 1. WISH CSS LIST WISH wish wish wish wish wish wish wish
- 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
Editor's Notes
- 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.