Scope In CSS With and Without JavaScript

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

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

3

CSS has global scope.

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

… and not so great when you don’t.

Many CSS in JavaScript solutions provide component scope.

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

I think we should take advantage of both.

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

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

CSS has global scope.

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

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

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

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

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

18

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

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

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

So which approach is right?

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

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

CSS has global scope.

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

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

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

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

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

CSS-in-JS can provide component scope.

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

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

You probably know what slide is coming next…

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

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

CSS has global scope.

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

But could ‘regular’ CSS have component scope?

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

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

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

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

CSS-in-JS can provide component scope.

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

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

SCOPED CSS – PROJECT CARD 60

61

62

SCOPED CLASS NAMES 63

GLOBAL CSS 65

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

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

We can have both!

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

But could we have component scope with less JS?

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

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

<style scoped> 72

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

74

A COUNTERPOINT: 75

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

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