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

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

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

June 02, 2017

More Decks by Andres Galante

Other Decks in Technology


  1. DEVCAMP, JUNE 2th, 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. None
  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
  11. None
  12. None
  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

  32. None
  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
  51. None
  52. None
  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

  57. None
  58. Life Life Life Life as a parent

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

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

  69. ShadowDOM good CSS

  70. None
  71. PatternFly Putting everything together USE CASE

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

  76. None
  77. Bootstrap 4 is awesome = happy me

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