Believe in the Power of CSS

•

0 likes•42 views

Chris DeMars

This is a talk I give about all the cool things you can do in CSS today and in the future.

Technology

1
Chris DeMars ! @saltnburnem
Not in this talk

1
Chris DeMars ! @saltnburnem
Not in this talk
Styled components🚫

1
Chris DeMars ! @saltnburnem
Not in this talk
Css-in-js🚫
Styled components🚫

Twitter: saltnburnem | Site: chrisdemars.com

3
Chris DeMars ! @saltnburnem
Disclaimer

3
Chris DeMars ! @saltnburnem
Disclaimer
I 💚 CSS 🎉🎉

4
CSS
CSS
CSS
Chris DeMars ! @saltnburnem

4
CSS
CSS
CSS
CSS
Chris DeMars ! @saltnburnem

4
CSS
CSS
CSS
CSS CSS
Chris DeMars ! @saltnburnem

5
“CSS is a key
development skill.”
- Ivana McConnell @ CSSConf AU
Chris DeMars ! @saltnburnem

6
“…also the problems with how we
devalue things like CSS…”
- Ivana Michael @ CSSConf AU
Chris DeMars ! @saltnburnem

7
CSS IS STILL
A THING!
Chris DeMars ! @saltnburnem

9
Chris DeMars ! @saltnburnem
Una kravets
https://youtu.be/IRI1H5tyEAo
Front-trends 2017
The power of css

13
Hakon Wium Lie
Bert Bos
Chris DeMars ! @saltnburnem

14
Wes Bos
Bert Bos
Chris DeMars ! @saltnburnem

17
Grid
Flexbox
Chris DeMars ! @saltnburnem

17
Grid
Flexbox
CSS variables
Chris DeMars ! @saltnburnem

17
Grid
Flexbox
CSS variables
Blend modes
Chris DeMars ! @saltnburnem

17
Grid
Flexbox
CSS variables
Blend modes
Viewport units
Chris DeMars ! @saltnburnem

17
Grid
Flexbox
CSS variables
Blend modes
Accessibility
Viewport units
Chris DeMars ! @saltnburnem

17
Grid
Flexbox
CSS variables
Blend modes
Accessibility
Viewport units
And more…
Chris DeMars ! @saltnburnem

20
Chris DeMars ! @saltnburnem
Block__Element--Modifier
Block_Element-Modifier
Double-Double
Single-Single

22
Makes writing
css fun!
Chris DeMars ! @saltnburnem

22
Makes writing
css fun!
Chris DeMars ! @saltnburnem
Maintainable

22
Makes writing
css fun!
Chris DeMars ! @saltnburnem
Maintainable Modular

22
Makes writing
css fun!
Chris DeMars ! @saltnburnem
Maintainable Modular Flexible

23
Chris DeMars ! @saltnburnem
https://bit.ly/2GRhU2T

26
One dimension
Chris DeMars ! @saltnburnem

27
https://css-tricks.com/snippets/css/a-guide-to-ﬂexbox/
Chris DeMars ! @saltnburnem

28
#1 problem
Chris DeMars ! @saltnburnem

29
Centering
Chris DeMars ! @saltnburnem

33
Two
dimensions
Chris DeMars ! @saltnburnem

34
Rows
&
columns
Chris DeMars ! @saltnburnem

40
Jen Simmons
Rachel Andrew
Chris DeMars ! @saltnburnem

50
Sass & less Variables
Chris DeMars ! @saltnburnem

51
Can’t change dynamically
Dom unaware
No js targets
Drawbacks
Chris DeMars ! @saltnburnem

52
Cascade
Inheritance
js targets
Pros of css vars
Chris DeMars ! @saltnburnem

53
Use cases
For
Custom props
Chris DeMars ! @saltnburnem

54
Emulate
Non-existent
Rules
https://bit.ly/2opAqp4
Chris DeMars ! @saltnburnem

55
Themes
https://bit.ly/2opAqp4
Chris DeMars ! @saltnburnem

56
Support?
https://bit.ly/2opAqp4
Chris DeMars ! @saltnburnem

57
Support?
https://bit.ly/2opAqp4
Chris DeMars ! @saltnburnem

58
Css variables
Syntax
Chris DeMars ! @saltnburnem

63
Image effects
in the browser
Chris DeMars ! @saltnburnem

65
Types
Background
blend mode
Chris DeMars ! @saltnburnem

65
Types
Background
blend mode
Mixed
blend mode
Chris DeMars ! @saltnburnem

66
Mixed blend mode
Chris DeMars ! @saltnburnem

66
Mixed blend mode
initial: Default setting of the property
that does not set a blend mode.
Chris DeMars ! @saltnburnem

66
Mixed blend mode
initial: Default setting of the property
that does not set a blend mode.
inherit: inherits the blend mode from its
parent.
Chris DeMars ! @saltnburnem

66
Mixed blend mode
initial: Default setting of the property
that does not set a blend mode.
inherit: inherits the blend mode from its
parent.
Unset: Removes the blend mode from an
element.
Chris DeMars ! @saltnburnem

69
Numeronym
Chris DeMars ! @saltnburnem

69
Numeronym
A c c e s s i b i l i t y
A 1 2 3 4 5 6 7 8 9 10 11 y
A11y
Chris DeMars ! @saltnburnem

71
Don’t do this!
Chris DeMars ! @saltnburnem

73
:focus-visible
Chris DeMars ! @saltnburnem

75
Focus-visible
polyfill
https://github.com/WICG/focus-visible
Chris DeMars ! @saltnburnem

77
Demo time!
Chris DeMars ! @saltnburnem

78
:focus-within
Chris DeMars ! @saltnburnem

81
Css feels!
Chris DeMars ! @saltnburnem

82
Resources
https://bit.ly/2OV9A63
Chris DeMars ! @saltnburnem

83
Thanks!
Chris demars | saltnburnem
Chris DeMars ! @saltnburnem
https://codepen.io/chrisdemars/
https://bit.ly/2qNA9Q4

Recently uploaded

The Metaverse: Are We There Yet?

Mark Billinghurst

Unlock the mysteries of successful Salesforce interviews in this insightful session hosted by Hugo Rosario (Salesforce Customer), a seasoned hiring manager that leads the Salesforce Department of multinational company with over 100 interviews under their belt. Step into the manager's chair and gain exclusive behind-the-scenes insights into what makes a Salesforce consultant stand out during the interview process. From deciphering the unspoken cues to mastering key strategies, we'll explore the intricacies of the interview process and provide practical tips for consultants looking to not only pass interviews but also thrive in their roles. Whether you're a seasoned professional or just starting your Salesforce journey, this session is your backstage pass to the secrets that hiring managers wish you knew.

Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...

CzechDreamin

This talk offers actionable insights at an executive level for enhancing productivity and refining your portfolio management approach to propel your organization to greater heights. Key Points Covered: 1. Experience Transformation: - The core challenge remains consistent across organizations: converting budget into user-centric designs. - Strategies for deploying design resources effectively in both startups and large enterprises. 2. Strategic Frameworks: - Introduction to the "Ziggurat of Impact" model, detailing layers from basic system interactions to comprehensive customer experiences. - Practical insights on creating frameworks that scale with organizational complexity. 3. Organizational Impact: - Real-world examples of navigating design in large settings, focusing on the synthesis of consumer products and customer experiences. - Emphasis on the importance of designing systems that directly influence customer interactions. 4. Design Execution: - Detailed walkthrough of organizational layers affecting design execution, from touchpoints and customer activities to shared capabilities. - How to ensure design influences both the micro and macro aspects of customer interactions. 5. Measurement and Adaptation: - Techniques for measuring the impact of design decisions and adapting strategies based on data-driven insights. - The critical role of continuous improvement and feedback in refining customer experiences.

Structuring Teams and Portfolios for Success

UXDXConf

Overview of Hyperledger Foundation

Hyperleger Tokyo Meetup

WebAssembly is Key to Better LLM Performance

Samy Fodil

Where to Learn More About FDO _ Richard at FIDO Alliance.pdf

FIDO Alliance

Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf

FIDO Alliance

Portal Kombat : extension du réseau de propagande russe

中央社

Ruby has a lot of standard libraries from Ruby 1.8. I promote them democratically with GitHub today via default and bundled gems. So, I'm working to extract them for Ruby 3.4 continuously and future versions. It's long journey for me. After that, some versions may suddenly happen LoadError at require when running bundle exec or bin/rails, for example matrix or net-smtp. We need to learn what's difference default/bundled gems with standard libraries. In this presentation, I will introduce what's the difficult to extract bundled gems from default gems and the details of the functionality that Ruby's require and bundle exec with default/bundled gems. You can learn how handle your issue about standard libraries.

Long journey of Ruby Standard library at RubyKaigi 2024

Hiroshi SHIBATA

Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf

FIDO Alliance

State of the Smart Building Startup Landscape 2024!

Memoori

WebRTC and SIP not just audio and video @ OpenSIPS 2024

Lorenzo Miniero

When you think of a highly secure meeting environment, do you instantly think 'Microsoft Teams'!? Or do you think about some unknown application, troublesome UI and daunting login process...? If you think the latter - let's change that! In this session Femke will show you how using Teams Premium features can create secure, but also good looking meetings! PRETTY. Make sure your company's brand is represented before, during and after the meeting with Customization policies in place. SECURE. Lets utilize Meeting templates and Sensitivity Labels to protect your meeting and data to prevent sensitive information from being leaked. After this session, you will have a clear understanding of the capabilities of Teams Premium features and how to set up the perfect meeting that suits your organizational requirements!

ECS 2024 Teams Premium - Pretty Secure

Femke de Vroome

Working together SRE & Platform Engineering

Marcus Vechiato

Microsoft CSP Briefing Pre-Engagement - Questionnaire

Exakis Nelite

This our Twelfth semiannual report on the global Cryptocurrency mining industry. Bitcoin is the world’s largest special purpose supercomputer. And it is globally decentralized. Millions of nodes all run the same open-source code to secure the Bitcoin network, create value, and put new transactions onto the distributed ledger. The latest Top500 list has just been announced at the ISC 2024 conference in Hamburg, and once again the Frontier supercomputer with 1.2 Exaflops peak performance is number one on the list. If assigned to SHA-256 hashing, Frontier would provide only the equivalent hash rate of about three cabinets of the latest high-end Bitcoin mining systems, costing less than 0.1% of Frontier’s cost. Michael Saylor, Chairman of MicroStrategy, has pointed out that GPUs are two orders of magnitude slower than the 5-nanometer technology of custom ASICs used for Bitcoin mining today. He makes the point that the Bitcoin network is unassailable by all of the hyperscale computing resources combined in AWS, Google, and Microsoft Azure cloud data centers today.

TopCryptoSupers 12thReport OrionX May2024

Stephen Perrenod

Using IESVE for Room Loads Analysis - UK & Ireland

IES VE

ERP Contender Series: Acumatica vs. Sage Intacct

BrainSell Technologies

This talk focuses on the practical aspects of integrating various telephony systems with Salesforce, drawing on examples from implementations in the Czech scene. It aims to inform attendees about the spectrum of telephony solutions available, from small to large scale, and their compatibility with Salesforce. The presentation will highlight key considerations for selecting a telephony provider that integrates smoothly with Salesforce, including important questions to support the decision-making process. It will also discuss methods for integrating existing telephony systems with Salesforce, aimed at companies contemplating or in the process of adopting this CRM platform. The discussion is designed to provide a straightforward overview of the steps and considerations involved in telephony and Salesforce integration, with an emphasis on functionality, compatibility, and the practical experiences of Czech companies.

Integrating Telephony Systems with Salesforce: Insights and Considerations, B...

CzechDreamin

Heather Hedden, Senior Consultant at Enterprise Knowledge, presented “Enterprise Knowledge Graphs: The Importance of Semantics” on May 9, 2024, at the annual Data Summit in Boston. In her presentation, Hedden describes the components of an enterprise knowledge graph and provides further insight into the semantic layer – or knowledge model – component, which includes an ontology and controlled vocabularies, such as taxonomies, for controlled metadata. While data experts tend to focus on the graph database components (RDF triple store or a label property graph), Hedden emphasizes they should not overlook the importance of the semantic layer.

Enterprise Knowledge Graphs - Data Summit 2024

Enterprise Knowledge

Recently uploaded (20)

The Metaverse: Are We There Yet?

Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...

Structuring Teams and Portfolios for Success

Overview of Hyperledger Foundation

WebAssembly is Key to Better LLM Performance

Where to Learn More About FDO _ Richard at FIDO Alliance.pdf

Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf

Portal Kombat : extension du réseau de propagande russe

Long journey of Ruby Standard library at RubyKaigi 2024

Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf

State of the Smart Building Startup Landscape 2024!

WebRTC and SIP not just audio and video @ OpenSIPS 2024

ECS 2024 Teams Premium - Pretty Secure

Working together SRE & Platform Engineering

Microsoft CSP Briefing Pre-Engagement - Questionnaire

TopCryptoSupers 12thReport OrionX May2024

Using IESVE for Room Loads Analysis - UK & Ireland

ERP Contender Series: Acumatica vs. Sage Intacct

Integrating Telephony Systems with Salesforce: Insights and Considerations, B...

Enterprise Knowledge Graphs - Data Summit 2024

Featured

PEPSICO Presentation to CAGNY Conference Feb 2024

Neil Kimberley

Content Methodology: A Best Practices Report (Webinar)

contently

How to Prepare For a Successful Job Search for 2024

Albert Qian

A report by thenetworkone and Kurio. The contributing experts and agencies are (in an alphabetical order): Sylwia Rytel, Social Media Supervisor, 180heartbeats + JUNG v MATT (PL), Sharlene Jenner, Vice President - Director of Engagement Strategy, Abelson Taylor (USA), Alex Casanovas, Digital Director, Atrevia (ES), Dora Beilin, Senior Social Strategist, Barrett Hoffher (USA), Min Seo, Campaign Director, Brand New Agency (KR), Deshé M. Gully, Associate Strategist, Day One Agency (USA), Francesca Trevisan, Strategist, Different (IT), Trevor Crossman, CX and Digital Transformation Director; Olivia Hussey, Strategic Planner; Simi Srinarula, Social Media Manager, The Hallway (AUS), James Hebbert, Managing Director, Hylink (CN / UK), Mundy Álvarez, Planning Director; Pedro Rojas, Social Media Manager; Pancho González, CCO, Inbrax (CH), Oana Oprea, Head of Digital Planning, Jam Session Agency (RO), Amy Bottrill, Social Account Director, Launch (UK), Gaby Arriaga, Founder, Leonardo1452 (MX), Shantesh S Row, Creative Director, Liwa (UAE), Rajesh Mehta, Chief Strategy Officer; Dhruv Gaur, Digital Planning Lead; Leonie Mergulhao, Account Supervisor - Social Media & PR, Medulla (IN), Aurelija Plioplytė, Head of Digital & Social, Not Perfect (LI), Daiana Khaidargaliyeva, Account Manager, Osaka Labs (UK / USA), Stefanie Söhnchen, Vice President Digital, PIABO Communications (DE), Elisabeth Winiartati, Managing Consultant, Head of Global Integrated Communications; Lydia Aprina, Account Manager, Integrated Marketing and Communications; Nita Prabowo, Account Manager, Integrated Marketing and Communications; Okhi, Web Developer, PNTR Group (ID), Kei Obusan, Insights Director; Daffi Ranandi, Insights Manager, Radarr (SG), Gautam Reghunath, Co-founder & CEO, Talented (IN), Donagh Humphreys, Head of Social and Digital Innovation, THINKHOUSE (IRE), Sarah Yim, Strategy Director, Zulu Alpha Kilo (CA).

Social Media Marketing Trends 2024 // The Global Indie Insights

Kurio // The Social Media Age(ncy)

The search marketing landscape is evolving rapidly with new technologies, and professionals, like you, rely on innovative paid search strategies to meet changing demands. It’s important that you’re ready to implement new strategies in 2024. Check this out and learn the top trends in paid search advertising that are expected to gain traction, so you can drive higher ROI more efficiently in 2024. You’ll learn: - The latest trends in AI and automation, and what this means for an evolving paid search ecosystem. - New developments in privacy and data regulation. - Emerging ad formats that are expected to make an impact next year. Watch Sreekant Lanka from iQuanti and Irina Klein from OneMain Financial as they dive into the future of paid search and explore the trends, strategies, and technologies that will shape the search marketing landscape. If you’re looking to assess your paid search strategy and design an industry-aligned plan for 2024, then this webinar is for you.

Trends In Paid Search: Navigating The Digital Landscape In 2024

Search Engine Journal

From their humble beginnings in 1984, TED has grown into the world’s most powerful amplifier for speakers and thought-leaders to share their ideas. They have over 2,400 filmed talks (not including the 30,000+ TEDx videos) freely available online, and have hosted over 17,500 events around the world. With over one billion views in a year, it’s no wonder that so many speakers are looking to TED for ideas on how to share their message more effectively. The article “5 Public-Speaking Tips TED Gives Its Speakers”, by Carmine Gallo for Forbes, gives speakers five practical ways to connect with their audience, and effectively share their ideas on stage. Whether you are gearing up to get on a TED stage yourself, or just want to master the skills that so many of their speakers possess, these tips and quotes from Chris Anderson, the TED Talks Curator, will encourage you to make the most impactful impression on your audience. See the full article and more summaries like this on SpeakerHub here: https://speakerhub.com/blog/5-presentation-tips-ted-gives-its-speakers See the original article on Forbes here: http://www.forbes.com/forbes/welcome/?toURL=http://www.forbes.com/sites/carminegallo/2016/05/06/5-public-speaking-tips-ted-gives-its-speakers/&refURL=&referrer=#5c07a8221d9b

5 Public speaking tips from TED - Visualized summary

SpeakerHub

Everyone is in agreement that ChatGPT (and other generative AI tools) will shape the future of work. Yet there is little consensus on exactly how, when, and to what extent this technology will change our world. Businesses that extract maximum value from ChatGPT will use it as a collaborative tool for everything from brainstorming to technical maintenance. For individuals, now is the time to pinpoint the skills the future professional will need to thrive in the AI age. Check out this presentation to understand what ChatGPT is, how it will shape the future of work, and how you can prepare to take advantage.

ChatGPT and the Future of Work - Clark Boyd

Clark Boyd

Getting into the tech field. what next

Tessa Mero

Google's Just Not That Into You: Understanding Core Updates & Search Intent

Lily Ray

How to have difficult conversations

Rajiv Jayarajah, MAppComm, ACC

Introduction to Data Science

Christy Abraham Joy

Time Management & Productivity - Best Practices

Vit Horky

The six step guide to practical project management If you think managing projects is too difficult, think again. We’ve stripped back project management processes to the basics – to make it quicker and easier, without sacrificing the vital ingredients for success. “If you’re looking for some real-world guidance, then The Six Step Guide to Practical Project Management will help.” Dr Andrew Makar, Tactical Project Management

The six step guide to practical project management

MindGenius

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...

RachelPearson36

During this webinar, Anand Bagmar demonstrates how AI tools such as ChatGPT can be applied to various stages of the software development life cycle (SDLC) using an eCommerce application case study. Find the on-demand recording and more info at https://applitools.info/b59 Key takeaways: • Learn how to use ChatGPT to add AI power to your testing and test automation • Understand the limitations of the technology and where human expertise is crucial • Gain insight into different AI-based tools • Adopt AI-based tools to stay relevant and optimize work for developers and testers * ChatGPT and OpenAI belong to OpenAI, L.L.C.

Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...

Applitools

12 Ways to Increase Your Influence at Work

GetSmarter

ChatGPT webinar slides

Alireza Esmikhani

More than Just Lines on a Map: Best Practices for U.S Bike Routes

Project for Public Spaces & National Center for Biking and Walking

Has your project been caught in a storm of deadlines, clashing requirements, and the need to change course halfway through? If yes, then check out how the administration team navigated through all of this, relocating 160 people from 3 countries and opening 2 offices during the most turbulent time in the last 20 years. Belka Games’ Chief Administrative Officer, Katerina Rudko, will share universal approaches and life hacks that can help your project survive unstable periods when there seem to be too many tasks and a lack of time and people.

Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...

DevGAMM Conference

Barbie - Brand Strategy Presentation

Erica Santiago

Featured (20)

PEPSICO Presentation to CAGNY Conference Feb 2024

Content Methodology: A Best Practices Report (Webinar)

How to Prepare For a Successful Job Search for 2024

Social Media Marketing Trends 2024 // The Global Indie Insights

Trends In Paid Search: Navigating The Digital Landscape In 2024

5 Public speaking tips from TED - Visualized summary

ChatGPT and the Future of Work - Clark Boyd

Getting into the tech field. what next

Google's Just Not That Into You: Understanding Core Updates & Search Intent

How to have difficult conversations

Introduction to Data Science

Time Management & Productivity - Best Practices

The six step guide to practical project management

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...

Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...

12 Ways to Increase Your Influence at Work

ChatGPT webinar slides

More than Just Lines on a Map: Best Practices for U.S Bike Routes

Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...

Barbie - Brand Strategy Presentation

Believe in the Power of CSS

1. 1 Chris DeMars ! @saltnburnem Not in this talk

2. 1 Chris DeMars ! @saltnburnem Not in this talk Styled components🚫

3. 1 Chris DeMars ! @saltnburnem Not in this talk Css-in-js🚫 Styled components🚫

4. Twitter: saltnburnem | Site: chrisdemars.com

5. 3 Chris DeMars ! @saltnburnem Disclaimer

6. 3 Chris DeMars ! @saltnburnem Disclaimer I 💚 CSS 🎉🎉

7. 4 Chris DeMars ! @saltnburnem

8. 4 CSS Chris DeMars ! @saltnburnem

9. 4 CSS CSS Chris DeMars ! @saltnburnem

10. 4 CSS CSS CSS Chris DeMars ! @saltnburnem

11. 4 CSS CSS CSS CSS Chris DeMars ! @saltnburnem

12. 4 CSS CSS CSS CSS CSS Chris DeMars ! @saltnburnem

13. 5 “CSS is a key development skill.” - Ivana McConnell @ CSSConf AU Chris DeMars ! @saltnburnem

14. 6 “…also the problems with how we devalue things like CSS…” - Ivana Michael @ CSSConf AU Chris DeMars ! @saltnburnem

15. 7 CSS IS STILL A THING! Chris DeMars ! @saltnburnem

16. 8 Chris DeMars ! @saltnburnem

17. 8 Chris DeMars ! @saltnburnem

18. 9 Chris DeMars ! @saltnburnem Una kravets https://youtu.be/IRI1H5tyEAo Front-trends 2017 The power of css

19. 10 Chris DeMars ! @saltnburnem

20. 11 Chris DeMars ! @saltnburnem

21. 12 Chris DeMars ! @saltnburnem

22. 13 Hakon Wium Lie Bert Bos Chris DeMars ! @saltnburnem

23. 14 Wes Bos Bert Bos Chris DeMars ! @saltnburnem

24. 14 Wes Bos Bert Bos Chris DeMars ! @saltnburnem

25. 15 Chris DeMars ! @saltnburnem

26. 16 Chris DeMars ! @saltnburnem

27. 17 Chris DeMars ! @saltnburnem

28. 17 Flexbox Chris DeMars ! @saltnburnem

29. 17 Grid Flexbox Chris DeMars ! @saltnburnem

30. 17 Grid Flexbox CSS variables Chris DeMars ! @saltnburnem

31. 17 Grid Flexbox CSS variables Blend modes Chris DeMars ! @saltnburnem

32. 17 Grid Flexbox CSS variables Blend modes Viewport units Chris DeMars ! @saltnburnem

33. 17 Grid Flexbox CSS variables Blend modes Accessibility Viewport units Chris DeMars ! @saltnburnem

34. 17 Grid Flexbox CSS variables Blend modes Accessibility Viewport units And more… Chris DeMars ! @saltnburnem

35. 18 Chris DeMars ! @saltnburnem

36. 19 Chris DeMars ! @saltnburnem Oocss

37. 19 Chris DeMars ! @saltnburnem Oocss

38. 20 Chris DeMars ! @saltnburnem Block__Element--Modifier Block_Element-Modifier Double-Double Single-Single

39. 21 Chris DeMars ! @saltnburnem Oocss

40. 21 Chris DeMars ! @saltnburnem Oocss

41. 21 Chris DeMars ! @saltnburnem Oocss

42. 21 Chris DeMars ! @saltnburnem Oocss

43. 21 Chris DeMars ! @saltnburnem Oocss

44. 22 Makes writing css fun! Chris DeMars ! @saltnburnem

45. 22 Makes writing css fun! Chris DeMars ! @saltnburnem Maintainable

46. 22 Makes writing css fun! Chris DeMars ! @saltnburnem Maintainable Modular

47. 22 Makes writing css fun! Chris DeMars ! @saltnburnem Maintainable Modular Flexible

48. 23 Chris DeMars ! @saltnburnem https://bit.ly/2GRhU2T

49. 24 Chris DeMars ! @saltnburnem

50. 25 Chris DeMars ! @saltnburnem

51. 26 One dimension Chris DeMars ! @saltnburnem

52. 27 https://css-tricks.com/snippets/css/a-guide-to-ﬂexbox/ Chris DeMars ! @saltnburnem

53. 28 #1 problem Chris DeMars ! @saltnburnem

54. 29 Centering Chris DeMars ! @saltnburnem

55. 30 Chris DeMars ! @saltnburnem

56. 30 Chris DeMars ! @saltnburnem

57. 31 Chris DeMars ! @saltnburnem

58. 32 Chris DeMars ! @saltnburnem

59. 33 Two dimensions Chris DeMars ! @saltnburnem

60. 34 Rows & columns Chris DeMars ! @saltnburnem

61. 35 Chris DeMars ! @saltnburnem

62. 35 Chris DeMars ! @saltnburnem

63. 36 Chris DeMars ! @saltnburnem

64. 36 Chris DeMars ! @saltnburnem

65. 37 Chris DeMars ! @saltnburnem

66. 37 Chris DeMars ! @saltnburnem

67. 38 Chris DeMars ! @saltnburnem

68. 38 Chris DeMars ! @saltnburnem

69. 39 Chris DeMars ! @saltnburnem

70. 39 Chris DeMars ! @saltnburnem

71. 40 Jen Simmons Rachel Andrew Chris DeMars ! @saltnburnem

72. 41 Chris DeMars ! @saltnburnem

73. 42 Chris DeMars ! @saltnburnem

74. 43 Chris DeMars ! @saltnburnem

75. 43 Chris DeMars ! @saltnburnem

76. 44 Chris DeMars ! @saltnburnem

77. 45 Chris DeMars ! @saltnburnem

78. 46 Chris DeMars ! @saltnburnem

79. 46 Chris DeMars ! @saltnburnem

80. 47 Chris DeMars ! @saltnburnem

81. 47 Chris DeMars ! @saltnburnem

82. 48 Chris DeMars ! @saltnburnem

83. 49 Chris DeMars ! @saltnburnem

84. 49 Chris DeMars ! @saltnburnem 🤬

85. 50 Sass & less Variables Chris DeMars ! @saltnburnem

86. 51 Can’t change dynamically Dom unaware No js targets Drawbacks Chris DeMars ! @saltnburnem

87. 52 Cascade Inheritance js targets Pros of css vars Chris DeMars ! @saltnburnem

88. 53 Use cases For Custom props Chris DeMars ! @saltnburnem

89. 54 Emulate Non-existent Rules https://bit.ly/2opAqp4 Chris DeMars ! @saltnburnem

90. 55 Themes https://bit.ly/2opAqp4 Chris DeMars ! @saltnburnem

91. 55 Themes https://bit.ly/2opAqp4 Chris DeMars ! @saltnburnem

92. 56 Support? https://bit.ly/2opAqp4 Chris DeMars ! @saltnburnem

93. 57 Support? https://bit.ly/2opAqp4 Chris DeMars ! @saltnburnem

94. 58 Css variables Syntax Chris DeMars ! @saltnburnem

95. 59 Chris DeMars ! @saltnburnem

96. 60 Chris DeMars ! @saltnburnem

97. 60 Chris DeMars ! @saltnburnem

98. 61 Chris DeMars ! @saltnburnem

99. 62 Chris DeMars ! @saltnburnem

100. 62 🤬 🤬 Chris DeMars ! @saltnburnem

101. 63 Image effects in the browser Chris DeMars ! @saltnburnem

102. 64 Chris DeMars ! @saltnburnem

103. 64 🚫Chris DeMars ! @saltnburnem

104. 65 Types Chris DeMars ! @saltnburnem

105. 65 Types Background blend mode Chris DeMars ! @saltnburnem

106. 65 Types Background blend mode Mixed blend mode Chris DeMars ! @saltnburnem

107. 66 Mixed blend mode Chris DeMars ! @saltnburnem

108. 66 Mixed blend mode initial: Default setting of the property that does not set a blend mode. Chris DeMars ! @saltnburnem

109. 66 Mixed blend mode initial: Default setting of the property that does not set a blend mode. inherit: inherits the blend mode from its parent. Chris DeMars ! @saltnburnem

110. 66 Mixed blend mode initial: Default setting of the property that does not set a blend mode. inherit: inherits the blend mode from its parent. Unset: Removes the blend mode from an element. Chris DeMars ! @saltnburnem

111. 67 Chris DeMars ! @saltnburnem

112. 67 Chris DeMars ! @saltnburnem

113. 68 Chris DeMars ! @saltnburnem

114. 69 Numeronym Chris DeMars ! @saltnburnem

115. 69 Numeronym Chris DeMars ! @saltnburnem

116. 69 Numeronym A c c e s s i b i l i t y A 1 2 3 4 5 6 7 8 9 10 11 y A11y Chris DeMars ! @saltnburnem

117. 70 :focus Chris DeMars ! @saltnburnem

118. 71 Don’t do this! Chris DeMars ! @saltnburnem

119. 72 Chris DeMars ! @saltnburnem

120. 72 Chris DeMars ! @saltnburnem

121. 73 :focus-visible Chris DeMars ! @saltnburnem

122. 74 Yayyyyy!!