Tweet
Tweet

Slide 1

Slide 1 text

CSS is complicated. MYTH:

Slide 2

Slide 2 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU Modern CSS makes it easy to style components, such as this one. However, not everyone writes CSS the same way. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIU UIUNUN INU UIN

Slide 3

Slide 3 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article

Slide 4

Slide 4 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article div.image

Slide 5

Slide 5 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article div.heading div.image

Slide 6

Slide 6 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article div.heading div.description div.image

Slide 7

Slide 7 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article div.heading div.description div.actions div.image

Slide 8

Slide 8 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article div.heading div.description div.actions div.image img

Slide 9

Slide 9 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article div.heading div.description div.actions div.image img h2.title h2.description

Slide 10

Slide 10 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article div.heading div.description div.actions div.image img h2.title h2.description p

Slide 11

Slide 11 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article div.heading div.description div.actions div.image img h2.title h2.description p a.button

Slide 12

Slide 12 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU article div.image img div.heading h2.title h2.description div.description p div.actions a.button "Semantic"

Slide 13

Slide 13 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { }

Slide 14

Slide 14 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ... } }

Slide 15

Slide 15 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ... } .text { padding: 24px; } }

Slide 16

Slide 16 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ... } .text { padding: 24px; .heading { font-size: 2em; } } }

Slide 17

Slide 17 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ... } .text { padding: 24px; .heading { font-size: 2em; @media (min-width: 768px) { font-size: 3em; } } } }

Slide 18

Slide 18 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ... } .text { padding: 24px; .heading { font-size: 2em; @media (min-width: 768px) { font-size: 3em; } } .subheading { font-size: 2em; @media (min-width: 768px) { font-size: 3em; } } } }

Slide 19

Slide 19 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU article div.image img div.heading h2.title h2.description div.description p div.actions a.button "Semantic" The naïve approach

Slide 20

Slide 20 text

This approach makes you prone to have very complicated CSS.

Slide 21

Slide 21 text

CSS feels complicated. REALLY:

Slide 22

Slide 22 text

It doesn't have to. TRUTH:

Slide 23

Slide 23 text

@rstacruz Rico Sta. Cruz

Slide 24

Slide 24 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .photo { img { ... } } .text { .heading { .title { ... } .subtitle { ... } } .description { p { ... } } .action { .btn { ... } } } } Over-nesting is a common problem with this approach, though. CSS becomes hard to read.

Slide 25

Slide 25 text

Block-element-modifier http://bem.info

Slide 26

Slide 26 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU BEM Makes this a little easier. .photo_card .photo_card--photo .photo_card--heading .photo_card--subheading .photo_card--description .photo_card--action

Slide 27

Slide 27 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU BEM Makes this a little easier. Block Element .photo_card .photo_card--photo .photo_card--heading .photo_card--subheading .photo_card--description .photo_card--action

Slide 28

Slide 28 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo_card { &--photo { ... } &--heading { ... } &--subheading { ... } &--description { ... } &--action { ... } } BEM Makes this a little easier.

Slide 29

Slide 29 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU It comes at the price of dirtier markup.

...

...

...

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIU UIUNUN INU UIN

Slide 30

Slide 30 text

Bootstrap http://getbootstrap.com Bootstrap

Slide 31

Slide 31 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU Bootstrap has its own convention in class names. .panel .panel-head .panel-body .btn .btn-primary .btn-small UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIU UIUNUN INU UIN

Slide 32

Slide 32 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card-image .photo-card-title .photo-card-subtitle .photo-card-description .photo-card-action Bootstrap would probably suggest something like this.

Slide 33

Slide 33 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU Bootstrap's approach is almost equivalent to BEM, anyway. .photo-card .photo-card-photo .photo-card-heading .photo-card-subheading .photo-card-description .photo-card-action

Slide 34

Slide 34 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU Bootstrap's approach is almost equivalent to BEM, anyway. Block Element .photo-card .photo-card-photo .photo-card-heading .photo-card-subheading .photo-card-description .photo-card-action

Slide 35

Slide 35 text

Naïve BEM Cleanliness (or Bootstrap)

Slide 36

Slide 36 text

Naïve BEM Cleanliness CSS cleanliness (or Bootstrap)

Slide 37

Slide 37 text

Naïve BEM Cleanliness Markup cleanliness CSS cleanliness (or Bootstrap)

Slide 38

Slide 38 text

Naïve BEM Cleanliness Markup cleanliness CSS cleanliness ?

Slide 39

Slide 39 text

What if... there is a way to make a compromise between both?

Slide 40

Slide 40 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card What if... there's a way to keep this semantic structure, yet have clean CSS?

Slide 41

Slide 41 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .image What if... there's a way to keep this semantic structure, yet have clean CSS?

Slide 42

Slide 42 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .heading .image What if... there's a way to keep this semantic structure, yet have clean CSS?

Slide 43

Slide 43 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .heading .description .image What if... there's a way to keep this semantic structure, yet have clean CSS?

Slide 44

Slide 44 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .heading .description .actions .image What if... there's a way to keep this semantic structure, yet have clean CSS?

Slide 45

Slide 45 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .heading .description .actions .image .title .description What if... there's a way to keep this semantic structure, yet have clean CSS?

Slide 46

Slide 46 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .heading .description .actions .image .title .description .button What if... there's a way to keep this semantic structure, yet have clean CSS?

Slide 47

Slide 47 text

rscss Reasonable System for CSS Stylesheet Structure http://rscss.io

Slide 48

Slide 48 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .photo-card > .image { ... }

Slide 49

Slide 49 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .photo-card > .heading { ... }

Slide 50

Slide 50 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .photo-card > .description { ... }

Slide 51

Slide 51 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .photo-card > .actions { ... }

Slide 52

Slide 52 text

UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { > .image { ... } > .heading { ... } > .action { ... } > .action > .btn { ... } }

Slide 53

Slide 53 text

Always think in components.

Slide 54

Slide 54 text

.photo-card .search-field .buy-box Components are named with two (or more) words with a dash. Components

Slide 55

Slide 55 text

Components are made of elements.

Slide 56

Slide 56 text

.field .action .info Are always one word— no dashes. Elements

Slide 57

Slide 57 text

They can have variants.

Slide 58

Slide 58 text

.-compact .-large .-primary Variants start with a dash. Variants .photo-card .search-field .buy-box

Slide 59

Slide 59 text

Place one component per file.

Slide 60

Slide 60 text

.photo-card { ... ... } components/photo-card.scss

Slide 61

Slide 61 text

@import 'components/*'

Slide 62

Slide 62 text

@rstacruz Rico Sta. Cruz rscss.io