Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.


Andres Galante

April 24, 2017

More Decks by Andres Galante

Other Decks in Design


  1. qCON SP, APril 24th, 2017 Styling a design system based

    on Bootstrap 4 and Web Components @andresgalante
  2. Hola!

  3. @andresgalante

  4. None
  5. pt_AR

  6. None
  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
  9. None
  10. None
  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

  25. None
  26. None
  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;

  37. None
  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
  47. None
  48. None
  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

  56. None
  57. Life Life Life Life as a parent

  58. None
  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

  62. None
  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

  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

  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
  83. None
  84. PatternFly Putting everything together USE CASE

  85. None
  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

  89. None
  90. Bootstrap 4 is awesome = happy me

  91. None
  92. Demo PatternFly masthead

  93. …and they all live happily ever after.

  94. Muito Obrigado :) github.com/patternfly slack.patternfly.org patternfly.org @andresgalante