SlideShare a Scribd company logo
1 of 26
TAMING SELECTORS
   sanity for our stylesheets
SIZE OF THE CSS FILE AND
 IMPLIED HTTP REQUESTS
   are the biggest factor for CSS performance
REFLOWS AND
RENDERING TIME
  are (much!) less important
DUPLICATION IS WORSE
  THAN STALE RULES
  because we have tools to deal with the later
DEFINE DEFAULT VALUES
   Don’t repeat this code in every object
#weatherModule h3{color:red;}
#tabs h3{color:blue}




 DEFINE DEFAULT VALUES
       Don’t repeat this code in every object
X
#weatherModule h3{color:red;}
#tabs h3{color:blue}




 DEFINE DEFAULT VALUES
       Don’t repeat this code in every object
X
#weatherModule h3{color:red;}
#tabs h3{color:blue}




 DEFINE DEFAULT VALUES
       Don’t repeat this code in every object
               h1,    .h1{...}
               h2,    .h2{...}
               h3,    .h3{...}
               h4,    .h4{...}
               h5,    .h5{...}
               h6,    .h6{...}
DEFINE STRUCTURE IN A
   SEPARATE CLASS
   Don’t repeat this code in every object
                                       block
                                          inner
                                                  hd




                                                  bd




                                                  ft
div.error{...}




           STYLE CLASSES
                 rather than elements
X
div.error{...}




           STYLE CLASSES
                 rather than elements


 .error{           most of the code goes here   }
X
  div.error{...}




             STYLE CLASSES
                   rather than elements


   .error{           most of the code goes here   }
div.error{                                        }
  p.error{                  exceptions only       }
 em.error{                                        }
div{...}
 ul{...}
 p{..}




AVOID STYLING ELEMENTS
            unless defining defaults
div{...}
  X
 ul{...}
 p{..}




AVOID STYLING ELEMENTS
            unless defining defaults
               .error{...}
              .section{...}
             .products{...}
.myModule .inner b{...}
.myModule2 b {...}


          GIVE RULES THE
         SAME STRENGTH
      Use cascade order to overwrite previous rules
X
.myModule .inner b{...}
.myModule2 b {...}


          GIVE RULES THE
         SAME STRENGTH
      Use cascade order to overwrite previous rules



     .myModule b{...}
     .myModule2 b {...}
.sidebar ul{...}
.header ul {...}


      AVOID SPECIFYING
         LOCATION
      Apply classes to the object you wish to change
X
.sidebar ul{...}
.header ul {...}


      AVOID SPECIFYING
         LOCATION
      Apply classes to the object you wish to change



     .mainNav{...}
     .subNav {...}
AVOID OVERLY SPECIFIC
      CLASSES
    they’re all semantic, but limiting
AVOID OVERLY SPECIFIC
      CLASSES
     they’re all semantic, but limiting

 .vehicle{...}
 .motorcycle{...}
 .ducati{...}
 .ducatiMonster620{...}
 .nicolesDucatiMonster620{...}
AVOID OVERLY SPECIFIC
      CLASSES
     they’re all semantic, but limiting

 .vehicle{...}
 .motorcycle{...}
 .ducati{...}

   X
 .ducatiMonster620{...}
 .nicolesDucatiMonster620{...}
#myUniqueIdentifier{...}
   #myUniqueIdentifier2{...}




                       AVOID SINGLETONS
                       ids can only be used once in any given page




Source: Chris Griego
X
   #myUniqueIdentifier{...}
   #myUniqueIdentifier2{...}




                       AVOID SINGLETONS
                       ids can only be used once in any given page




Source: Chris Griego
Media
                 Subheading
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                 aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                 cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




                          USE MIXINS
                                 to avoid repeating code


Media Extended
Subheading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.inner{...}        .weatherMod .inner{...}
.tr{...}           .weatherMod .tr{...}
.bl{...}           .weatherMod .bl{...}



      ENCAPSULATION
     don’t access sub-nodes of an object directly



                          inner
.inner{...}
  X
                   .weatherMod .inner{...}
.tr{...}           .weatherMod .tr{...}
.bl{...}           .weatherMod .bl{...}



      ENCAPSULATION
     don’t access sub-nodes of an object directly



                          inner

More Related Content

What's hot

What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)shinobu tsutsui
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3RAHUL SHARMA
 
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyCss3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyArcbees
 
OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?Michael Posso
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassLucien Lee
 
CSS3 meets GWT with GSS
CSS3 meets GWT with GSSCSS3 meets GWT with GSS
CSS3 meets GWT with GSSjdramaix
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSSRuss Weakley
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3Doris Chen
 
CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing worldRuss Weakley
 
The Near Future of CSS
The Near Future of CSSThe Near Future of CSS
The Near Future of CSSRachel Andrew
 
Introduction To Less
Introduction To Less Introduction To Less
Introduction To Less Knoldus Inc.
 
New Elements & Features in CSS3
New Elements & Features in CSS3New Elements & Features in CSS3
New Elements & Features in CSS3Jamshid Hashimi
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESSItai Koren
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
 

What's hot (20)

What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
 
SMACSS Workshop
SMACSS WorkshopSMACSS Workshop
SMACSS Workshop
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyCss3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
 
OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
 
CSS3 meets GWT with GSS
CSS3 meets GWT with GSSCSS3 meets GWT with GSS
CSS3 meets GWT with GSS
 
Css3
Css3Css3
Css3
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSS
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Css3
Css3Css3
Css3
 
CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing world
 
The Near Future of CSS
The Near Future of CSSThe Near Future of CSS
The Near Future of CSS
 
Introduction To Less
Introduction To Less Introduction To Less
Introduction To Less
 
BEM it!
BEM it!BEM it!
BEM it!
 
New Elements & Features in CSS3
New Elements & Features in CSS3New Elements & Features in CSS3
New Elements & Features in CSS3
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
 
Css3
Css3Css3
Css3
 
CSS Reset
CSS ResetCSS Reset
CSS Reset
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
 

Similar to Taming CSS Selectors

Advanced Debugging in XCode
Advanced Debugging in XCodeAdvanced Debugging in XCode
Advanced Debugging in XCodeMichelBueno10
 
(Greach 2015) Dsl'ing your Groovy
(Greach 2015) Dsl'ing your Groovy(Greach 2015) Dsl'ing your Groovy
(Greach 2015) Dsl'ing your GroovyAlonso Torres
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?Nicole Sullivan
 
Rapid web development, the right way.
Rapid web development, the right way.Rapid web development, the right way.
Rapid web development, the right way.nubela
 
Clean code in JavaScript
Clean code in JavaScriptClean code in JavaScript
Clean code in JavaScriptMathieu Breton
 
Test-driven Development (TDD)
Test-driven Development (TDD)Test-driven Development (TDD)
Test-driven Development (TDD)Bran van der Meer
 
#include -iostream- #include -vector- #include -Date-h- #include -Pers.docx
#include -iostream- #include -vector- #include -Date-h- #include -Pers.docx#include -iostream- #include -vector- #include -Date-h- #include -Pers.docx
#include -iostream- #include -vector- #include -Date-h- #include -Pers.docxasser7
 
#include -iostream- #include -vector- #include -Date-h- #include -Pers.docx
#include -iostream- #include -vector- #include -Date-h- #include -Pers.docx#include -iostream- #include -vector- #include -Date-h- #include -Pers.docx
#include -iostream- #include -vector- #include -Date-h- #include -Pers.docxhoggardbennie
 
Web Components Everywhere
Web Components EverywhereWeb Components Everywhere
Web Components EverywhereIlia Idakiev
 
Supercharge Flutter declarative UI with code generation
Supercharge Flutter declarative UI with code generationSupercharge Flutter declarative UI with code generation
Supercharge Flutter declarative UI with code generationEmanuele Papa
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LAJake Johnson
 
Professional Code Reviews - Bogdan Gusiev
Professional Code Reviews - Bogdan GusievProfessional Code Reviews - Bogdan Gusiev
Professional Code Reviews - Bogdan GusievRuby Meditation
 
Type level programming in Scala
Type level programming in ScalaType level programming in Scala
Type level programming in ScalaIkhoon Eom
 
New Ideas for Old Code - Greach
New Ideas for Old Code - GreachNew Ideas for Old Code - Greach
New Ideas for Old Code - GreachHamletDRC
 
Lift off with Groovy 2 at JavaOne 2013
Lift off with Groovy 2 at JavaOne 2013Lift off with Groovy 2 at JavaOne 2013
Lift off with Groovy 2 at JavaOne 2013Guillaume Laforge
 

Similar to Taming CSS Selectors (20)

Advanced Debugging in XCode
Advanced Debugging in XCodeAdvanced Debugging in XCode
Advanced Debugging in XCode
 
(Greach 2015) Dsl'ing your Groovy
(Greach 2015) Dsl'ing your Groovy(Greach 2015) Dsl'ing your Groovy
(Greach 2015) Dsl'ing your Groovy
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
 
Clean code
Clean codeClean code
Clean code
 
Rapid web development, the right way.
Rapid web development, the right way.Rapid web development, the right way.
Rapid web development, the right way.
 
CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf
 
Bronx study jam 1
Bronx study jam 1Bronx study jam 1
Bronx study jam 1
 
Clean code in JavaScript
Clean code in JavaScriptClean code in JavaScript
Clean code in JavaScript
 
Test-driven Development (TDD)
Test-driven Development (TDD)Test-driven Development (TDD)
Test-driven Development (TDD)
 
#include -iostream- #include -vector- #include -Date-h- #include -Pers.docx
#include -iostream- #include -vector- #include -Date-h- #include -Pers.docx#include -iostream- #include -vector- #include -Date-h- #include -Pers.docx
#include -iostream- #include -vector- #include -Date-h- #include -Pers.docx
 
#include -iostream- #include -vector- #include -Date-h- #include -Pers.docx
#include -iostream- #include -vector- #include -Date-h- #include -Pers.docx#include -iostream- #include -vector- #include -Date-h- #include -Pers.docx
#include -iostream- #include -vector- #include -Date-h- #include -Pers.docx
 
Web Components Everywhere
Web Components EverywhereWeb Components Everywhere
Web Components Everywhere
 
Supercharge Flutter declarative UI with code generation
Supercharge Flutter declarative UI with code generationSupercharge Flutter declarative UI with code generation
Supercharge Flutter declarative UI with code generation
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LA
 
Professional Code Reviews - Bogdan Gusiev
Professional Code Reviews - Bogdan GusievProfessional Code Reviews - Bogdan Gusiev
Professional Code Reviews - Bogdan Gusiev
 
Type level programming in Scala
Type level programming in ScalaType level programming in Scala
Type level programming in Scala
 
New Ideas for Old Code - Greach
New Ideas for Old Code - GreachNew Ideas for Old Code - Greach
New Ideas for Old Code - Greach
 
Clean Code
Clean CodeClean Code
Clean Code
 
Lift off with Groovy 2 at JavaOne 2013
Lift off with Groovy 2 at JavaOne 2013Lift off with Groovy 2 at JavaOne 2013
Lift off with Groovy 2 at JavaOne 2013
 
Clean code
Clean codeClean code
Clean code
 

More from Nicole Sullivan

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
 
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
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing UsNicole Sullivan
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSSNicole 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 (13)

Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
 
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
 
Don't feed the trolls
Don't feed the trollsDon't feed the trolls
Don't feed the trolls
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
 
CSS Bloat!
CSS Bloat!CSS Bloat!
CSS Bloat!
 
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
 
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

Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dashnarutouzumaki53779
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Scott Andery
 

Recently uploaded (20)

Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dash
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
 

Taming CSS Selectors

  • 1. TAMING SELECTORS sanity for our stylesheets
  • 2. SIZE OF THE CSS FILE AND IMPLIED HTTP REQUESTS are the biggest factor for CSS performance
  • 3. REFLOWS AND RENDERING TIME are (much!) less important
  • 4. DUPLICATION IS WORSE THAN STALE RULES because we have tools to deal with the later
  • 5. DEFINE DEFAULT VALUES Don’t repeat this code in every object
  • 6. #weatherModule h3{color:red;} #tabs h3{color:blue} DEFINE DEFAULT VALUES Don’t repeat this code in every object
  • 7. X #weatherModule h3{color:red;} #tabs h3{color:blue} DEFINE DEFAULT VALUES Don’t repeat this code in every object
  • 8. X #weatherModule h3{color:red;} #tabs h3{color:blue} DEFINE DEFAULT VALUES Don’t repeat this code in every object h1, .h1{...} h2, .h2{...} h3, .h3{...} h4, .h4{...} h5, .h5{...} h6, .h6{...}
  • 9. DEFINE STRUCTURE IN A SEPARATE CLASS Don’t repeat this code in every object block inner hd bd ft
  • 10. div.error{...} STYLE CLASSES rather than elements
  • 11. X div.error{...} STYLE CLASSES rather than elements .error{ most of the code goes here }
  • 12. X div.error{...} STYLE CLASSES rather than elements .error{ most of the code goes here } div.error{ } p.error{ exceptions only } em.error{ }
  • 13. div{...} ul{...} p{..} AVOID STYLING ELEMENTS unless defining defaults
  • 14. div{...} X ul{...} p{..} AVOID STYLING ELEMENTS unless defining defaults .error{...} .section{...} .products{...}
  • 15. .myModule .inner b{...} .myModule2 b {...} GIVE RULES THE SAME STRENGTH Use cascade order to overwrite previous rules
  • 16. X .myModule .inner b{...} .myModule2 b {...} GIVE RULES THE SAME STRENGTH Use cascade order to overwrite previous rules .myModule b{...} .myModule2 b {...}
  • 17. .sidebar ul{...} .header ul {...} AVOID SPECIFYING LOCATION Apply classes to the object you wish to change
  • 18. X .sidebar ul{...} .header ul {...} AVOID SPECIFYING LOCATION Apply classes to the object you wish to change .mainNav{...} .subNav {...}
  • 19. AVOID OVERLY SPECIFIC CLASSES they’re all semantic, but limiting
  • 20. AVOID OVERLY SPECIFIC CLASSES they’re all semantic, but limiting .vehicle{...} .motorcycle{...} .ducati{...} .ducatiMonster620{...} .nicolesDucatiMonster620{...}
  • 21. AVOID OVERLY SPECIFIC CLASSES they’re all semantic, but limiting .vehicle{...} .motorcycle{...} .ducati{...} X .ducatiMonster620{...} .nicolesDucatiMonster620{...}
  • 22. #myUniqueIdentifier{...} #myUniqueIdentifier2{...} AVOID SINGLETONS ids can only be used once in any given page Source: Chris Griego
  • 23. X #myUniqueIdentifier{...} #myUniqueIdentifier2{...} AVOID SINGLETONS ids can only be used once in any given page Source: Chris Griego
  • 24. Media Subheading Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. USE MIXINS to avoid repeating code Media Extended Subheading Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • 25. .inner{...} .weatherMod .inner{...} .tr{...} .weatherMod .tr{...} .bl{...} .weatherMod .bl{...} ENCAPSULATION don’t access sub-nodes of an object directly inner
  • 26. .inner{...} X .weatherMod .inner{...} .tr{...} .weatherMod .tr{...} .bl{...} .weatherMod .bl{...} ENCAPSULATION don’t access sub-nodes of an object directly inner