Engineering Learning Lunch on Writing CSS as a Team

Slide 1

Slide 1 text

CSS is super cool

Slide 2

Slide 2 text

1. Class selectors, 2. BEM naming conventions, 3. Listing css properties, 4. the impact of nesting

Slide 3

Slide 3 text

Performant selectors

Slide 4

Slide 4 text

.selector {…}

Slide 5

Slide 5 text

…

Slide 6

Slide 6 text

The difference between the best & worse case scenario targeting class selectors is surprisingly small

Slide 7

Slide 7 text

Δ = 50ms

Slide 8

Slide 8 text

“The focus should be on scalable CSS.” - Nicole Sullivan

Slide 9

Slide 9 text

Readability

Slide 10

Slide 10 text

Specificity > Brevity

Slide 11

Slide 11 text

vs. .profile-loading-indicator .loading

Slide 12

Slide 12 text

BEM

Slide 13

Slide 13 text

Block__element--Modifier

Slide 14

Slide 14 text

Slide 15

Slide 15 text

.grid__col .grid__col--centered

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

“Follow the rules of semantics—make classes descriptive and not reliable on appearance of the given element.” - &yeT StyleGuide

Slide 18

Slide 18 text

listing properties

Slide 19

Slide 19 text

our compiled CSS shows re-ordered CSS properties

Slide 20

Slide 20 text

SO, we should base how we order them in our css files on what's easiest to search for, read, and debug.

Slide 21

Slide 21 text

a. Display properties (or things that affect the box model of an element or object) B. Type (things that affect how fonts are displayed and positioned & their corresponding Visual Styles) c. Decorative properties (properties that are specific to decoration on structural [non-typographic elements) D. Animations and/or element transitions

Slide 22

Slide 22 text

.block__element { box-sizing: border-box; display: block; height: $height; width: $width; margin: 0 auto; padding: 0; color: $color; font-family: $Open-Sans; font-size: 16px; /* px or rem preferred */ line-height: 1.5; /* integers preferred */ text-align: center; background: $bg-color url('images/bg.jpeg'); background-color: $bg-color; background-image: url('images/bg.jpeg'); background-position: center center; background-repeat: no-repeat; background-size: cover; border: 1px solid $border-color; }

Slide 23

Slide 23 text

"Would you write an email with no spaces?" - dan eden, animate.css

Slide 24

Slide 24 text

nesting

Slide 25

Slide 25 text

nesting isn’t great

Slide 26

Slide 26 text

nesting gives you unwavering control over the styling and positioning of an element

Slide 27

Slide 27 text

it also allows you to be specific

Slide 28

Slide 28 text

but it does these things at the cost of readable or legible code

Slide 29

Slide 29 text

as well as modularization and/or reusability

Slide 30

Slide 30 text

debugging deeply nested css can be a pain

Slide 31

Slide 31 text

typically getting around deeply nested styles (quickly) requires overriding the css with new (nested) styles

Slide 32

Slide 32 text

= a hot mess with too many page- specific styles

Slide 33

Slide 33 text

hard to maintain

Slide 34

Slide 34 text

hard to Debug

Slide 35

Slide 35 text

not performant

Slide 36

Slide 36 text

we should prioritize specificity and longevity

Slide 37

Slide 37 text

.box-thing .box-thing-1 {…}

Slide 38

Slide 38 text

CSS rules parse right to left.

Slide 39

Slide 39 text

.box__thing {…} .box__thing--modifying-styles {…}

Slide 40

Slide 40 text

"The descendant selector is the most expensive selector in CSS." - Dave Hyatt

Slide 41

Slide 41 text

hell yeah, css!