Architecting CSS - Speaker Deck

Slide 1

Slide 1 text

Architecting CSS Chris Basham

Slide 2

Slide 2 text

SPECIFICITY

Slide 3

Slide 3 text

Speciﬁcity is how the browser prioritizes conﬂicting { property: values }

Slide 4

Slide 4 text

Speciﬁcity is calculated by the type & quantity of each part of the selector

Slide 5

Slide 5 text

http://speciﬁcity.keegan.st

Slide 6

Slide 6 text

Some selectors are commonly misused !

Slide 7

Slide 7 text

Some selectors are commonly misused ! Let’s investigate

Slide 8

Slide 8 text

P R I O R I T Y O F S E L E C T O R T Y P E S 1 2 #ids {} 3 .classes {} 4 elements {}

Slide 9

Slide 9 text

P R I O R I T Y O F S E L E C T O R T Y P E S 1 − CSS embedded in HTML − no reuse !

Slide 10

Slide 10 text

P R I O R I T Y O F S E L E C T O R T Y P E S 1 −2 2 #ids {} 3 .classes {} 4 elements {}

Slide 11

Slide 11 text

P R I O R I T Y O F S E L E C T O R T Y P E S ! 2 #ids {} + no coupling − no reuse

Slide 12

Slide 12 text

P R I O R I T Y O F S E L E C T O R T Y P E S 1 −2 2 #ids {} +0 3 .classes {} 4 elements {}

Slide 13

Slide 13 text

P R I O R I T Y O F S E L E C T O R T Y P E S ! ! 3 .classes {} + no coupling + inﬁnite reuse

Slide 14

Slide 14 text

P R I O R I T Y O F S E L E C T O R T Y P E S 1 −2 2 #ids {} +0 3 .classes {} +2 4 elements {}

Slide 15

Slide 15 text

P R I O R I T Y O F S E L E C T O R T Y P E S ! ! − CSS dictates HTML 4 elements {} ~ limited reuse

Slide 16

Slide 16 text

P R I O R I T Y O F S E L E C T O R T Y P E S 1 −2 2 #ids {} +0 3 .classes {} +2 4 elements {} −0.5

Slide 17

Slide 17 text

P R I O R I T Y O F S E L E C T O R T Y P E S 1 2 #ids {} 3 .classes {} 4 elements {}

Slide 18

Slide 18 text

Adore .classes Distrust #ids & elements Eradicate

Slide 19

Slide 19 text

Using only .classes reduces speciﬁcity escalation ! !

Slide 20

Slide 20 text

Using only .classes reduces speciﬁcity escalation ! But .nested .selectors > .are + .still ~ .problematic

Slide 21

Slide 21 text

Never .nest .your .classes Rather, .ﬂatten-your-classes ! !

Slide 22

Slide 22 text

Never .nest .your .classes Rather, .ﬂatten-your-classes ! Speciﬁcity escalation averted

Slide 23

Slide 23 text

To practically use this .class-ﬂattening-to-prevent- speciﬁcity-escalation method, we must practice rigor

Slide 24

Slide 24 text

NAMING CONVENTION

Slide 25

Slide 25 text

event name date (today) location

Slide 26

Slide 26 text

.event .name .date .date.today .location

Slide 27

Slide 27 text

.event .event .name .event .date .event .date.today .event .location

Slide 28

Slide 28 text

.event .event-name .event-date .event-date--today .event-location

Slide 29

Slide 29 text

IxDA event name date (today) location

Slide 30

Slide 30 text

.ixda-event .ixda-event-name .ixda-event-date .ixda-event-date--today .ixda-event-location

Slide 31

Slide 31 text

.ixda-Event .ixda-Event-name .ixda-Event-date .ixda-Event-date--today .ixda-Event-location

Slide 32

Slide 32 text

.ixda-Event-date--today {}

Slide 33

Slide 33 text

.ixda -Event -date --today {}

Slide 34

Slide 34 text

. - - -- {}

Slide 35

Slide 35 text

. param-case - PascalCase - camelCase -- {} camelCase

Slide 36

Slide 36 text

. suggested - required - contextual -- {} contextual

Slide 37

Slide 37 text

.ixda-Event {} .ixda-Event-date {} .ixda-Event-date--today {} .ixda-Event-location {} .ixda-Event-name {}

Slide 38

Slide 38 text

B Y S M A R T LY U S I N G H Y P H E N S & C A S I N G : Selectors become more legible Relationships are better understood Styles feel self-contained & modular

Slide 39

Slide 39 text

PRE-PROCESSORS

Slide 40

Slide 40 text

Pre-processors extend the syntax & functionality of CSS

Slide 41

Slide 41 text

Pre-processors compile these enhancements into CSS

Slide 42

Slide 42 text

P O P U L A R P R E - P R O C E S S O R S Less Myth Rework Sass Stylus

Slide 43

Slide 43 text

M Y P R E F E R E N C E Less ! ! Sass

Slide 44

Slide 44 text

P R E - P R O C E S S O R B E N E F I T S Functions Importing Mixins Nesting & parent selectors Variables

Slide 45

Slide 45 text

B E N E F I T S N E E D E D F O R T H I S T E C H N I Q U E ! Importing ! Nesting & parent selectors

Slide 46

Slide 46 text

/* .css */ .ixda-Event {} .ixda-Event-date {} .ixda-Event-date--today {} .ixda-Event-location {} .ixda-Event-name {} !

Slide 47

Slide 47 text

// .less or .scss .ixda-Event { &-date { &--today {} } &-location {} &-name {} }

Slide 48

Slide 48 text

Nest with parent selectors (&) to keep styles D.R.Y. !

Slide 49

Slide 49 text

Nest with parent selectors (&) to keep styles Don’t Repeat Yourself

Slide 50

Slide 50 text

ORGANIZATION

Slide 51

Slide 51 text

src/ core/ modules/ main.less ! !

Slide 52

Slide 52 text

src/ core/ foundation modules/ main.less ! !

Slide 53

Slide 53 text

src/ core/ foundation modules/ components main.less ! !

Slide 54

Slide 54 text

src/ core/ foundation modules/ components main.less import everything ! !

Slide 55

Slide 55 text

src/ core/ base.less mixins.less variables.less !

Slide 56

Slide 56 text

src/ modules/ ixda/ Event.less util/ Grid.less

Slide 57

Slide 57 text

src/main.less ! @import ‘core/base’; @import ‘core/mixins’; @import ‘core/variables’; @import ‘modules/ixda/Event’; @import ‘modules/util/Grid’;

Slide 58

Slide 58 text

Pair naming convention

! with ﬁle organization src/modules/ixda/Event.less

Slide 59

Slide 59 text

You’ll never forget where you put your .classy-Toys, again

Slide 60

Slide 60 text

P.S.

Slide 61

Slide 61 text

No { property: merits !important }

Slide 62

Slide 62 text

Chris Basham @chrisbasham ! I X D A B L O O M I N G T O N   A U G U S T 2 0 1 4