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. DEVCAMP, JUNE 2th, 2017 Styling a design system based on Bootstrap 4 and Web Components @andresgalante
2. Hola!
3. @andresgalante
5. pt_AR
8. qCON SP, APril 24th, 2017 Styling a design system based on Bootstrap 4 and Web Components @andresgalante CSS
9. !important;
10. Agenda Good CSS Architecture The PatternFly Use Case Q&A Design Systems CSS Specificity Shadow DOM
13. Um argentino incomoda muita gente…
14. Design system: The road to consistency and modularity. LEt’s Start…
15. “A design system is everything that makes up your product.” – Mark Otto https://speakerdeck.com/mdo/build-your-own-bootstrap
16. Consistency
17. – 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/
18. Average attention span of a human: 2000: 12 seconds 2015: 8 seconds http://www.statisticbrain.com/attention-span-statistics/
19. http://www.statisticbrain.com/attention-span-statistics/ 9 seconds
20. Modularity
21. http://atomicdesign.bradfrost.com/chapter-4/
22. http://atomicdesign.bradfrost.com/chapter-4/
23. http://atomicdesign.bradfrost.com/chapter-4/
24. Modular design system = Better consistency
25. CSS Villains Globally operating Very leaky Dependent on location Based on inheritance
26. CSSSpecificity
27. !important;
28. How the browsers decides which CSS declaration is the most relevant to apply to an element. CSS Specificity
29. 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
30. Selector Weight Selector Weight Example Type Selector 1 p { … } Class Selectors 10 .success { … } ID Selectors 100 #header { … } Inline Styles 1000 <p style=“color: red”>
31. p.success { color: green; } !important; TYPE 1 CLASS 10 SELECTOR WEIGHT 11 = +
33. Demo Specificity
34. Class Type Selectors IDs Class Inline styles IDs !important all of them.
35. ShadowDOM good CSS
36. Good CSS
37. 2 actions to keep your CSS tidy 1 2 Create modular components Keep specificity low
38. BEM syntax {{block}}__{{element}}--{{modifier}} https://en.bem.info/methodology/ 1
39. .pf-masthead .pf-masthead__section .pf-masthead--inverse Block Element Modifier
40. Use flat Selector to avoid specificity issues. https://en.bem.info/methodology/ 2
41. Whenever possible don’t nest selectors Use classes, never IDs Never use !important
42. Lint CSS!
43. https://houndci.com
44. OOCSS & BEM Vanilla CSS Transparent structure Modular components It can go wrong really fast
45. ShadowDOM good CSS
46. Web Components
47. https://www.w3.org/standards/techs/components#w3c_all ShadowDOM Custom Elements HTML Imports HTML Templates Web Components
48. Encapsulate all of their HTML and CSS. JavaScript behaviours are native on the browser. Web Components
49. Shadow Dom
50. Custom elements + Shadow DOM = Self contained HTML, CSS and JS
53. CSS
54. The ShadowRoot A shadow root is a document fragment that gets attached to a “host” element.
55. Demo ShadowRoot & slots
56. Stylin’ the Shadow DOM
58. Life Life Life Life as a parent
60. 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.
61. :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>
62. Demo host and slotted selectors
64. https://www.polymer-project.org/ https://www.webcomponents.org/
65. http://caniuse.com/#feat=shadowdomv1
66. https://platform-status.mozilla.org/#shadow-dom https://developer.microsoft.com/en-us/microsoft-edge/platform/status/shadowdom/
67. webcomponents.org
68. Shadow DOM Excellent name Scoped Styles Modular components Bad browser support
69. ShadowDOM good CSS
71. PatternFly Putting everything together USE CASE
73. Custom Elements: Shadow DOM: yes! not now.
74. https://patternfly-webcomponents.github.io/
75. CSS PatternFly Guidelines https://github.com/patternfly/patternfly-css/blob/master/CODE-GUIDELINES.md
77. Bootstrap 4 is awesome = happy me
79. Demo Bootstrap grid & masthead
80. …and they all live happily ever after.
81. Muito Obrigado! github.com/patternfly slack.patternfly.org patternfly.org @andresgalante