CSS Architecture

    Resumo/Informações
    • Antes de começar um projeto, devemos arquiteta-lo.

    THINK
    • Component Driven Design
      a) Em CSS, tentamos dividir nossa página em Modular building blocks.
      b) Modular building blocks that make up interfaces.
      c) Held together by the layout of the page.
      d) Re-usable across a project, and between different projects.
      e) Independent, allowing us to use them anywhere on the page.

    BUILD
    • After thinking about the design, we need to code the design using HTML and CSS.
    • In this step it is important to have a consistent strategy and stucture for naming our classes.
    • Approaches for naming classes:
      a) Object-oriented CSS
      b) S Max
      c) BEM

    • BEM
      Block Element Modifer
      a) BLOCK: quando um componente é importante sozinho, por exemplo, um btn, que pode ser reutilizado.
      Standalone component that is meaninful on its on. Por exemplo: header.
      b) ELEMENT __ : quando o elemento não é útil sozinho, como por exemplo um btn__info.
      Nesse caso, como btn__info somente gera um style para a informação daquele botão específico, não podendo ser reutilizado.
      c) Modifier -- : uma versão diferente de um block ou element.
      Por exemplo: temos btn--round.
      btn: cria um botão.
      round: aplica border-radius.
      btn é um block e round é um modifier desse block, fazendo com que esse btn seja redondo, e portanto modificando a classe btn.

      Por exemplo, temos o header:
      <header class="header">
      <div class="header__logo-box">
      <img src="img/logo-white.png" alt="logo" class="header__logo">
      </div>

      <div class="header__text-box">

      Veja que até aqui, temos:
      header, sendo block.
      header__logo-box, sendo um element.
      header__logo, sendo um element.
      Elements são classes que não possuem serventia sozinhas, que foram feitas para algo especifico.
      Portanto, nesse caso são elements que só possuem serventia ao block header, por isso ficam com dois __, demonstrando serem elements.

      <h1 class="heading-primary">
      <span class="heading-primary--main">Outdoors
      <span class="heading-primary--sub">Is where life happens
      </h1>

      Veja que até aqui, temos:
      heading-primary, sendo um block.
      heading-primary--main, sendo um modifier.
      heading-primary--sub, sendo um modifier.
      Modifiers adicionam algo a classe, o que a modifica. Nesse caso, adiciona elementos de tamanho de fontes.

      <a href="#" class="btn btn--white btn--animated">Discover our tours
      </div>

      Aqui, temos:
      btn, como block, visto poder ser utilizado em outras partes do código.
      btn--white, como modifier.
      btn--animated, como modifier.
      Novamente, as classes com dois -- indificando serem modifers, adicionando propriedades a classe block btn.

      </header>