Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Wish List @JSConf

28,502 views

Published on

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.

Published in: Technology, Education
  • I like it=)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

CSS Wish List @JSConf

  1. 1. WISH CSS LIST WISH wish wish wish wish wish wish wish
  2. 2. http://laughingsquid.com/css-is-awesome/
  3. 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. 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. 5. VARIABLES make global changes easier Reference: CSS Variables,Glazman and Hyatt
  6. 6. DEFINE VARIABLES variable group @variables hex { facebookBlue: #3b5998; highlight: #FF9933; } variable name @variables <var group name> { <var name>: <value> }
  7. 7. CALL VARIABLES h2, h4, h6 { /* call var */ color: hex.facebookBlue; } variable name variable group <var group name>.<var name>
  8. 8. PROTOTYPES organize code into logical abstractions
  9. 9. EXAMPLE PROTOTYPE mod block inner hd bd ft Example based on the standard module format from YUI
  10. 10. DEFINE PROTOTYPES prototype @prototype .mod { margin: 10px; } @prototype <class name> { property: value; }
  11. 11. DEFINE PROTOTYPES prototype @prototype .mod { margin: 10px; children: b, .inner; } allowed nested children @prototype <class name> { property: value; }
  12. 12. MODIFY PROTOTYPES sub-node is a property of the prototype .mod .inner { position: relative; } Inner becomes a property node of .mod
  13. 13. EXTEND PROTOTYPES prototype .weatherMod { extends: .mod; } extends key weather now has all the properties of mod, including sub-nodes
  14. 14. EXTENDS - UNDER THE HOOD @prototype .mod, .weatherMod{ ... } .mod .inner, .weatherMod .inner { ... } .weatherMod { ... } normal cascade order is respected
  15. 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. 16. MIXINS combine small bits of repeating code
  17. 17. DEFINE MIXINS @mixin .clearfix { zoom:1; } mixin @mixin <class name> { property: value; }
  18. 18. MODIFY MIXINS .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } Any selector which references “.clearfix” modifies the mixin
  19. 19. INCLUDING MIXINS mixin .line{ include: .clearfix; } include key copies clearfix property value pairs to the current location in the code
  20. 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. 21. USE MIXINS FOR SMALL BITS OF REPEATING CODE remove non-semantic classes from the html like clearfix or rounded7px
  22. 22. MIXINS ARE NOT CASCADED Property value pairs are invoked as if they were declared at the current location in the code.
  23. 23. PROTOTYPE SUB-NODES define the relationship between sub-nodes of the same prototype
  24. 24. SHOULD THIS BE POSSIBLE? does it add enough value to justify the additional complexity?
  25. 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. 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. 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. 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. 29. OUTCOMES if the method and syntax are right, the code should meet the stated goals
  30. 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. 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. 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. 33. MUCH LESS CODE easier to work with newbies
  34. 34. FLICKR PHOTO CREDITS ❖ Steampunk Gears, Needles, Rods 'n Such by Buz Carter
  35. 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. 36. WISH CSS LIST WISH wish wish wish wish wish wish wish

×