CSS Architecture - Speaker Deck

Slide 1

Slide 1 text

CSS Architecture

Slide 2

Slide 2 text

Writing CSS is easy. Scaling CSS and keeping it maintainable is not.

Slide 3

Slide 3 text

Why? Evolving Design Growing Complexity Repetitive Design Technical Difficulties ● Source order affects application order ● Specificity is hard to deal with ● CSS operate in global scope

Slide 4

Slide 4 text

CSS Methodologies

Slide 5

Slide 5 text

Goals and principles

Slide 6

Slide 6 text

CSS Methodologies BEM (2015) Block, Element, Modiﬁer SMACSS (2012) Scalability and modular architecture of CSS OOCSS (2011) Object Oriented CSS. Separation of structure and design. Separation of container and content Atomic CSS (2017) Utility First, Functional CSS CSS-in-JS ● CSS Modules ● Styled-components ● Emotion

Slide 7

Slide 7 text

BEM

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

“We’re not designing pages, we’re designing systems of components.” Stephen Hay

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

CSS at Scale Is all about picking a reasonable subset of the CSS language Deciding to not do a whole lot of things that CSS can do But we do this to make our app more maintainable

Slide 12

Slide 12 text

Proposed approach

Slide 13

Slide 13 text

Proposed approach Utility First + Modular CSS Use global scoped utility classes from CAD CSS framework via CDN or package Keep contextual CSS in local scoped in your app

Slide 14

Slide 14 text

Atomic CSS

Slide 15

Slide 15 text

Deﬁning Atomic CSS Atomic CSS is the approach to CSS architecture, like inline styles, oﬀers single-purpose units of style, but applied via classes on HTML.

Slide 16

Slide 16 text

Utility Classes Atomic CSS basically means that you have a ton of tiny, single purpose classes that are named based on their visual function. ● Text sizes, colors, and weights ● Shadows ● Borders ● Background colors ● Flexbox utilities ● Padding and margin helper ● Width & Heights ● Positions and alignments one class = one job .mt-0 { margin-top: 0; } .pr-1 { padding-right: var(--spacer-1); } .bg-dark { background-color: var(--bg-dark); } .text-red { color: var(--red); }

Slide 17

Slide 17 text

Approach ● Transition from "semantic" approach to "functional CSS" (Atomic CSS) ● Content-agnostic components + utility classes ● Mobile ﬁrst

Slide 18

Slide 18 text

Demo

Slide 19

Slide 19 text

Pros ● Only deﬁne the classes once ● Enforced UI consistency ● CSS Reusability and Scalability ● Composable ● Developers don’t need write CSS code most of the time ● Cross devices and browsers compatibility

Slide 20

Slide 20 text

Cons ● Developers still need to learn CSS ● Developers have to remember utilities and check the tech docs ● HTML pollution ● It doesn’t work well with micro interaction and animation

Slide 21

Slide 21 text

Frameworks ● Tailwind CSS ● Tachyons ● Basscss ● Beard ● Turretcss ● Bootstrap 4 & 5

Slide 22

Slide 22 text

Who is using it?

Slide 23

Slide 23 text

CAD v1.1 includes: + Root CSS variables + Grid system + Pre build components + Utility classes

Slide 24

Slide 24 text

Demo

Slide 25

Slide 25 text

Utility ﬁrst approach with no CSS

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

UI code strategy 1. Write semantic HTML 2. Use utility Classes ﬁrst 3. Write modular CSS

Slide 29

Slide 29 text

Let’s chat

Slide 30

Slide 30 text

Reference ● https://2020.stateofcss.com/en-US/technologies/methodologies/ ● https://github.com/stubbornella/oocss/wiki ● https://css-tricks.com/methods-organize-css/ ● https://medium.com/geekculture/css-approaches-for-2021-semantic-and-non- semantic-styling-for-the-current-state-of-web-development-1581916ca1c0 ● https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility -classes/ ● https://2020.stateofcss.com/en-US/