A presentation at NEDcamp in in Providence, RI, USA by Brian Perry
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> 72COULD 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
CSS is global by nature. Given the name, style sheets are intended to cascade and a single CSS rule could apply to multiple elements on your site. This is a powerful feature of CSS that can allow you to create consistent styling throughout your site with small amounts of code. But increasingly there are cases where front end developers want to instead scope their styles to a specific component and ensure that component styles are consistent and don’t impact other areas of the site.
This session will provide an overview of the various approaches to scoping CSS, both when using CSS alone, and when using CSS combined with JavaScript.
Starting from the perspective of CSS only approaches we’ll look at:
Next we’ll examine the various scoping approaches when using CSS in JavaScript, including:
Finally, we’ll wrap up by looking at a few ways that global and scoped CSS can be used together effectively.
The following resources were mentioned during the presentation or are useful additional information.
The following code examples from the presentation can be tried out live.
Here’s what was said about this presentation on social media.
for free. You
can too.