Beyond CSS - kevin powell

Maintainable and scalable CSS doesn’t have to be a challenge

There are a lot of things that, at scale, get harder and harder:

• Class naming
• Staying organized
• Dealing with the cascade and specificity issues
• and more

There are a lot of different methodologies, approaches, and tools out there to help solve the problems of writing CSS at scale.

Some approaches involve 3rd party options, which can be super helpful, but often are great at making an MVP that needs a total rework when it’s time to make something more custom.

Or worse yet, you end up with a strange mix of Tailwind here, Bootstrap there, some CSS-in-JS solutions over here and no real direction.

To help overcome a lot of these problems, the first thing you need is a clear direction and a system in place that you understand.

When we create our own system (which can even leverage the tools above!), we have total control from day one.

By having a system in place, you can grow it to fit your own needs and make it work for you, instead of using a “fits all” solution that a 3rd party needs to be.

And best of all, once you’ve got it set up you don’t have to start from scratch on every single project, allowing you to start new projects in record time.

When we first start writing CSS, it’s pretty easy.

Change a background color here, change a font there.

As you improve, you might start building out individual components or small layouts from designs you find online, and things go pretty well.

You understand the basics of flexbox, grid, and positioning and you are feeling pretty confident.

You can create layouts and get the job done…

But as projects grow in size, things become a bit of a mess.

Every aspect of a project becomes harder to manage the larger the project is. And as more team members enter the picture, the difficulties raise exponentially.

Some things are easier to manage than others, and CSS is one of those things that is very easy for it to explode into a complex, unorganized, mess. And when you’re working in a team with varying degrees of comfort in writing CSS, thing can become a nightmare.

And that’s why there are so many 3rd party libraries and frameworks out there, as well as a bunch of different naming conventions.

Those all exist because writing CSS that can scale is hard, and it’s made harder by the ever growing list of technologies we can use to build our sites as well.

The problem

Most tutorials, blog posts, and videos about CSS cover fundamental concepts like how flexbox works, or how to make a single component in isolation. They don’t talk about writing CSS at scale.

That’s just the nature of short, easy to digest content.

And of course, CSS is usually covered in longer content and other courses, but often it’s from extremely talented full-stack educators who don’t have the strongest grasp of CSS.

That’s not to mention coding bootcamps that can cost between $10,000-$20,000 and barely even do basic CSS any justice!

Knowing the basics of it is super important, but once you’ve got the fundamentals down, class naming can still be hard, that our stylesheets can easily become a mess as they grow, and we never want to deal with frustration of dealing with conflicting styles.

There is a better way

As CSS continues to grow as a language, things like custom properties and cascade layers are here to help us wrangle our CSS like we never could do before.

There are also other tools that have become industry standards such as Sass, PostCSS, and more that can help as well.

And in this course, I want to teach you how you can leverage modern CSS, and some of those other tools to create well-organized, and easy-to-scale projects that actually leave you and your team writing less CSS.

This is an advanced course that assumes you are comfortable writing CSS, but struggle with organization and scaling projects.

Start taking control of your stylesheets today