How to Organize CSS | Beginners BEM tutorial 

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
How to Organize CSS and a Beginners BEM tutorial. This CSS tutorial for beginners looks at several helpful ways to organize your CSS styles and introduces the BEM naming convention methodology.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
• CSS Tutorials for Begi...
🔗 All Resources for this CSS Tutorial Series: github.com/gitdagray/css_course
📬 Course Updates ➜ courses.davegray.codes/
How to Organize CSS | Beginners BEM tutorial
(00:00) Intro
(00:05) Welcome
(00:26) Follow Your Team
(01:16) Create Headings with Comments
(02:24) Sort CSS properties by ABCSS or groups
(05:40) Naming Convention Methodologies
(06:41) BEM - Blocks
(08:10) BEM Blocks with Modifiers
(11:07) BEM Blocks vs Elements
(14:32) Header example styles
(16:15) BEM Elements
(17:27) BEM Elements with Modifiers
(18:54) BEM helps keep specificity aligned
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
🔗 W3C CSS Validator: jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: specificity.keegan.st/
🔗 CanIUse.com: caniuse.com/
📚 References:
🔗 MDN CSS Selectors: developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Values and Units: developer.mozilla.org/en-US/d...
🔗 MDN - The Box Model: developer.mozilla.org/en-US/d...
🔗 MDN - Styling Lists: developer.mozilla.org/en-US/d...
🔗 MDN - Display Property: developer.mozilla.org/en-US/d...
🔗 MDN - Floats: developer.mozilla.org/en-US/d...
🔗 MDN - Columns: developer.mozilla.org/en-US/d...
🔗 MDN - Margin Collapsing: developer.mozilla.org/en-US/d...
🔗 MDN - White-Space: developer.mozilla.org/en-US/d...
🔗 MDN - Positioning: developer.mozilla.org/en-US/d...
🔗 MDN - Flexbox: developer.mozilla.org/en-US/d...
🔗 MDN - Basic Concepts of Grid Layout: developer.mozilla.org/en-US/d...
🔗 MDN - Grid Template Areas: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Images: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Background Images: developer.mozilla.org/en-US/d...
🔗 Chip Cullen - Article on Content Layout Shift: chipcullen.com/what-width-and...
🔗 MDN - CSS Media Queries: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Pseudo-Classes and Pseudo-Elements: developer.mozilla.org/en-US/d...
🔗 MDN - List of CSS Pseudo-Classes: developer.mozilla.org/en-US/d...
🔗 MDN - List of CSS Pseudo-Elements: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Custom Properties (Variables): developer.mozilla.org/en-US/d...
🔗 MDN - CSS Functions: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Transform: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Transitions: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Animations: developer.mozilla.org/en-US/d...
🔗 MDN - Organizing Your CSS: developer.mozilla.org/en-US/d...
🔗 Scott O'Hara - Organizing CSS for Everyone: modernweb.com/ordering-css/
🔗 Get BEM - Introduction: getbem.com/introduction/
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about how to organize your CSS and beginners BEM tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#css #organize #bem