CSS Architecture

computer

Why Define a system?

Having a system helps with communication and maintainability, specially If you are working in a team. The system it self doesn't really matter a lot, as long you have a system and everybody is onboard with it, you're good to go.

Before starting a "design table" or "asset panel", I like to think and organize my thoughts on what technologies I'm going to use.

I created a system for my self that consists in some rules I like to follow, lets dive in to it::

Use Grid and Flexbox

Grid and Flexbox are meant to be used together. Think of Grid as a tool to position elements in 2D and Flex to position things in one dimension, row or column.

Why?

  • Less media queries
  • More organize and easy to visualize. (I highly recommend Firefox devtools for that)
  • Named grid areas avoids complexity

Color Palette

Define a color palette, 2 to 5 colors is more than enough to start, organize them as primary color, secondary color, darker/lighter primary, darker/lighter secondary and so on.

We are going to assign those color to variables, in that way our website can be easily tweaked in the future.

Also, define your blacks, whites and greys. (You're going to need them)

This will look like this:

Css

--primary: #059ECC;
--primary-dark: #177B99;
--secondary: #FFD7CC;
--secondary-dark: #D6C5C8 ;
--black:#252629;
--grey:#2E3033;
--white: #E1E7F7;

Or if you you're using Sass

$primary: #059ECC;
$primary-dark: #177B99
$secondary: #FFD7CC;
$secondary-dark: #D6C5C8 ;
$black:#252629;
$grey:#2E3033;
$white: #E1E7F7;

Tip: Color Theory, Color Harmony
https://www.youtube.com/watch?v=_2LLXnUdUIc

I recommend looking for a color pallet in websites like and from there you can tweak them to taste:

https://www.color-hex.com/color-palettes/
https://coolors.co/
https://colorpalettes.net/
https://color.adobe.com/create

Obs: As an extra, we could also choose colors for a dark theme.

Use rems instead of px

Define a base font size in pixels for the HTML, and from there, use everything in rems. I tend to use 10px as a base, just because is easier to do the math when needed, and after using it for a while, I started to know before hand how the components are going to relate to each other and show up on the page, this keeps the "guess work" to a minimum.

I don't like to use em because those are calculated in relation with the parent element, with time, things gets crazy and hard to maintain.

Why you should avoid using em:
https://www.youtube.com/watch?v=pautqDqa54I)

Media Queries

Define media queries screen sizes, I like to follow the Bootstrap's values than adjust accordantly to the project if needed.

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Ref: https://getbootstrap.com/docs/4.0/layout/overview/

If you are using SASS, you can have mixins ready to use wherever you need. This will look like this:

@mixin bp($point) {
    @if $point == wide {
        @media ('min-width': 1200px) { @content ; }
    } @else if $point == desktop {
        @media ('min-width': 992px) { @content ; }
    } @else if $point == tablet {
        @media ('min-width': 768px)  { @content ; }
    } @else if $point == lg-mobile {
        @media ('min-width': 576px)  { @content ; }
    } 
}

Because we are in a "Mobile-First" world, is always better to think in min-size first. As I said in the beginning, the system is more important than the rule it self, the important thing is consistency and knowing how the pieces fit together, so you don't have to keep coming back to check how thing's were done. (Did I use max-screen or min-screen?)

Semantic HTML

Always write html semantically, in the beginning It might feel like it doesn't matter, but its important for 2 main reasons:

  • Semantic html is important for accessibility, screen readers have a hard time reading badly composed html.
  • When your website starts to get bigger with tones of components flying around, it gets very hard to find and fix bugs. If you organize and use your tags properly, it will be a lot easer to find what you are looking for.

If you compose your html in a semantic and organized way from the begging, you will save a lot of time in the future, and also, you have a more pleasant development experience.

Have a system for organizing your CSS classes

I recommend using BEM just because is a stablished system, you will encounter it more likely than not.

Here's some links to get you going with it:
https://www.youtube.com/watch?v=ht0W2CsXKS8

Coming up next

I'm plan of doing a series on building a "asset panel" or "UI Kit" and put all this concepts into practice.

Remember, consistency is one of the most important things.

Links that might help:

SASS, Beginner to Pro Tutorial
https://www.youtube.com/watch?v=ht0W2CsXKS8

CSS Variables In Our Design System - Codeblog
https://www.youtube.com/watch?v=tmR9bBXbTTY

Use BEM (link to BEM instructions)
http://getbem.com/

Design Systems with Brad Frost - The State of the Web
https://www.youtube.com/watch?v=2M6dJ2Uynhg

styleguides.io
http://styleguides.io/

design.systems
http://design.systems/

Atomic Design by Brad Frost
https://atomicdesign.bradfrost.com/

Layout and Composition
https://www.youtube.com/watch?v=a5KYlHNKQB8

Composition over inheritance
https://www.youtube.com/watch?v=ZWPMzJfJHnc

Neumorphism.io
https://neumorphism.io/#55b9f3

Sass vs Scss
https://www.youtube.com/watch?v=TymGwiNMlh0

A few reasons I love Sass
https://www.youtube.com/watch?v=1rzjMyOkyoQ

Sass website:
https://sass-lang.com/guide

CSS naming conventions
https://medium.com/free-code-camp/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849


You'll only receive email when Teo Oliver publishes a new post

More fromĀ Teo Oliver