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.

03dc4f2e26e476958c952505c8d8f563?s=128

Andres Galante

June 02, 2017
Tweet

Transcript

  1. 1.

    DEVCAMP, JUNE 2th, 2017 Styling a design system based on

    Bootstrap 4 and Web Components @andresgalante
  2. 2.
  3. 4.
  4. 5.
  5. 6.
  6. 7.
  7. 8.

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

    on Bootstrap 4 and Web Components @andresgalante CSS
  8. 10.
  9. 11.
  10. 12.
  11. 15.

    “A design system is everything that makes up your product.”

    – Mark Otto https://speakerdeck.com/mdo/build-your-own-bootstrap
  12. 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/
  13. 18.

    Average attention span of a human: 2000: 12 seconds 2015:

    8 seconds http://www.statisticbrain.com/attention-span-statistics/
  14. 28.

    How the browsers decides which CSS declaration is the most

    relevant to apply to an element. CSS Specificity
  15. 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
  16. 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”>
  17. 32.
  18. 36.
  19. 37.

    2 actions to keep your CSS tidy 1 2 Create

    modular components Keep specificity low
  20. 42.
  21. 48.
  22. 51.
  23. 52.
  24. 53.

    CSS

  25. 54.

    The ShadowRoot A shadow root is a document fragment that

    gets attached to a “host” element.
  26. 57.
  27. 59.
  28. 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.
  29. 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>
  30. 63.
  31. 70.
  32. 72.
  33. 76.
  34. 78.