SlideShare a Scribd company logo
1 of 36
WISH
                    CSS


                                 LIST
 WISH
wish wish wish wish wish wish wish
http://laughingsquid.com/css-is-awesome/
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
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
VARIABLES
                                       make global changes easier




Reference: CSS Variables,Glazman and Hyatt
DEFINE VARIABLES
                                variable group


  @variables hex {
  
 facebookBlue: #3b5998;
  
 highlight: #FF9933;
  }
                   variable name


@variables <var group name> { <var name>: <value> }
CALL VARIABLES

  h2, h4, h6 {
  
 /* call var */
  
 color: hex.facebookBlue;
  }
                              variable name
variable group


      <var group name>.<var name>
PROTOTYPES
organize code into logical abstractions
EXAMPLE PROTOTYPE
                 mod
               block
                  inner
                          hd




                          bd




                          ft


Example based on the standard module format from YUI
DEFINE PROTOTYPES
                             prototype


  @prototype .mod {
  
 margin: 10px;
  
  }




@prototype <class name> { property: value; }
DEFINE PROTOTYPES
                             prototype


  @prototype .mod {
  
 margin: 10px;
  
 children: b, .inner;
  }
              allowed nested children


@prototype <class name> { property: value; }
MODIFY PROTOTYPES
                  sub-node is a property
                  of the prototype
.mod .inner {

 position: relative;
}




Inner becomes a property node of .mod
EXTEND PROTOTYPES
                           prototype

.weatherMod {

 extends: .mod;
}
            extends key



weather now has all the properties of mod,
          including sub-nodes
EXTENDS - UNDER THE
      HOOD

@prototype .mod,
.weatherMod{ ... }
.mod .inner,
.weatherMod .inner { ... }
.weatherMod { ... }



  normal cascade order is respected
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
MIXINS
combine small bits of repeating code
DEFINE MIXINS


@mixin .clearfix {

 zoom:1;
}
                           mixin




@mixin <class name> { property: value; }
MODIFY MIXINS
.clearfix:after {

 content: ".";

 display: block;

 height: 0;

 clear: both;

 visibility: hidden;
}


Any selector which references “.clearfix”
          modifies the mixin
INCLUDING MIXINS
                               mixin

.line{

 include: .clearfix;
}
            include key


copies clearfix property value pairs to the
       current location in the code
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;
}
USE MIXINS FOR SMALL
BITS OF REPEATING CODE
  remove non-semantic classes from the html
         like clearfix or rounded7px
MIXINS ARE NOT
             CASCADED
Property value pairs are invoked as if they were declared at the
                  current location in the code.
PROTOTYPE SUB-NODES
    define the relationship between
   sub-nodes of the same prototype
SHOULD THIS BE POSSIBLE?
does it add enough value to justify the additional complexity?
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.
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
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>
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!
OUTCOMES
  if the method and syntax are right,
the code should meet the stated goals
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
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);
}
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
MUCH LESS CODE
  easier to work with newbies
FLICKR PHOTO CREDITS



❖   Steampunk Gears, Needles, Rods 'n Such by Buz Carter
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
WISH
                    CSS


                                LIST
WISH
wish wish wish wish wish wish wish

More Related Content

Viewers also liked

Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS Nicole Sullivan
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing UsNicole Sullivan
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSSNicole Sullivan
 

Viewers also liked (7)

CSS Bloat!
CSS Bloat!CSS Bloat!
CSS Bloat!
 
Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
 
Don't feed the trolls
Don't feed the trollsDon't feed the trolls
Don't feed the trolls
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 

Similar to CSS Wish List @JSConf

Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQueryCss3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQueryAndrea Verlicchi
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application DesignBryce Kerley
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The FabulousNicole Sullivan
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers PerspectiveMediacurrent
 
Refresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End StoryRefresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End StoryRachael L Moore
 
Smoothing Your Java with DSLs
Smoothing Your Java with DSLsSmoothing Your Java with DSLs
Smoothing Your Java with DSLsintelliyole
 
Famo.us - New generation of HTML5 Web Application Framework
Famo.us - New generation of HTML5 Web Application FrameworkFamo.us - New generation of HTML5 Web Application Framework
Famo.us - New generation of HTML5 Web Application FrameworkHina Chen
 
Create SASSy web parts in SPFx
Create SASSy web parts in SPFxCreate SASSy web parts in SPFx
Create SASSy web parts in SPFxStefan Bauer
 
Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8Anne Tomasevich
 
Create SASSY Web Parts - SPSMilan
Create SASSY Web Parts - SPSMilan Create SASSY Web Parts - SPSMilan
Create SASSY Web Parts - SPSMilan Stefan Bauer
 
The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)Peter Gasston
 
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyCss3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyjdramaix
 
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyCss3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyArcbees
 
Dallas Drupal Days 2012 - Introduction to less sass-compass
Dallas Drupal Days 2012  - Introduction to less sass-compassDallas Drupal Days 2012  - Introduction to less sass-compass
Dallas Drupal Days 2012 - Introduction to less sass-compassChris Lee
 
Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddleClass 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddleErin M. Kidwell
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LAJake Johnson
 
One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...
One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...
One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...thejibe
 
Drupal Best Practices
Drupal Best PracticesDrupal Best Practices
Drupal Best Practicesmanugoel2003
 

Similar to CSS Wish List @JSConf (20)

Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQueryCss3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQuery
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application Design
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers Perspective
 
Refresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End StoryRefresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End Story
 
Smoothing Your Java with DSLs
Smoothing Your Java with DSLsSmoothing Your Java with DSLs
Smoothing Your Java with DSLs
 
Famo.us - New generation of HTML5 Web Application Framework
Famo.us - New generation of HTML5 Web Application FrameworkFamo.us - New generation of HTML5 Web Application Framework
Famo.us - New generation of HTML5 Web Application Framework
 
Create SASSy web parts in SPFx
Create SASSy web parts in SPFxCreate SASSy web parts in SPFx
Create SASSy web parts in SPFx
 
[Bauer] SASSy web parts with SPFX
[Bauer] SASSy web parts with SPFX[Bauer] SASSy web parts with SPFX
[Bauer] SASSy web parts with SPFX
 
Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8
 
Create SASSY Web Parts - SPSMilan
Create SASSY Web Parts - SPSMilan Create SASSY Web Parts - SPSMilan
Create SASSY Web Parts - SPSMilan
 
The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)
 
Why less?
Why less?Why less?
Why less?
 
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyCss3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
 
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyCss3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
 
Dallas Drupal Days 2012 - Introduction to less sass-compass
Dallas Drupal Days 2012  - Introduction to less sass-compassDallas Drupal Days 2012  - Introduction to less sass-compass
Dallas Drupal Days 2012 - Introduction to less sass-compass
 
Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddleClass 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddle
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LA
 
One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...
One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...
One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...
 
Drupal Best Practices
Drupal Best PracticesDrupal Best Practices
Drupal Best Practices
 

More from Nicole Sullivan

Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceNicole Sullivan
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?Nicole Sullivan
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?Nicole Sullivan
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional PerformanceNicole Sullivan
 

More from Nicole Sullivan (9)

Why are you here?
Why are you here?Why are you here?
Why are you here?
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
 
Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
 

Recently uploaded

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 

Recently uploaded (20)

20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 

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

  1. 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&amp;#x2019;ve been talking about.
  2. Example, YUI standard module format.
  3. Imagine you could define a css class to be an prototype, a repeating pattern of code off which more specific objects could be built.
  4. Important because, as we saw before, order matters.
  5. Let&amp;#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?
  6. Let&amp;#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?
  7. Let&amp;#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?
  8. 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&amp;#x2019;ve been talking about.