CSS Architecture

test

Why Define a system?

Having a system helps with comunication and maintanability, specialy 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 thougths 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::

First reach for Grid, if not appropriate, reach for Flex

Grid and Flex are ment to be used together, that said, try to first solve the problem with Grid, and then Flex.
Think of Grid as a tool to position things 2D and Flex to position things in one dimension, row or column.

Why I prefer Grid?

  • 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 then enought 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 easely twicked 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 tweek 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 becouse thouse 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 folow the Bootstrap's values then adjust acordanly 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 begining, the system is more important than the rules it self, the important thing is conscistency and knowing how the pieces work, so you don't have to keep comming back to check how thing's were done. (Did I use max-screen or min-screen?)

Semantic HTML

Always write html semanticly, in the beggining It might feel like it doesn't matter, but its important for 2 mains reasons, semantic html is important for assebility, screen readers have a hard time reading badly composed html, and also, when your website starts to get bigger with tones of components flying around, it gets very hard to find and fix bugs.
If yo html inu compose you 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 then not.

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

Coming up next

I'm planning to do a series on building a "asset panel" or "UI Kit" and put all this concepts into practice.

Remeber, consistency is one of the mos 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

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