Become the CSS Hero of Your Office with CSS Architecture

4.4 Average Customer Rating

Craft structured, maintainable and scalable CSS

  • 21 Videos
  • 2 hours 34 minutes
  • 3307 Happy Students

About the course

Only very few people are capable of engineering structured, maintainable, and scalable CSS.

Writing CSS is easy, especially with the introduction of tools, preprocessors, and frameworks, helping you along the way. Though all of these may help you create CSS, they’re not made to consider the structure, scalability, and future maintenance needs. All considerations that your future self and developer will be thankful for.

Most courses labeled with CSS architecture are backed by a certain technology, framework, or mindset. In this course, we’re not going to show you that, instead, we’re helping you build structured, maintainable, and scalable CSS through software engineering principles and best practices.

We’ll show you how to design, create, and contribute to CSS stylesheets of large applications and component libraries in a structured, scalable, and maintainable way. It’s a revelation, one your future self or developer will thank you for.

To get started in this course, you will need basic HTML and CSS skills. You should be able to write code in a text editor or integrated development environment. Knowing Sass or LESS will help you understand the practical lessons quickly, but they are optional.

If you’re not quite ready for this course, you can buff up your CSS skills, with our CSS Selectors 2: Targeting HTML Like a Pro, or CSS Selectors 3: Diving Deeper course. Test your CSS knowledge with our AtoZ: CSS course. For a true challenge of your front-end development skills, try out Responsive Web Development course.

  • 21 Videos
  • 2 hours 34 minutes
  • 3307 Happy Students

Courses Outline

Lesson 1: Introducing CSS Architecture
Free
Introduction
4:35
Goals of CSS Architecture
11:28
Lesson 2: Writing Maintainable CSS Code
Selector Efficiency and Simplification
13:59
Naming Classes
13:37
Specifying Units
8:56
Quiz
Lesson 3: Principles of CSS Architecture
Single Responsibility Principle
8:27
Open/Closed Principle
6:36
DRY CSS
10:32
Separation of Concerns
9:57
ITCSS
4:57
CSS Code Smells
10:10
Quiz
Lesson 4: Style Hierarchy
The Role of the Normalizer
7:47
Establishing Hierarchical Styles
11:24
Quiz
Lesson 5: CSS Architecture in Practice
Setting Up the Application
9:21
Settings, Tools, Generic, Elements
7:53
Implementing Objects and Components
7:21
Putting the Component Library into Practice
3:38
Lesson 6: Conclusion
Next Steps
3:41
  • 21 Videos
  • 2 hours 34 minutes
  • 3307 Happy Students