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.
That's why I created Beyond CSS.
A course to help you learn how to wrangle your stylesheets, keeping them organized and scalable no matter the size of the project or how big your team is.
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.
I’ve also lived through the struggles myself. I know that class naming can be hard, that things can easily become a mess as they grow, and the 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.
But there are also other tools that have become industry standards such as Sass, PostCSS, and more.
And in this course, I want to teach you how you can leverage modern CSS, and some of those 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.
Coming early 2023
Sign up so you don't miss out
Hi, my name is Kevin
I started making websites back in the late 90s when I made a homepage for a Star Wars RPG that I helped run.
Even back then, my favorite part of making sites was figuring out how to make the site look like the planned design. Granted, how we had to make designs a reality was very different back then. Luckily things have changed a lot over the years, and we have much better solutions today!
CSS has changed a lot since then, but despite how much it has matured as a language, it would seem like the one thing that is always a struggle is figuring out the best way to write it at scale.
It’s been decades that I’ve been writing CSS and over that time I’ve tried most of the solutions that are out there.
I’ve spent those years learning from my own mistakes, and with Beyond CSS I wanted to take that experience and help others get to the same solutions that I’ve found without all the time needed to get there.
The biggest hurdle in putting this course together has been, after having taught in the classroom for 5 years, I understand the limitations of online courses when compared to more traditional learning environments.
I’ve run into those limitations over on my YouTube channel that’s devoted to CSS, which has grown to over 550,000 subscribers, as well as in other courses that I’ve put together in the past.
As I’ve continued to teach online over the past 5+ years, I’ve been putting a lot of thought and effort, into overcoming those challenges.
To overcome these limitations, I’ve made Beyond CSS as multi-modal as possible. It mixes both text and video lessons, small interactive code blocks with mini-challenges, and larger challenges and projects for you to complete in your own editor.
I’m really proud of this course, and I really look forward to helping you take control of your stylesheets.
Save time and avoid the headaches
How many times have you started a new project and started writing the same CSS that you’ve written 1000 times before just to get started?
And how about running into badly authored CSS?
You can spend hours trying to fix issues dealing with the cascade or specificity for something that should be a “minor” tweak.
That’s hours of time down the toilet each and every time.
That’s lost time that could be spent on better—and more enjoyable—things.
With a system in place, you can jump-start the styling of projects and write a lot less CSS going forward, allowing you and your team to put your time and effort into other priorities instead, saving you a lot of time and headaches along the way.
A smarter workflow
While working fast is great, the most important thing is to work smart.
That’s where some of the bigger topics come into play:
- project architecture
- theming
- design systems
With a smart setup, this is where we really are able to leverage Sass for all it’s worth to create maintainable and scalable solutions.
With good project architecture, we won’t get lost in our code.
It also allows us to easily create themes for our sites that give us total control over the look and feel, without having to style each and every component one at a time.
And then, by creating a design system, we can apply, update, and modify how those themes are applied, quickly and easily changing how a site looks within just a few minutes.
We’re also left with something that can be used in each and every project you work on, so you’re never starting from scratch and rewriting the same code over and over again.
You’ll have a custom solution that works for you, and which can grow with any project that you throw at it.
Reinforce what you’re learning, and take that next step forward
Having a maintainable, scalable solution for our CSS is great, but learning about how it works and actually being able to implement things is another story.
That’s why I’ve done everything I can to make this course as interactive as possible.
As we learn about the small features of Sass, there will be interactive code blocks for you to play and experiment with, like this one right here (change the value of $example to blue and hit compile, and it will update immediately):
Throughout the modules there will be larger challenges for you to complete on your own, helping reinforce everything and make sure you are actually able to implement what we’re learning.
And there are multiple projects throughout the course as well, to reinforce everything within some real-world type situations.
Early on we’ll build some smaller-scale things to help us get our feet wet, and we’ll slowly build up as we learn more.
To really take things beyond CSS, the final module of the course will involve creating a multi-page blog site with a headless CMS, giving you everything you need to hand projects off to clients.
What's included
Each module of the course builds up on the previous ones. While it does assume a decent base in CSS, it assumes no knowledge of any of the tools that we'll be using throughout it.
Module 1:Sass Fundamentals
Even with the evolution of CSS and the rise of other tools, Sass is still a fantastic language which we’ll learn to leverage in the later modules, to create better architecture for our stylesheets, as well as build out and control design systems and more.
Module 2:Adding logic to our stylesheets
Getting into more advanced Sass, we’ll be exploring creating loops, if/else statements and more within our stylesheets, and we’ll see how we can leverage those to write a lot less CSS in the long run.
Module 3:Architecture and build processes
In this module, we’ll build on everything we’ve learned so far to get more organized, and also explore Vite, PostCSS, and a few other tools. We’ll also create a template project that we can use as a starting point for future work.
Module 4:Design systems and theming
(coming August-September 2022)
Taking what we’ve learned, we’ll explore how we can create themes for our projects, and then add an extra layer on top of all of that to create a robust design system in place.
Module 5:Creating deliverable projects
(coming October-November 2022)
With easy-to-maintain stylesheets in place, we step things by integrating everything into a JAMStack site with a headless CMS (probably SvelteKit + Prismic, but subject to change).
The course platform
If you'd like to see a bit more on the platform itself, I take a quick dive into it in the video below.
And more
-
Work faster with Sass
Learn advanced Sass features and walk away with useful mixins that you can use in your work
-
Build a starter template
You’ll walk away from this course with a starter template that you can use to jump start all future projects
-
Theming
We’ll be looking at a few different approaches that you can take to theme your components and sites
-
CSS best-practices
Everything we’re doing has to be compiled down to CSS the browser can understand, so we’ll be covering advanced CSS techniques and best-practices
-
Naming conventions
A big part of staying organized is dealing with class names, and we’ll be exploring a few different approaches, including BEM and CUBE CSS
-
Sass vs. CSS
We’ll explore where Sass features clash with CSS and how we can comfortably use both in our projects
-
Modern CSS
While we’ll be looking primarily at how we can scale our projects, modern CSS tools like custom properties, clamp(), calc(), and more are a big part of this as well
-
Accessibility
Creating accessible sites is very important, and we’ll be covering best-practices as we work through our larger projects
-
PostCSS
Sass is great, but it’s not the only tool out there that we can use to help improve our workflow
-
JAMStack
Performance is always a concern, and statics sites are a great way to have high-performance sites, so we’ll also be exploring creating a JAMStack site using a headless CMS