Clean and Scalable CSS Architecture (2023)

Clean and Scalable CSS Architecture (2023), available at $44.99, has an average rating of 4.35, with 30 lectures, based on 28 reviews, and has 132 subscribers.

You will learn about Understand common CSS issues How to write clean CSS code How to implement Object Oriented principles in CSS (SOLID, DRY, immutability) What is a good and a bad Specificity graph Understand the concepts of OOCSS and how it can help you improve the code Understand the concepts of BEM How to manage Specificity graph with Inverted Triangle This course is ideal for individuals who are Medior/Senior Front End developers or Anyone who wants to write clean and scalable CSS code or Anyone who knows CSS but wants to dive deeper It is particularly useful for Medior/Senior Front End developers or Anyone who wants to write clean and scalable CSS code or Anyone who knows CSS but wants to dive deeper.

Enroll now: Clean and Scalable CSS Architecture (2023)

Summary

Title: Clean and Scalable CSS Architecture (2023)

Price: $44.99

Average Rating: 4.35

Number of Lectures: 30

Number of Published Lectures: 30

Number of Curriculum Items: 30

Number of Published Curriculum Objects: 30

Original Price: $22.99

Quality Status: approved

Status: Live

What You Will Learn

Understand common CSS issues

How to write clean CSS code

How to implement Object Oriented principles in CSS (SOLID, DRY, immutability)

What is a good and a bad Specificity graph

Understand the concepts of OOCSS and how it can help you improve the code

Understand the concepts of BEM

How to manage Specificity graph with Inverted Triangle

Who Should Attend

Medior/Senior Front End developers

Anyone who wants to write clean and scalable CSS code

Anyone who knows CSS but wants to dive deeper

Target Audiences

Medior/Senior Front End developers

Anyone who wants to write clean and scalable CSS code

Anyone who knows CSS but wants to dive deeper

CSS is easy, it’s easy to learn, it’s easy to write.

But actually, it’s hard to write scalable and maintainable code especially with large projects that require constant scaling…

There are many reasons why this is the case:

– In CSS everything is in a global scope. Any change in one file can cause an (un)expected result in another element, or page.

– CSS is a highly mutable language, because of it’s cascade nature. Each mutation leads to confusion and unexpected results.

– CSS highly depends on the source order.

– On the other hand, specificity can undo everything. It doesn’t matter how you structure your code, specificity can break everything. Specificity is one of the biggest problems of CSS.

– CSS is not (easily) scalable

We end up in a cycle of writing more CSS just to fix the old CSS! At some point our whole CSS code becomes too messy and too large. We need a better approach, we need a modular and predictable CSS. CSS language has not evolved since 1998. There are preprocessors, but they are not solving the main CSS issues. After all, SASS and Less are compiling to CSS.

In this course, we will talk about the CSS architecture, and how to write clean and maintainable code. Our goal is to write CSS that should be:

– Predictable: CSS rules behave as we expect them to.

– Reusable: When adding new components, we shouldn’t need to recode patterns or problems we’ve already solved.

– Maintainable: New features, components, or updates shouldn’t require refactoring our CSS and should NOT break existing components.

The idea is taking the OO philosophy you already learned in Java, PHP, C# and finding a way to translate that into CSS as well. All that you learned in OOP languages, all the DRY principles, SOLID, SRP, immutability we can apply to CSS in some way. Simple is the best.

There are many advanced courses about CSS, about flexbox, CSS animations, CSS grid… However, in this course, we will be focusing on the architecture of CSS. If you are interested in learning how to write clean and scalable CSS code, this course is the right thing for you!

This is a course I wish I had when I started working on more complex projects.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Stylesheet order issues

Lecture 3: Prerequisites

Chapter 2: OOP Principles in CSS

Lecture 1: Introduction

Lecture 2: Specificity

Lecture 3: Single responsibility principle

Lecture 4: Open-closed principle

Lecture 5: Liskov Substitution

Lecture 6: Interface Segregation

Lecture 7: Dependency Inversion

Lecture 8: Decouple CSS from HTML

Lecture 9: DRY

Lecture 10: Immutability

Lecture 11: The Separation of concerns

Lecture 12: Summary

Chapter 3: OOCSS

Lecture 1: OOCSS introduction

Lecture 2: The Media Object

Lecture 3: OOCSS concepts

Lecture 4: OOCSS standards

Chapter 4: BEM

Lecture 1: BEM

Lecture 2: Benefits of using BEM

Lecture 3: BEM specificity

Lecture 4: BEM vs OOCSS

Chapter 5: Overmodulize

Lecture 1: Overmodulize

Lecture 2: Overmodulize is (not) good

Chapter 6: The missing piece – ITCSS

Lecture 1: ITCSS

Lecture 2: Layers and Specificity Graph

Lecture 3: Inverted Triangle

Lecture 4: Folder structure and naming convention

Lecture 5: Summary

Instructors

Vislavski Miroslav
Professional Web Developer

Rating Distribution

1 stars: 1 votes

2 stars: 1 votes

3 stars: 1 votes

4 stars: 9 votes

5 stars: 16 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!