SlideShare a Scribd company logo
1 of 9
Download to read offline
SingaporeCSS / Talk.CSS #49 / 1 April 2020
Using the CSS Nesting Spec
Today
CSS SPEC PROCESS
FROM CRAZY IDEA TO YOUR BROWSER
Crazy idea Editor’s Draft Working Draft Candidate
Recommendation
CSS Nesting Spec
March 2019
NESTED RULESETS
NO MORE DUPLICATE SELECTORS
NESTED RULESETS
NO MORE DUPLICATE SELECTORS
WHY @NEST IS NEEDED
BROWSER PERFORMANCE AND LOOK-AHEAD PARSING
WHEN @NEST ISN’T NEEDED
WHEN & COMES FIRST
EXPERIMENTAL CSS, TODAY
postcss-preset-env
https://cssdb.org
POSTCSS.CONFIG.JS
AMAZEE'S CONFIGURATION (WORK IN PROGRESS)
https://codepen.io/johnalbin/pen/jJJWmo

More Related Content

What's hot

The Living Style Guide: How CustomInk created a their new ux lead style guide
The Living Style Guide: How CustomInk created a their new ux lead style guideThe Living Style Guide: How CustomInk created a their new ux lead style guide
The Living Style Guide: How CustomInk created a their new ux lead style guideDara Pressley
 
CSS架構如何加速功能開發
CSS架構如何加速功能開發CSS架構如何加速功能開發
CSS架構如何加速功能開發Oliver Lin
 
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devicesSlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devicesreebalazs
 
Wulin kungfu final
Wulin kungfu finalWulin kungfu final
Wulin kungfu finalJimmy Huang
 
Automating Responsiveness of your Websites
Automating Responsiveness of your WebsitesAutomating Responsiveness of your Websites
Automating Responsiveness of your WebsitesBirudugadda Pranathi
 
Getting Started With AureliaJs
Getting Started With AureliaJsGetting Started With AureliaJs
Getting Started With AureliaJsKnoldus Inc.
 

What's hot (6)

The Living Style Guide: How CustomInk created a their new ux lead style guide
The Living Style Guide: How CustomInk created a their new ux lead style guideThe Living Style Guide: How CustomInk created a their new ux lead style guide
The Living Style Guide: How CustomInk created a their new ux lead style guide
 
CSS架構如何加速功能開發
CSS架構如何加速功能開發CSS架構如何加速功能開發
CSS架構如何加速功能開發
 
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devicesSlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
 
Wulin kungfu final
Wulin kungfu finalWulin kungfu final
Wulin kungfu final
 
Automating Responsiveness of your Websites
Automating Responsiveness of your WebsitesAutomating Responsiveness of your Websites
Automating Responsiveness of your Websites
 
Getting Started With AureliaJs
Getting Started With AureliaJsGetting Started With AureliaJs
Getting Started With AureliaJs
 

More from John Albin Wilkins

The Drupal Roadmap: From D7 to D9
The Drupal Roadmap: From D7 to D9The Drupal Roadmap: From D7 to D9
The Drupal Roadmap: From D7 to D9John Albin Wilkins
 
CSS-in-JS: unexpected lessons for Drupal component design
CSS-in-JS: unexpected lessons for Drupal component designCSS-in-JS: unexpected lessons for Drupal component design
CSS-in-JS: unexpected lessons for Drupal component designJohn Albin Wilkins
 
Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!John Albin Wilkins
 
Styleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web DevelopmentStyleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web DevelopmentJohn Albin Wilkins
 
Managing Complex Projects with Design Components - Drupalcon Austin 2014
Managing Complex Projects with Design Components - Drupalcon Austin 2014Managing Complex Projects with Design Components - Drupalcon Austin 2014
Managing Complex Projects with Design Components - Drupalcon Austin 2014John Albin Wilkins
 
DrupalSouth 2014: Managing Complex Projects with Design Components
DrupalSouth 2014: Managing Complex Projects with Design ComponentsDrupalSouth 2014: Managing Complex Projects with Design Components
DrupalSouth 2014: Managing Complex Projects with Design ComponentsJohn Albin Wilkins
 
SassConf: Managing Complex Projects with Design Components
SassConf: Managing Complex Projects with Design ComponentsSassConf: Managing Complex Projects with Design Components
SassConf: Managing Complex Projects with Design ComponentsJohn Albin Wilkins
 
Become an IA superstar (Chinese version)
Become an IA superstar (Chinese version)Become an IA superstar (Chinese version)
Become an IA superstar (Chinese version)John Albin Wilkins
 
Mobile drupal: building a mobile theme
Mobile drupal: building a mobile themeMobile drupal: building a mobile theme
Mobile drupal: building a mobile themeJohn Albin Wilkins
 
Drupal and the Future of the Web
Drupal and the Future of the WebDrupal and the Future of the Web
Drupal and the Future of the WebJohn Albin Wilkins
 
Default theme implementations: a guide for module developers that want sweet ...
Default theme implementations: a guide for module developers that want sweet ...Default theme implementations: a guide for module developers that want sweet ...
Default theme implementations: a guide for module developers that want sweet ...John Albin Wilkins
 
New Adventures in Drupal Theming
New Adventures in Drupal ThemingNew Adventures in Drupal Theming
New Adventures in Drupal ThemingJohn Albin Wilkins
 

More from John Albin Wilkins (20)

The Drupal Roadmap: From D7 to D9
The Drupal Roadmap: From D7 to D9The Drupal Roadmap: From D7 to D9
The Drupal Roadmap: From D7 to D9
 
Mastering Drupal 8’s Twig
Mastering Drupal 8’s TwigMastering Drupal 8’s Twig
Mastering Drupal 8’s Twig
 
CSS-in-JS: unexpected lessons for Drupal component design
CSS-in-JS: unexpected lessons for Drupal component designCSS-in-JS: unexpected lessons for Drupal component design
CSS-in-JS: unexpected lessons for Drupal component design
 
Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!
 
Styleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web DevelopmentStyleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web Development
 
Managing Complex Projects with Design Components - Drupalcon Austin 2014
Managing Complex Projects with Design Components - Drupalcon Austin 2014Managing Complex Projects with Design Components - Drupalcon Austin 2014
Managing Complex Projects with Design Components - Drupalcon Austin 2014
 
DrupalSouth 2014: Managing Complex Projects with Design Components
DrupalSouth 2014: Managing Complex Projects with Design ComponentsDrupalSouth 2014: Managing Complex Projects with Design Components
DrupalSouth 2014: Managing Complex Projects with Design Components
 
SassConf: Managing Complex Projects with Design Components
SassConf: Managing Complex Projects with Design ComponentsSassConf: Managing Complex Projects with Design Components
SassConf: Managing Complex Projects with Design Components
 
Drupal Camp Taipei Keynote
Drupal Camp Taipei KeynoteDrupal Camp Taipei Keynote
Drupal Camp Taipei Keynote
 
Become an IA superstar (Chinese version)
Become an IA superstar (Chinese version)Become an IA superstar (Chinese version)
Become an IA superstar (Chinese version)
 
Mobile drupal: building a mobile theme
Mobile drupal: building a mobile themeMobile drupal: building a mobile theme
Mobile drupal: building a mobile theme
 
Sass: CSS with Attitude
Sass: CSS with AttitudeSass: CSS with Attitude
Sass: CSS with Attitude
 
Mastering zen
Mastering zenMastering zen
Mastering zen
 
Drupal and the Future of the Web
Drupal and the Future of the WebDrupal and the Future of the Web
Drupal and the Future of the Web
 
What's new in D7 Theming?
What's new in D7 Theming?What's new in D7 Theming?
What's new in D7 Theming?
 
Default theme implementations: a guide for module developers that want sweet ...
Default theme implementations: a guide for module developers that want sweet ...Default theme implementations: a guide for module developers that want sweet ...
Default theme implementations: a guide for module developers that want sweet ...
 
Rocking the Theme Layer
Rocking the Theme LayerRocking the Theme Layer
Rocking the Theme Layer
 
Drupal Design Tips
Drupal Design TipsDrupal Design Tips
Drupal Design Tips
 
New Adventures in Drupal Theming
New Adventures in Drupal ThemingNew Adventures in Drupal Theming
New Adventures in Drupal Theming
 
Nanocon Taiwan
Nanocon TaiwanNanocon Taiwan
Nanocon Taiwan
 

Recently uploaded

Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
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
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
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
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 

Recently uploaded (20)

Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
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!
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
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
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 

Using the CSS Nesting Spec Today