Arquitetura SASS para elevar o nível do seu projeto.
Imagine esta situação: você precisa urgentemente alterar a cor de um botão que está destoando completamente do design padrão da plataforma. Você abre seu editor de código, localiza o arquivo HTML, procura pelo botão… e, para sua surpresa, percebe que ele não possui nenhuma classe atribuída.
Como pode um elemento não ter classe, mas ainda assim ter um estilo aplicado? Após alguns minutos de busca, você descobre que existe uma pseudoclasse global que afeta todos os botões na plataforma. Após essa descoberta, você cria uma classe orfã exclusivamente para aquele botão ou insere os estilos inline.
Nesse meio tempo, o Brasil poderia muito bem ter sofrido 7 gols da Alemanha novamente e você ainda não teria finalizado essa mudança. Diferentemente do 7–1 do Brasil X Alemanhã, o Padrão 7–1 do SASS pode te ajudar a economizar tempo e marcar um golaço na hora de abrir aquele pull request.
Por que utilizar o Padrão 7–1?
Quando seu código SASS está desorganizado, você acaba perdendo mais tempo procurando arquivos do que realmente aplicando modificações no estilo. Imagine-se navegando por um mar de arquivos, numa busca incansável para o estilo específico que precisa ser ajustado… Esse cenário não apenas consome um precioso tempo, mas também pode resultar em frustações e diminuição da produtividade.
Manter um projeto com uma arquitetura e organização é extremamente importante! É como construir uma casa sobre uma fundação sólida: se a estrutura inicial não for bem estabelecida, cada ajuste futuro se torna uma batalha árdua - Isso torna-se ainda mais desafiador em um ambiente colaborativo, onde diferentes mãos podem moldar e remodelar o código ao longo do tempo.
O padrão 7–1 do SASS não é apenas uma metodologia de organização de arquivos! Podemos considerar ele como uma bússola que guia os desenvolvedores através da clareza de sua organização. Ao adotar o padrão 7–1, você está investindo não apenas na estrutura do seu código, mas em uma produtividade geral.
Podemos considerar o padrão 7–1 como um supermecado bem organizado, onde cada produto tem o seu lugar designado. O padrão 7–1 é como um repositor que categoriza cada produto, facilitando a busca e futuras referências. Ele estabelece uma hierarquia clara de arquivos, separando preocupações de forma lógica e intuitiva.
Organização de arquivos
Esse padrão consiste em 7 pastas e 1 ficheiro. O ficheiro (geralmente chamado main.scss) é o ficheiro que importa todos os outros ficheiros parciais que devem ser compilados em uma única folha de estilo.
As 7 pastas são:
- base
- components
- layout
- pages
- themes
- abstract
- vendors
O ficheiro único é:
- main.scss
Cada pasta desempenha um papel crucial em termos de utilidade e organização dentro de um projeto. É crucial ressaltar a importância da conformidade com as nomenclaturas estabelecidas. As sete pastas devem seguir rigorosamente essas nomenclaturas padrão: "base", "components", entre outras. Isso assegura a manutenção de uma consistência e reconhecimento em diversos projetos.
No arquivo principal, todos os estilos parciais serão importados usando a diretiva @import, consolidando, assim, nossa estrutura de estilos.
Vamos entender o que cada pasta faz e sua especificação…
Antes de prosseguir, gostaria de mencionar que disponibilizei o código no GitHub. Fique à vontade para explorá-lo e utilizá-lo da maneira que julgar mais adequada.
yagopeixinho
/
sass-7-1-pattern
Arquitetura SASS para elevar o nível do seu projeto.
Arquitetura SASS para elevar o nível do seu projeto.
Introdução • Contato • Licença
O Padrão 7-1 do SASS
Imagine esta situação: você precisa urgentemente alterar a cor de um botão que está destoando completamente do design padrão da plataforma. Você abre seu editor de código, localiza o arquivo HTML, procura pelo botão… e, para sua surpresa, percebe que ele não possui nenhuma classe atribuída.
Como pode um elemento não ter classe, mas ainda assim ter um estilo aplicado? Após alguns minutos de busca, você descobre que existe uma pseudoclasse global que afeta todos os botões na plataforma. Após essa descoberta, você cria uma classe orfã exclusivamente para aquele botão ou insere os estilos inline.
Nesse meio tempo, o Brasil poderia muito bem ter sofrido 7 gols da Alemanha novamente e você ainda não finalizou essa mudança. Diferentemente do 7–1 do Brasil X Alemanhã, o Padrão 7–1 do SASS pode…
Base
A pasta base/ contém estilos básicos e padrões para o projeto. Aqui você pode encontrar um arquivo _reset.scss e possivelmente uma folha de estilo como _base.scss, que cuida de estilos para toda a aplicação.
Layout
Na pasta layout/ estão os estilos para o layout da aplicação. Isso inclui folhas de estilo padrão como _header.scss, _footer.scss, _sidebar.scss, bem como estilos relacionados ao layout, como grades e contêineres.
Components
A pasta components/ é dedicada aos componentes que podem ser reutilizados nas páginas. Exemplos de componentes incluem button.scss, modals.scss, cards.scss. É importante notar a diferença entre Components e Layout. Enquanto o Layout trata dos layouts globais da página, a pasta Components lida com componentes menores e reutilizáveis.
Pages
A pasta pages/ contém estilos específicos para páginas individuais. Por exemplo, você pode encontrar um arquivo de estilo como _home.scss ou _login.scss
Themes
Para aplicações maiores que requerem suporte a vários temas, a estrutura reserva uma pasta para esses temas. Aqui você pode incluir estilos para diferentes temas utilizados na aplicação.
Abstract
A pasta abstract/ lida com todas as ferramentas e utilitários do SASS que podem ser utilizados em todo o projeto. Isso inclui arquivos como _variables.scss, _mixins.scss, _functions.scss, entre outros.
Vendors
Na pasta vendors/ estão contidos conteúdos externos, como CSS de bibliotecas ou frameworks externos, por exemplo, Normalize, Bootstrap, JQueryUI, etc. Os arquivos de inclusão desses estilos podem ser nomeados como _normalize.scss, _bootstrap.scss, etc.
Entendemos para que servem as 7 pastas. Vamos entender sobre o ficheiro principal?
main.scss
O ficheiro principal (normalmente chamado de _main.scss) também sendo o único ficheiro que não possui underscore.
Nesse ficheiro não deve conter nada além de imports de outros ficheiros - Isto pois, é importante preservarmos a legibilidade no ficheiro principal.
Para preservar a legibilidade, o arquivo principal deve respeitar estas diretrizes:
- Um arquivo por @import;
- Um @import por linha;
- Sem nova linha entre dois @imports da mesma pasta;
- Uma nova linha após o último @import de uma pasta;
- Extensões de arquivo e underscores iniciais omitidos.
Abaixo vemos um exemplo de um arquivo main.scss
/********************
** Abstracts **/
@import "./abstracts/mixins";
/********************
** Base **/
@import "./base/reset";
/********************
** Components **/
@import "./components/dialogs";
@import "./components/inputs";
/********************
** Layout **/
@import "./layout/header";
@import "./layout/sidebar";
/********************
** Pages **/
@import "./pages/login";
/********************
** Themes **/
@import "./themes/default";
/********************
** Vendors **/
@import "./vendors/normalize";
Para ver mais desse código, clique aqui.
Estrutura final de um projeto com o Padrão 7–1
A seguir, apresento um exemplo de estrutura de arquivos seguindo o Padrão 7–1 do SASS. É evidente que cada arquivo está devidamente posicionado em sua respectiva pasta. A organização e a divisão de pastas são intuitivas e facilitam a compreensão da estrutura.
sass/
|
|– base/
| |– _reset.scss # Reset/normalização
| |– _typography.scss # Regras de tipografia
| ... # Etc...
|
|– components/
| |– _buttons.scss # Botões
| |– _carousel.scss # Carrossel
| |– _dropdown.scss # Dropdown
| ... # Etc...
|
|– layout/
| |– _navigation.scss # Navegação
| |– _grid.scss # Sistema de grid
| |– _header.scss # Cabeçalho
| |– _footer.scss # Rodapé
| |– _sidebar.scss # Barra lateral
| |– _forms.scss # Formulários
| ... # Etc...
|
|– pages/
| |– _home.scss # Estilos específicos para a página inicial
| |– _contact.scss # Estilos específicos para a página de contato
| ... # Etc...
|
|– themes/
| |– _theme.scss # Tema padrão
| |– _admin.scss # Tema de administração
| ... # Etc...
|
|– utils/
| |– _variables.scss # Variáveis Sass
| |– _functions.scss # Funções Sass
| |– _mixins.scss # Mixins Sass
| |– _helpers.scss # Auxiliares de classes e placeholders
|
|– vendors/
| |– _bootstrap.scss # Bootstrap
| |– _jquery-ui.scss # jQuery UI
| ... # Etc...
|
|
`– main.scss # Arquivo principal do SASS
Conclusão
Ao adotar o Padrão 7–1 do SASS, os desenvolvedores não apenas organizam seus projetos de forma eficiente, mas também estabelecem um método claro e intuitivo de gerenciar seus estilos.
Assim como a Branca de Neve é acompanhada pelos 7 anões, o arquivo principal de estilo main.scss também é acompanhado por suas 7 pastas, cada uma com suas próprias responsabilidades e especificidades, da mesma forma que cada anão tem suas características únicas.
Mantenha suas pastas estruturadas, e seu código organizado :)
Top comments (1)
Muito bom!