QCon 2017 - Criando sistemas modulares corporativos com Web Components, CSS avançado e Bootstrap 4

Com base em um case real, esta palestra explora técnicas e lições aprendidas durante o processo de desenvolvimento e arquitetura front-end de um projeto open source larga escala usando Web Components e Bootstrap 4. Serão abordadas especificações do Shadow DOM v1, técnicas de modernas de CSS, princípios do Atomic Design e como criar CSS guidelines sólidas – com muito live-coding.

Mostraremos como a modularidade no CSS é fundamental para a qualidade. Você verá como estruturar uma grande base de código CSS de forma a maximizar modularidade e reduzir custos de manutenção. Também será discutida, com abordagem pragmática, a especificação de Web Components e seus quatro padrões.

O público sairá da palestra com um ferramental que pode levar seus projetos de desenvolvimento front-end para um novo patamar de qualidade e organização.

Transcript

1. qCON SP, APril 24th, 2017 Styling a design system based on Bootstrap 4 and Web Components @andresgalante
2. Hola!
3. @andresgalante
5. pt_AR
7. qCON SP, APril 24th, 2017 Styling a design system based on Bootstrap 4 and Web Components @andresgalante CSS MODULARITY
8. Agenda Good CSS Architecture The PatternFly Use Case Q&A Design Systems CSS Specificity Shadow DOM
11. Um argentino incomoda muita gente…
12. Design systems. The road to consistency and modularity. LEt’s Start…
13. “A design system is everything that makes up your product.” – Mark Otto https://speakerdeck.com/mdo/build-your-own-bootstrap
14. Consistency
15. – Jakob Nielsen “...when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experiences” https://www.nngroup.com/articles/top-10-mistakes-web-design/
16. 5 + 8 = ?
17. 5 + 8 = 13
18. 123 + 34 = ?
19. 123 + 34 = 157
20. 123 + 34 = ?
21. 123 + 34 = 157
22. Cache Memory
23. Average attention span of a human: 2000: 12 seconds 2015: 8 seconds http://www.statisticbrain.com/attention-span-statistics/
24. http://www.statisticbrain.com/attention-span-statistics/ 9 seconds
27. Modularity
28. http://atomicdesign.bradfrost.com/chapter-4/
29. http://atomicdesign.bradfrost.com/chapter-4/
30. http://atomicdesign.bradfrost.com/chapter-4/
31. CSS Villains Globally operating Very leaky Dependent on location Based on inheritance
32. CSSSpecificity
33. How the browsers decides which CSS declaration is the most relevant to apply to an element. CSS Specificity
34. If one selector is more specific than another, it overrides it. If two selector share the same weight, the later one is applied. CSS Specificity
35. Selector Weight Selector Weight Example Type Selector 1 p { … } Class Selectors 10 .success { … } ID Selectors 100 #header { … } Inline Styles 1000 <p style=“color: red”>
36. p.success { color: green; } !important;
38. Demo Specificity
39. Class Type Selectors IDs Class Inline styles IDs !important all of them.
40. https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
41. ShadowDOM good CSS
42. Web Components
43. https://www.w3.org/standards/techs/components#w3c_all ShadowDOM Custom Elements HTML Imports HTML Templates Web Components
44. Encapsulate all of their HTML and CSS. JavaScript behaviours are native on the browser. Web Components
45. Shadow Dom
46. Custom elements + Shadow DOM = Self contained HTML, CSS and JS
49. CSS
50. The ShadowRoot A shadow root is a document fragment that gets attached to a “host” element.
51. Demo ShadowRoot
52. ShadowDOM Light DOM + Shadow DOM = Composed DOM <slot> <p>text<p> LightDOM Distributed Node
53. <slot> Placeholders inside your component that users can fill with their own markup.
54. Demo Slots
55. Stylin’ the Shadow DOM
57. Life Life Life Life as a parent
59. CSS selectors from the outer page don’t apply inside your component. Styles defined inside don’t bleed out. They’re scoped to the host element.
60. :host(<selector>) selector Allows you to target the host if it matches a <selector>. ::host-context(<selector>) selector Matches the component if it or any of its ancestors matches <selector>. :slotted(<compound-selector>) selector Matches nodes that are distributed into a <slot>
61. Demo host and slotted selectors
63. https://www.polymer-project.org/ https://www.webcomponents.org/
64. http://caniuse.com/#feat=shadowdomv1
65. https://platform-status.mozilla.org/#shadow-dom https://developer.microsoft.com/en-us/microsoft-edge/platform/status/shadowdom/
66. webcomponents.org
67. Shadow DOM Excellent name Scoped Styles Modular components Bad browser support
68. Let’s write really good CSS! CSS GUIDELINES
69. 4 Rules to keep your CSS tidy Write great CSS documentation 1 2 3 4 Use a global namespace Use BEM Keep selectors flat
70. Use a namespace to avoid conflicts. 1
71. .pf-masthead { color: white; }
72. BEM syntax {{block}}__{{element}}--{{modifier}} https://en.bem.info/methodology/ 2
73. .pf-masthead .pf-masthead__section .pf-masthead--inverse Block Element Modifier
74. Use flat Selector to avoid specificity issues. https://en.bem.info/methodology/ 3
75. Whenever possible don’t nest selectors Use classes, never IDs Never use !important
76. Write good CSS docs for a correct CSS implementation. 4 https://github.com/patternfly/patternfly-css/blob/master/.github/DOCUMENTATION_TEMPLATE.md
77. Class name: .classname Applied to: <element> Outcome: what does it do? Required: Yes or no Remarks: General remarks Accessibility: role, aria and a11y comments
78. <header class="pf-masthead">
79. Class name: .pf-masthead Applied to: <header> or <div> Outcome: Initiates a masthead Required: Yes Remarks: Always use it with the grid Accessibility: role=”navigation”, skip link, etc
80. Lint CSS!
81. https://houndci.com
82. OOCSS & BEM Vanilla CSS Transparent structure Modular components It can go wrong really fast
84. PatternFly Putting everything together USE CASE
86. Custom Elements: Shadow DOM: yes! not now.
87. https://patternfly-webcomponents.github.io/
88. CSS PatternFly Guidelines https://github.com/patternfly/patternfly-css/blob/master/CODE-GUIDELINES.md
90. Bootstrap 4 is awesome = happy me
92. Demo PatternFly masthead
93. …and they all live happily ever after.
94. Muito Obrigado :) github.com/patternfly slack.patternfly.org patternfly.org @andresgalante