Beyond CSS - kevin powell
60 👀
Harry Potter

Harry Potter

Mar 31, 2024

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

This course is still a work in progress and the top tier is in pre-release at the moment.

As it stands now, modules 1-4 are finished and you will get immediate access to them (though a bit of tidying up and small fixes are still needed).

Module 5 will be progressively added as I make progress on it.

The pre-sale price on the premium package is for a limited time, and will not be available once the final module is complete.

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.

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

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 ~November 2023)

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).

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

Free Download 😀

Zip/rar files password can be one of these :- FreeCourseUniverse / CheapUniverse
Membership
Harry Potter

Harry Potter

Hey Guys We are Tech Enthusiasts and we know knowledge is key to success ! We are here to open path to your success by providing what you want. Today education == business. Our moto is education should be accessible by any person who is not able to purchase overpriced content.

Leave a comment

0 Comment

Membership

Membership Plans

( New Forum )

We are bringing so many new things at the fraction of a cost....

    Download

    How to download ??

    Affiliate

    This site is hosted on Digital Ocean

    Get $200 credit Instantly

    Offer available for limited time
    ( Take advantage of free credits 👇 )
    DigitalOcean Referral Badge

    Related Posts

    Tags

    © 2022 FreeCourseUniverse. All Rights Reserved