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
Tweet

More Decks by Andres Galante

Other Decks in Design

Transcript

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

    on Bootstrap 4 and Web Components @andresgalante
  2. qCON SP, APril 24th, 2017 Styling a design system based

    on Bootstrap 4 and Web Components @andresgalante CSS MODULARITY
  3. “A design system is everything that makes up your product.”

    – Mark Otto https://speakerdeck.com/mdo/build-your-own-bootstrap
  4. – 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/
  5. Average attention span of a human: 2000: 12 seconds 2015:

    8 seconds http://www.statisticbrain.com/attention-span-statistics/
  6. How the browsers decides which CSS declaration is the most

    relevant to apply to an element. CSS Specificity
  7. 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
  8. Selector Weight Selector Weight Example Type Selector 1 p {

    … } Class Selectors 10 .success { … } ID Selectors 100 #header { … } Inline Styles 1000 <p style=“color: red”>
  9. CSS

  10. The ShadowRoot A shadow root is a document fragment that

    gets attached to a “host” element.
  11. ShadowDOM Light DOM + Shadow DOM = Composed DOM <slot>

    <p>text<p> LightDOM Distributed Node
  12. 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.
  13. :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>
  14. 4 Rules to keep your CSS tidy Write great CSS

    documentation 1 2 3 4 Use a global namespace Use BEM Keep selectors flat
  15. Write good CSS docs for a correct CSS implementation. 4

    https://github.com/patternfly/patternfly-css/blob/master/.github/DOCUMENTATION_TEMPLATE.md
  16. Class name: .classname Applied to: <element> Outcome: what does it

    do? Required: Yes or no Remarks: General remarks Accessibility: role, aria and a11y comments
  17. 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