How to Make CSS Design Simpler - Ep 19

In this episode of The Toolbox, I'll go over some of the complexity that's plaguing CSS and making specificity harder to figure out. We'll look at WHAT frameworks are doing to help you develop simpler ways of designing sites. The pace of the web is relentless...and that's why you need The Toolbox.

Index
=====
00:00 Intro
02:48 Shorts: Rising Stars
07:17 Shorts: Doodle Ipsum
08:19 Shorts: Simple CSS
11:43 SASS is ridiculously popular
14:48 Cascade Layers
17:18 Container Queries
18:57 The Display Property
19:27 CSS is complicated
21:42 Why SASS is great
26:57 Assembler CSS
29:44 CSS Pollen
30:58 Tailwind CSS
34:08 Open Props Review
44:12 Q&A

Links
=======
Rising Stars: go.raybo.org/7ARI
Doodle Ipsum: doodleipsum.com/
Simple CSS: simplecss.org/
State of CSS - Tech: go.raybo.org/7AQ3)
Una Kravets Layers: go.raybo.org/7AQ2
CSS Layers Sample: go.raybo.org/7AQ7
CSS Container Queries: go.raybo.or/7AQA).
CSS Display Property: go.raybo.org/7AQC
MDN Conditionals: go.raybo.org/7AQC
CSS Nesting Module: go.raybo.org/7AQU)
Sass: sass-lang.com/
SASS Extend Sample: go.raybo.org/7ARD
SASS Color Mods: go.raybo.org/7ARC
Assembler CSS: asmcss.com/
PollenCSS: www.pollen.style/
Pollen CSS Sample: go.raybo.org/7ASq
Tailwind CSS: tailwindcss.com/
Tailwind Sample: go.raybo.org/7ASP

A while back, I was looking at the State of CSS report and the most interesting part of the report is in the technologies section, which shows you the user satisfaction versus interest for most CSS technologies out there.

Under satisfaction, SASS is clearly the winner. There are other things that people are pretty happy with here like PostCSS, Styled Components...which seems crazy to me, but is a way to write CSS with javascript. Interesting to note that Bootstrap is dipping under the adopt threshold in this graph, and most of the frameworks are in the assess section.

Why The Complexity?

The thing that started me on this topic was a video from Una Kravets about one of the upcoming features in CSS called Layers. It lets you arrange pieces of CSS into layers. What struck me though is how much more complicated the specificity will get once people start putting CSS in layers and layers.

One of the other more hyped features for CSS are Container Queries. They are like media queries, but they don't have to be relative to a viewport, you to control the layout based on the width available to the current item. Super powerful, but also additional complexity.

Frameworks are an attempt to solve problems not addressed by the main languages. The things that happen on frameworks today are the features you'll see on CSS tomorrow.

How Frameworks Solve Complexity

I just finished recording an update to a course on Sass. Sass has been around for 15 years. That is like several lifetimes in web terms. A lot of the features that we have in CSS today and that are coming online are things people have had in SASS for years.

You have the ability to extend classes, so that new classes will be based on old ones. You have all of these color modification classes which are super handy.

Where are they going?

Some frameworks are using CSS variable presets to help you build complex designs in a way that can be easier to follow.

There's a lot of frameworks like Assembler CSS are moving towards this model. Closer to what we do in the style tag. This is great for component based architectures, but not as good if you have a lot of repetitive work.

PollenCSS, for example offers presets of CSS variables that give you a design system that you can use to build things.

Open Props

One of the ways that some CSS frameworks are trying to make things easier is by giving you a set of predefined variables that can help you create a consistent look for your sites.

In CSS variables are known as custom properties. So this framework is called Open Props because they offer some preset variables that you can use. By using the variables, you're creating a design language that is consistent across your different components.

If you look, for example, at how colors are put together, the variables use a color name and then a number from zero to nine. The same structure exists, for example, when you get to typography and then you specify things like font size or font weight and use the same type of numbers. The naming conventions for the variables are pretty easy to follow. Once you start working with the variables, you'll have an idea of how all the variables work.

Also, it's incrementally adoptable, which means that you can grab all the props, just the props that you need, or the props in JavaScript mode. You can also customize the props yourself. If you want to have a different name for the variables using JavaScript or the command line.