Course of CSS Architecture

💸 First lesson available without registration 💸

🤓 What will you learn in this course?

In CSS architecture, we face the same challenges of scalability, changeability, and code maintainability as with any other language. Concepts such as the Single Responsibility Principle, inheritance vs composition, or DRY also apply to CSS, and if we take them into account when writing our code, we will achieve well-organized styles that are easier to work with (no more !important to fix everything!).

In this course, we will see how to apply good naming to our classes to communicate their usage, how to modularize styles so that they are easy to locate and maintain, how to take advantage of preprocessors like SASS, tools to analyze code quality and detect dead code, and much more!

We will also discuss how to apply good CSS architecture in JavaScript applications. Even if we use solutions such as CSS-in-JS or Tailwind, there are still things to consider when working with the styles of our components.

🎥 Content

1. [FREE] 🏗️ What do we want to solve with CSS architecture?
   • 💣 CSS is a programming language
   • 👷 What do we want to solve with CSS architecture?
2. 🌸 Best practices when writing classes in CSS
   • 🎯 Visualize the quality of your CSS: Specificity of selectors
   • 🍅 Single Responsibility Principle in CSS
   • 👨‍👧‍👦 Inheritance vs composition in CSS
3. 📝 Nomenclature of your classes: BEM
   • 🧩 Improve your CSS with BEM: advantages and drawbacks
   • ⚡ Improve what we do not like about BEM with utility classes
4. 👐 Structure the styles of your application: comparing architecture systems
   • ⚛️ Atomic Design: sharing language between design and development
   • 🔻ITCSS
   • 🙌 The best of both worlds
5. 🎈 Apply CSS architecture: working with global styles
   • 🛠️ How to use variables, mixins, and functions
   • ⛱️ The foundation of CSS: global styles
6. 🍱 Modularize the styles of your application
   • 🦠 Create your first objects and Atoms
   • 🧬 Create meaningful classes: Molecules
   • 🦑 Create independent components: Organisms
7. 🚀 CSS architecture in JS apps
   • YouTube 🤯 CSS architecture problems in JS applications
   • 🎁 How to apply BEM in JS components
   • 🎨 Separate logic from style: UI components
8. 👭 The relationship between components
   • 💔 The problem of modularization
   • 💅 Layout components
9. 🔜 Conclusions and next steps
   • ❓Frequently asked questions
   • 🤟 Next steps