Scope In CSS With and Without JavaScript

CSS has global scope. Slides: http://bit.ly/scope-css-fldc

WE COOL? 2

BRIAN PERRY • Lead Front End Dev at Bounteous • Rocking the Chicago ‘burbs • Lover of all things components… …and Nintendo d.o: brianperry twitter: bricomedy github: backlineint nintendo: wabrian brianperryinteractive.com 3

4

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

CSS has global scope. Slides: http://bit.ly/scope-css-fldc

CSS has global scope.

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

THE CASCADE (THE C IN CSS) Stylesheets can have three different origins Image: https://www.miriamsuzanne.com/2019/10/03/css-is-weird/ 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 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 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 18

19

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 21

AND WHY NOT? • You still need to know how CSS works (even the hard stuff) • Can come 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 22

So which approach is right?

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

CSS has global scope. Slides: http://bit.ly/scope-css-fldc

CSS has global scope.

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

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. 30

BEM Concept: https://medium.com/@davehouse_80809/bem-for-everyone-else-89ccc8ad66f2 Codepen: https://codepen.io/brianperry/pen/BaaMYMJ 31 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 37

CSS-in-JS can provide component scope.

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

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

You probably know what slide is coming next…

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

CSS has global scope. Slides: http://bit.ly/scope-css-fldc

CSS has global scope.

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

But can ‘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 55

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

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

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 60

SCOPED CSS – PROJECT CARD 61

62

63

SCOPED CLASS NAMES 64

GLOBAL CSS 66

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 67

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 68

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 70

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. 72

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

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. 74

75

… • … 76

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