My approach to a component-based CSS

Slide 1

Slide 1 text

My approach to a Component-based CSS

Slide 2

Slide 2 text

Frontend Developer With a special ! for JavaScript and a healthy fear of unorganized CSS.

Slide 3

Slide 3 text

DAE?

Slide 4

Slide 4 text

It's just about making things look pretty. Right?

Slide 5

Slide 5 text

How we handle CSS

Slide 6

Slide 6 text

1. Methology ... BEM & OOSCSS & SMACSS & DRY CSS & ACSS & ...

Slide 7

Slide 7 text

2. Pre Processors ... SASS & SCSS & Stylus & ...

Slide 8

Slide 8 text

3. Just don't write CSS CSS-in-JS: ... JSS & Styled Components & Emotion & Radium & ...

Slide 9

Slide 9 text

The C in CSS stands for "Calm down" ¯\_(ϑ)_/¯

Slide 10

Slide 10 text

Component-based CSS

Slide 11

Slide 11 text

Component-based what now? official definition my current approach

Slide 12

Slide 12 text

Better description 4 Functional Component-based CSS 4 Component-based functional CSS !

Slide 13

Slide 13 text

We’re not designing pages, we’re designing systems of components.1 1 Stephen Hay 1 From his book "Responsive Design Workflow".

Slide 14

Slide 14 text

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.2 2 https://reactjs.org/docs/components-and-props.html

Slide 15

Slide 15 text

Style every component separately 4 components are easily reusable 4 easy to delete components 4 no side-effects when adding or removing styles

Slide 16

Slide 16 text

. NICE!

Slide 17

Slide 17 text

. NICE! BUT...

Slide 18

Slide 18 text

.component-one { position: relative; font-family: 'Fancy Font'; font-weight: 500; font-size: 20px; color: var(--color-blue); margin-bottom: 2rem; padding: 1rem 1.5rem; background-color: var(--color-black); } .component-two { position: relative; font-family: 'Fancy Font'; font-weight: 700; font-size: 15px; color: var(--color-blue); margin-top: 2rem; padding: 1rem 1.5rem; background-color: var(--color-black); }

Slide 19

Slide 19 text

What about repetition?

Slide 20

Slide 20 text

Style every component separately

Slide 21

Slide 21 text

Functional CSS to the rescue!

Slide 22

Slide 22 text

.arial { font-family: Arial; } .font-1rem { font-size: 1rem; } .font-1.5rem { font-size: 1.5rem; } .font-color-primary { color: var(--color-primary) } .font-color-highlight { color: yellow; }

Headline

Slide 23

Slide 23 text

. NICE!

Slide 24

Slide 24 text

. NICE! BUT...

Slide 25

Slide 25 text

What about redesigns?

Slide 26

Slide 26 text

Style everything with functional classes

Slide 27

Slide 27 text

We need a compromise

Slide 28

Slide 28 text

Separation of concerns does not really work with CSS anyways.

Slide 29

Slide 29 text

First try: content-specific classes Component based approach

I'm Mirjam and I'm a cat AND dog person!

.profil-lead { font-size: 150%; color: yellow; }

Slide 30

Slide 30 text

Second try: style-specific classes Functional CSS approach

I'm Mirjam and I'm a cat AND dog person!

.text-big { font-size: 150%; } .text-highlight { color: yellow; }

Slide 31

Slide 31 text

So, what to do?

Slide 32

Slide 32 text

My current approach for separation Basic general styles like: font styles, colors Utility (functional) classes repeating styles that can be used universally CSS Component Counterpart to our website component

Slide 33

Slide 33 text

Basic - Characteristics 4 They are like a styleguide. 4 They tell you how your brand looks and behaves.

Slide 34

Slide 34 text

Basic - Example

Slide 35

Slide 35 text

:root { --font-headline: 'Domine', serif; --font-standard: 'Roboto', sans-serif; } html { font-size: 16px; } body { font-family: var(--font-standard); font-weight: 200; } h1,h2,h3,h4,h5,h6 { font-family: var(--font-headline); } .h1 { font-size: 3.5rem; }

Slide 36

Slide 36 text

Utility - Characteristics 4 They help you with all styles you would write over and over again. 4 They support you - and your team! - with a consistent style.

Slide 37

Slide 37 text

Utility - Example

Slide 38

Slide 38 text

.display-flex { display: flex; } .display-inline-flex { display: inline-flex; } .flex-direction-row { flex-direction: row; } .flex-direction-column { flex-direction: column; } .text-center { text-align: center; } .text-left { text-align: left; }

Slide 39

Slide 39 text

.margin-0 { margin: var(--spacer-0); } .margin-1 { margin: var(--spacer-1); } .margin-2 { margin: var(--spacer-2); } .padding-bottom-0 { padding-bottom: var(--spacer-0); } .padding-bottom-1 { padding-bottom: var(--spacer-1); } .padding-bottom-2 { padding-bottom: var(--spacer-2); }

Slide 40

Slide 40 text

CSS Component - Characteristics 4 They determine the rules how a specific website component has to look like. 4 This component style will work in every place of the markup.

Slide 41

Slide 41 text

CSS Component - Example

Slide 42

Slide 42 text

.Button { display: inline-block; font-weight: 500; text-align: center; vertical-align: middle; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .Button:hover { border: 1px solid var(--color-black); } .Button.Button-primary { background-color: var(--color-primary); } .Button.Button-secondary { color: var(--color-white); background-color: var(--color-secondary); }

Slide 43

Slide 43 text

General Rules

Slide 44

Slide 44 text

1. Use classes 4 use classes to define styles 4 use styles on elements very carefully 4 don't use IDs to style

Slide 45

Slide 45 text

2. Naming: consistent and clear 4 use speaking, semantic class names in basic and utility classes .text-lg { font-size: 150%; } .d-flex { display-flex; } .background-warning { background-color: var(--color-warning) } // ( ᐛ )و

Slide 46

Slide 46 text

Keep in mind: don't generate unexpected results (side effects)! .background-red { background-color: var(--color-warning); // var(--color-warning)= orange; font-weight: bold; } // <(ҹ^´)>

Slide 47

Slide 47 text

2. Naming: consistent and clear Naming approach for the CSS Components 4 mirror the website component name

Text

.Quote { width: 75%; margin-left: auto; margin-right: auto; }

Slide 48

Slide 48 text

4 add classes with a prefix to style nested elements

Imagine a inspirational quotes about dogs here. It's a really nice one and gives you a warm and fuzzy feeling, I promise!
Mirjam

.Quote .Quote-text { margin-top: 2rem; margin-bottom: 2rem; border-left: 10px solid var(--color-primary); padding-top: 1rem; padding-bottom: 1rem; padding-left: 2rem; font-size: 1.25rem; }

Slide 49

Slide 49 text

How to use it

Slide 50

Slide 50 text

That's how it looks 4 A lot of compositions to define appearance. 4 CSS Components whenever it makes sense.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Get the Thing!

Slide 51

Slide 51 text

"display-flex align-items-center justify-content-center padding-3 background-primary" Embrace compositions! ❤

Slide 52

Slide 52 text

Build CSS components when it's useful 4 its style can't be accomplished easily with utility and basic classes 4 it's is a piece of content 4 it will be used in the same manner at least thrice

Slide 53

Slide 53 text

Build independent components Style components should only contain styles that define their unique appearance. They're independent from their environment. You should be able to put them anywhere in the markup.

Slide 54

Slide 54 text

Example Get the Thing!

Slide 55

Slide 55 text

How to use it - summary 4 Use compositions 4 Duplication cheaper than wrong abstraction 4 Discipline!

Slide 56

Slide 56 text

There is a big No-Go

Slide 57

Slide 57 text

Nest components, not styles Components can be nested in other components, but never nest CSS components to overwrite styles.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum some more.

Get the Thing!

Slide 58

Slide 58 text

.Card-primary { .Button-primary { font-size: 0.8rem; } } // ( ಠ ಠ )

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

The End Examples: github.com/ programmiri /component-based- functional-css-examples See, that's kinda too long for a good name. Twitter: @mirjam_diala Github: programmiri Web: programmiri .de