Become the CSS Hero of Your Office with CSS Architecture


 15 Reviews Add a review

Published August 2017

Craft structured, maintainable and scalable CSS

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.

Oh yeah, and the whole SitePoint library! Learn More.

What you'll learn

  • Learn and apply software engineering principles to write maintainable CSS
  • Write specific, efficient, and descriptive CSS class names
  • Learn how to establish a CSS hierarchy using the ITCSS methodology
  • Closed captions available
Meet your instructor
Zsolt Nagy

Zsolt has been working hard on both his tech skills and soft skills, giving him the opportunity to become a Dev Tech Lead. He has taken these skills to the next level by blogging about his dev journey and creating Dev Career Mastery; a learning platform for developers wanting to expand their soft skills.

Lesson 1: Introducing CSS Architecture
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

Leave a Review