Scope In CSS With and Without JavaScript

A presentation at NEDcamp in November 2019 in Providence, RI, USA by Brian Perry

Slide 1

SCOPE IN CSS WITH AND WITHOUT JAVASCRIPT Brian Perry November 23, 2019 Slides: http://bit.ly/css-scope-ned

Slide 2

BRIAN PERRY • Lead Front End Dev at Bounteous • Rocking the Chicago ‘burbs • From Cranston (free street cred!) • Lover of all things components… …and Nintendo d.o: brianperry twitter: bricomedy github: backlineint nintendo: wabrian brianperryinteractive.com 2

Slide 3

Slide 4

CSS has global scope.

Slide 5

CSS has global scope. That’s great when you want rules to apply globally…

Slide 6

… and not so great when you don’t.

Slide 7

Many CSS in JavaScript solutions provide component scope.

Slide 8

CSS: global scope CSS-in-JS: component scope People disagree about these approaches… because… internet.

Slide 9

I think we should take advantage of both.

Slide 10

Thank You! Brian Perry Lead Front End Developer Email: brian.perry@bounteous.com

Slide 11

SCOPE IN CSS WITH AND WITHOUT JAVASCRIPT Brian Perry November 23, 2019 Slides: http://bit.ly/css-scope-ned

Slide 12

CSS has global scope.

Slide 13

Codepen: https://codepen.io/brianperry/pen/rNNQpyK 13

Slide 14

THE CASCADE (THE C IN CSS) Stylesheets can have three different origins Image: https://www.miriamsuzanne.com/2019/10/03/css-is-weird/ 14

Slide 15

The way all rules are combined is very easy to understand and remember. Image: https://css-tricks.com/the-c-in-css-the-cascade/#article-header-id-11 15

Slide 16

CASCADING ORDER (ACCORDING TO W3C SPEC) • Find all declarations that apply to the element and property for the target media type. • Sort according to importance and origin (ascending order) • User agent declarations • User normal declarations • Author normal declarations • Author !important declarations • User !important declarations • Sort rules with same origin and importance by specificity • If all else fails, sort by order specified Source: https://www.w3.org/TR/CSS2/cascade.html#cascade 16

Slide 17

SPECIFICITY (Note: The universal selector and inherited selectors have a specificity of 0, 0, 0, 0) Source: https://stuffandnonsense.co.uk/archives/css_specificity_wars.html 17

Slide 18

Slide 19

CSS-in-JS can provide component scope …and other advantages.

Slide 20

WHY CSS-IN-JS? • Component scope – styles can’t ‘leak out’ • Co-locate styles with components • Positive developer experience • An advantage for distributed and composable components • Dead code elimination – bundler knows if css is being used • Worry free naming – don’t have to worry about conflicts or enforcing a naming convention • Respond to props rather than juggling class names • And yes, probably fear / lack of knowledge in some cases 20

Slide 21

AND WHY NOT? • You still need to know how CSS works (even the hard stuff) • Comes with a bundle size / performance cost • Potential barrier of entry for CSS experts who aren’t JS experts • Additional layers of abstraction • Some approaches use less css more object-like syntax • Potential syntax highlighting issues • Risk of inconsistency / one offs 21

Slide 22

So which approach is right?

Slide 23

Slide 24

Thank You! Brian Perry Lead Front End Developer Email: brian.perry@bounteous.com

Slide 25

SCOPE IN CSS WITH AND WITHOUT JAVASCRIPT Brian Perry November 23, 2019 Slides: http://bit.ly/css-scope-ned

Slide 26

CSS has global scope.

Slide 27

HEY, REMEMBER CSS? Cascade Proprietary & Confidential Specificity Inheritance 27

Slide 28

Some of this is tricky. We should get our act together…

Slide 29

CSS METHODOLOGIES • Popular Methodologies • Object-Oriented CSS (OOCSS) • Block, Element, Modifier (BEM) • Scalable and Modular Architecture for CSS (SMACSS) • File organization • Naming conventions • Can create something that ‘feels’ like component scope. 29

Slide 30

BEM Concept: https://medium.com/@davehouse_80809/bem-for-everyone-else-89ccc8ad66f2 Codepen: https://codepen.io/brianperry/pen/BaaMYMJ 30

Slide 31

BEM IS GREAT! • Understandable structure that unifies markup and styles • Specific and component focused classes But… • In practice often like component scope, but not truly scoped to component • Not enforced at the tooling level • (sass-lint can help a bit here) • Requires discipline across dev team • Naming is still hard 36

Slide 32

CSS-in-JS can provide component scope.

Slide 33

COMPONENT SCOPE - STYLED COMPONENTS Source: https://www.cssinjsplayground.com/ 38

Slide 34

VUE SINGLE FILE COMPONENTS Source: https://codesandbox.io/s/vue-sfc-css-scope-m3ndm 42

Slide 35

You probably know what slide is coming next…

Slide 36

Slide 37

Thank You! Brian Perry Lead Front End Developer Email: brian.perry@bounteous.com

Slide 38

SCOPE IN CSS WITH AND WITHOUT JAVASCRIPT Brian Perry November 23, 2019 Slides: http://bit.ly/css-scope-ned

Slide 39

CSS has global scope.

Slide 40

HEY, REMEMBER CSS AND BEM? Cascade Proprietary & Confidential Specificity Inheritance BEM 51

Slide 41

But could ‘regular’ CSS have component scope?

Slide 42

But can ‘regular’ CSS have component scope? Not really, but…

Slide 43

ATOMIC (FUNCTIONAL) CSS IS A THING • Small single purpose classes named based on visual function • Immutable CSS • Classes don’t change • Visual control shifts from CSS to markup • Approaches: • Static – pre-existing set of utility classes • Programmatic – CSS generated based on markup 54

Slide 44

TAILWIND A utility-first framework for rapidly building custom designs 55

Slide 45

I’LL BE HONEST… Some people love it, but to me it feels more like not using CSS… 56

Slide 46

CSS-in-JS can provide component scope.

Slide 47

But could CSS-in-JS be more like ‘regular’ CSS?

Slide 48

CSS MODULES • Not a package • Handled by a build process (typically Webpack) • Scopes styles locally by default • Can play nice with Sass • Ships with Create React App and Gatsby • Has a super snarky logo 59

Slide 49

SCOPED CSS – PROJECT CARD 60

Slide 50

Slide 51

Slide 52

SCOPED CLASS NAMES 63

Slide 53

Slide 54

GLOBAL CSS 65

Slide 55

STYLES SHARED BY MULTIPLE TEMPLATING ENGINES Drupal • Twig • Unique styles and components Combined • Global styles that apply to both. • Few (if any) shared React • JSX • Unique styles and components components Proprietary & Confidential 66

Slide 56

STYLES SHARED BY MULTIPLE TEMPLATING ENGINES Drupal • Global CSS file combines design system partials and Drupal specific partials React • Projects consume partials as needed • Imported in JS • Mix of global and component scope • Also project specific CSS Proprietary & Confidential 67

Slide 57

We can have both!

Slide 58

SEPARATION OF CONCERNS IS IN THE EYE OF THE BEHOLDER Source: https://speakerdeck.com/didoo/let-there-be-peace-on-css?slide=62 69

Slide 59

But could we have component scope with less JS?

Slide 60

POPULAR EXTENSIONS BECOME OFFICIAL • CSS Preprocessors influence CSS • CSS Custom Properties • CSS Nesting • Popular Drupal contrib projects make their way into core (I said Drupal, aren’t you proud?) • JSON:API • Panels Ecosystem -> Layout Builder • Babel lets you develop with cutting edge JS today • Transpile today, browser native tomorrow. 71

Slide 61

COULD WE SEE THE SAME FOR CSS SCOPE? • HTML Scoped Attribute… kind of didn’t happen. •

<style scoped> 72

Slide 62

COULD WE SEE THE SAME FOR CSS SCOPE? • Web Components / Shadow DOM as a solution? • Shadow DOM styles scoped locally by default. • Approaches also exist to use or selectively override global styles. • Still requires writing a decent amount of JS. 73

Slide 63

Slide 64

A COUNTERPOINT: 75

Slide 65

Thank You! Brian Perry Lead Front End Developer Email: brian.perry@bounteous.com