CSS encapsulation strategies

Marcin Mazurek Front-end developer @ Site Base

CSS 101

Inheritance

Cascading1.importance2.specificity3.order of declaration

Specificity Calculator

https://specificity.keegan.st/

Proper solution?

Shadow DOM

Alternatives?

<iframe>

#root { all: initial;}

CSS encapsulation POC™

A Site Base team proposal:

<Modal <ModalTitle <ModalContent <p </ModalContent></Modal>

> >Hello</ModalTitle> >>Hello world!</p>

data-sb data-sb data-sbdata-sb

Babel plugin to denote Site Base DOM nodes

PostCSS plugin to append :not() selector

h1 font-family: 'Comic Sans MS'; color: pink;}

.modal border: 1px solid tomato;}

:not([data-sb])

:not([data-sb])

{

{

body:not([data-site-base]) { font: 16px 'Comic Sans MS';}

Blocking inheritance with all: initial;

#root-reset { all: initial;}

<div id="root-reset"> <!-- SB component --></div>

Let's not forget about IE11#root-reset { background: #fff; border: none; color: #000; display: block; font: 16px sans-serif; height: auto; letter-spacing: normal; line-height: normal; margin: 0; padding: 0; text-transform: none; visibility: visible; width: auto; word-spacing: normal; z-index: auto;}

https://git.nonprod.williamhill.plc/site-base-lab/css-encapsulation-poc

Performance

Bundle sizes, gzipped

Sample generated markup in React with 2000 DOM nodes - 177kb ⇒ 178kb (>1%)

Sportsbook CSS - 90kb ⇒ 94kb (4%)

Thank you!