CSS Wish List @JSConf

28,082 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
1 Comment
50 Likes
Statistics
Notes
  • I like it=)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
28,082
On SlideShare
0
From Embeds
0
Number of Embeds
19,633
Actions
Shares
0
Downloads
0
Comments
1
Likes
50
Embeds 0
No embeds

No notes for slide
  • 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’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’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’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’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’ve been talking about.
  • 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

    ×