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

GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 

Recently uploaded (20)

GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 

Using the CSS Nesting Spec Today