smacss your up @minamarkham I need two demo sites And I need them - - PowerPoint PPT Presentation

▶
smacss your up minamarkham i need two demo sites
SMART_READER_LITE
LIVE PREVIEW

smacss your up @minamarkham I need two demo sites And I need them - - PowerPoint PPT Presentation

May 15, 2023 183 likes •1.38k views

smacss your up @minamarkham I need two demo sites And I need them in two days CSS is easy. hard CSS is easy. CSS is bullshit. Modular CSS Focusing on creating healthy front-end modules instead of complete pages can help

slide-1
SLIDE 1

smacss your up

slide-2
SLIDE 2

@minamarkham

slide-3
SLIDE 3
slide-4
SLIDE 4

“I need two demo sites”

“And I need them in two days”

slide-5
SLIDE 5
slide-6
SLIDE 6

CSS is easy.

slide-7
SLIDE 7

CSS is easy. hard

slide-8
SLIDE 8
slide-9
SLIDE 9
slide-10
SLIDE 10

CSS is bullshit.

slide-11
SLIDE 11

Modular CSS

slide-12
SLIDE 12

Focusing on creating healthy front-end modules instead of complete pages can help break complex page layouts into reusable solutions.” “

  • Dave Rupert
slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15

small pieces independent portable

slide-16
SLIDE 16

Navigation, Tabs, Tables, Accordions, Lists, Dropdowns Pagination, Buttons, Labels, Inputs, Breadcrumbs, etc.

slide-17
SLIDE 17

“Tiny Bootstraps”

slide-18
SLIDE 18
slide-19
SLIDE 19

Module, Pattern, Component, etc.

slide-20
SLIDE 20

MVCSS, BEM, OOCSS, Suit, intuit.css

slide-21
SLIDE 21

SMACSS

slide-22
SLIDE 22

Scalable & Modular Architecture for CSS

slide-23
SLIDE 23
slide-24
SLIDE 24

Framework

slide-25
SLIDE 25

categorization naming conventions depth of applicability

slide-26
SLIDE 26

Categorization

slide-27
SLIDE 27

base layout modules states themes

slide-28
SLIDE 28

Base

CSS resets, default styles

(ex. html, body, h1, ul, etc)

slide-29
SLIDE 29

Layout

grid, major components

  • ex. header, sidebar, nav
slide-30
SLIDE 30

content footer header

slide-31
SLIDE 31

sidebar header main content

slide-32
SLIDE 32

Modules

content patterns

(ex. search-box, navigation, content-box)

slide-33
SLIDE 33

promo promo promo promo hero footer-text navigation link-list

slide-34
SLIDE 34

States module in various states

slide-35
SLIDE 35
slide-36
SLIDE 36
slide-37
SLIDE 37

Themes

module in various contexts

slide-38
SLIDE 38

jessicahische.is

slide-39
SLIDE 39

Naming Conventions

slide-40
SLIDE 40

Base

h1, h2, p, a, etc.

slide-41
SLIDE 41

Layout

.layout-*, .l-*

slide-42
SLIDE 42

Module

.<name>

slide-43
SLIDE 43

Module

.button

slide-44
SLIDE 44

Sub-module

.<name>-<state>

slide-45
SLIDE 45

Sub-module

.button-secondary

slide-46
SLIDE 46

State

.is-*

slide-47
SLIDE 47

Theme

.theme-*

slide-48
SLIDE 48

Theme

.theme-*

slide-49
SLIDE 49

Depth of Applicability

slide-50
SLIDE 50

header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a {…}

slide-51
SLIDE 51

10 generations!

slide-52
SLIDE 52

http://specificity.keegan.st/

Specificity = 0,1,1,11

, , ,

slide-53
SLIDE 53

header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a {…}

slide-54
SLIDE 54

header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a {…}

slide-55
SLIDE 55

.nav-subitem

slide-56
SLIDE 56

http://specificity.keegan.st/

Specificity = 0,0,1,0

, , ,

slide-57
SLIDE 57

.nav-subitem > a

slide-58
SLIDE 58

http://specificity.keegan.st/

Specificity = 0,0,1,1

, , ,

slide-59
SLIDE 59

child selectors class selectors naming conventions

slide-60
SLIDE 60

Recap

slide-61
SLIDE 61

categorize css rules meaningful names shallow selectors

slide-62
SLIDE 62

add some

slide-63
SLIDE 63

not SASS

slide-64
SLIDE 64

Namespacing

slide-65
SLIDE 65

the almighty ampersand

slide-66
SLIDE 66

.btn { &:hover {…} }

slide-67
SLIDE 67

.btn:hover {…}

slide-68
SLIDE 68

.btn { form & {…} }

slide-69
SLIDE 69

form .btn {…}

slide-70
SLIDE 70

&- or &_

slide-71
SLIDE 71

.btn { &-secondary {…} &_secondary {…} } .btn

slide-72
SLIDE 72

.btn-secondary {…} .btn_secondary {…}

slide-73
SLIDE 73

nesting

slide-74
SLIDE 74

inception rule

slide-75
SLIDE 75

< 3 levels deep

slide-76
SLIDE 76

.btn { &-secondary { &-icon {…} } } secondary .btn

slide-77
SLIDE 77

.btn-secondary {…} .btn-secondary-icon {…}

slide-78
SLIDE 78

.btn {…} .btn-large {…}

  • <div class=“btn btn-large”>
slide-79
SLIDE 79

@extend

all the things!

slide-80
SLIDE 80

.btn {…} .btn-large {@extend .btn;}

  • <div class=“btn-large”>
slide-81
SLIDE 81

%btn {…} .btn-large {@extend %btn;}

  • <div class=“btn-large”>
slide-82
SLIDE 82

don’t @extend between modules

slide-83
SLIDE 83

File Structure

slide-84
SLIDE 84

@import

slide-85
SLIDE 85
  • 01. ¡Utilities ¡

@import ¡'global'; ¡ @import ¡'functions'; ¡ @import ¡'mixins'; ¡ @import ¡'helpers';

utilities/_index.scss Variables, mixins, functions, etc. Basically anything that doesn’t

  • utput CSS by itself.
slide-86
SLIDE 86

@import ¡"lib/susy"; ¡ @import ¡"lib/font-­‑awesome"; ¡ @import ¡"lib/pesticide";

utilities/_lib.scss Third-party libraries such as Susy, Font Awesome, Pesticide, and other plugins.

  • 01. ¡Utilities ¡
  • 02. ¡Libraries ¡
slide-87
SLIDE 87

@import ¡‘normalize'; ¡ @import ¡'base';

base/_index.scss CSS resets, Normalize, element styles

  • 01. ¡Utilities ¡
  • 02. ¡Libraries ¡
  • 03. ¡Base ¡
slide-88
SLIDE 88

@import ¡'global'; ¡ @import ¡'functions'; ¡ @import ¡'mixins'; ¡ @import ¡'helpers';

layout/_index.scss Grid styles, major layout components (e.g. header, footer, sidebar, etc)

  • 01. ¡Utilities ¡
  • 02. ¡Libraries ¡
  • 03. ¡Base ¡
  • 04. ¡Layout ¡
slide-89
SLIDE 89

@import ¡'btn'; ¡ @import ¡'table'; ¡ @import ¡'nav';

modules/_index.scss Individual modules, such as buttons, navigation, menus, etc.

  • 01. ¡Utilities ¡
  • 02. ¡Libraries ¡
  • 03. ¡Base ¡
  • 04. ¡Layout ¡
  • 05. ¡Modules ¡
slide-90
SLIDE 90

@import ¡'states'; ¡ @import ¡'touch';

states/_index.scss Describe states of being, ex: active, collapsed or hidden

  • 01. ¡Utilities ¡
  • 02. ¡Libraries ¡
  • 03. ¡Base ¡
  • 04. ¡Layout ¡
  • 05. ¡Modules ¡
  • 06. ¡States ¡
slide-91
SLIDE 91

utilities/_fonts.scss Web fonts imports & declarations

  • 01. ¡Utilities ¡
  • 02. ¡Libraries ¡
  • 03. ¡Base ¡
  • 04. ¡Layout ¡
  • 05. ¡Modules ¡
  • 06. ¡States ¡
  • 07. ¡@font-­‑face
slide-92
SLIDE 92

states/_print.scss Print styles

  • 01. ¡Utilities ¡
  • 02. ¡Libraries ¡
  • 03. ¡Base ¡
  • 04. ¡Layout ¡
  • 05. ¡Modules ¡
  • 06. ¡States ¡
  • 07. ¡@font-­‑face ¡
  • 08. ¡Print ¡
slide-93
SLIDE 93

!important

slide-94
SLIDE 94
slide-95
SLIDE 95

shame.css

slide-96
SLIDE 96

_shame.scss

slide-97
SLIDE 97
  • 01. ¡Utilities ¡
  • 02. ¡Libraries ¡
  • 03. ¡Base ¡
  • 04. ¡Layout ¡
  • 05. ¡Modules ¡
  • 06. ¡States ¡
  • 07. ¡@font-­‑face ¡
  • 08. ¡Print ¡
  • 09. ¡Shame

_shame.scss because hacks happen

slide-98
SLIDE 98

small and readable

slide-99
SLIDE 99

mina.so/sassyStarter

slide-100
SLIDE 100

Theming

slide-101
SLIDE 101

@mixin theme($name) { @if $theme == $name { @content; } }

slide-102
SLIDE 102

$theme: rebeccapurple

slide-103
SLIDE 103

@include theme($rebeccapurple)

slide-104
SLIDE 104
slide-105
SLIDE 105

refactor all the things!

slide-106
SLIDE 106
slide-107
SLIDE 107

refactor all the things?

slide-108
SLIDE 108

Baby steps

slide-109
SLIDE 109

extract components create variables apply naming conventions nest and @extend

slide-110
SLIDE 110

mina.so/smacss-menu

slide-111
SLIDE 111

Before: 161 lines After: 97 lines

slide-112
SLIDE 112

Recap

slide-113
SLIDE 113

namespace with ampersands & @extends break modules into partials refactor in chunks

slide-114
SLIDE 114

Resources

slide-115
SLIDE 115

smacss.com

slide-116
SLIDE 116

sass-lang.com

slide-117
SLIDE 117

sassmeister.com

slide-118
SLIDE 118

thanks!

mina.so/smacss

@minamarkham