Architecture

    Architecture
    • Create a logical folder and file stucture for our CSS to live in.
    • Methods:
      a) ITCSS.
      b) S Max.
      c) 7-1 Pattern (feito para grandes projetos).

    • No 7-1 Pattern, temos 7 pastas diferentes, onde colocamos arquivos parciais de Sass e uma pasta de Sass principal, onde importamos todos os arquivos parciais em um arquivo final de CSS stylesheets compilado.
      Os arquivos dentro das pastas começam com um underline _nomeFile para que sejam importadas dentro do main Sass.
      Após criar os arquivos, escrever @import base/base; no main Sass.

      ** No final, a file main.scss somente terá de conteúdo os @import com essas pastas abaixo.
      1) base: basic product definitions.
      a)_base.scss
      Conteúdo: definições básicas da página, como os elementos definidos para o *, html, body.
      b)_animations.scss
      Conteúdo: animações, como @keyframes.
      c)_typography.scss
      Conteúdo: fontes, ajustes de fontes.
      d)_utilities.scss
      Conteúdo: classes que podem ser reutilzadas, visto serem úteis no geral. Exemplo: uma classe que irá centralizar o texto, que será utilizada em todas as divs que precisam de texto centralizado.
      Normal colocar todos os conteúdos dentro dessa página com !important, visto que quando aplicamos algum deles, realmente queremos que eles sejam aplicados.

      2) abstracts: where we put code that doesn't output any CSS, such as variables or mixins.
      a)_functions.scss
      b)_mixins.scss
      c)_variables.scss
      3) components: where we have one file for each component. They are our reusable building blocks that make up the website or apps. They should also be usable anywhere on the page, so that they are completely independent and they are held together by the layout of the page.
      a)
      Conteúdo: por exemplo, um button, visto ele ser um block que pode ser util e utilizado em todos os locais da página.
      4) pages: styles for specific pages of the project.
      5) themes: for when we want to implement different visual themes.
      6) layout: where we define the overall layout of the project.
      Conteúdo: global footer, header, visto ser layout que irá afetar todas as páginas do website.
      7) vendors: where all third party CSS goes (like bootstrap, icons, animations framework).