Banner do post: Estruturando um projeto LESS

ūüáßūüá∑ Estruturando um projeto LESS

Published at: 04/09/2014

Uma das diversas vantagens de se utilizar um pré-processador de CSS é a possibilidade de se dividir o código em diversos arquivos durante o tempo de desenvolvimento, sem que isso afete a performance após sua compilação.

Dividir seu código em diversos arquivos ajuda a torná-lo mais compreensível e também facilita sua manutenção, pois quando seu chefe pedir aquela alteraçãozinha rápida de cada dia, você saberá exatamente onde procurar.

‚ÄúOne file to rule them all, One file to find them, One file to bring them all, And in the LESS way merge them.‚ÄĚ

- JRR Tolkien

Fa√ßa divis√Ķes l√≥gicas

Muitas vezes, devido à pressa, falta de interesse ou outros motivos a organização estrutural do projeto acaba sendo deixada de lado, porém perder 10 minutos com isso no início do projeto, é ganhar horas durante o desenvolvimento, sabendo exatamente onde está a propriedade de um componente específico que você precisa editar.

Sua estrutura não precisa ser completa, com diversos níveis e sub-níveis, aliás, você deve evitar isso. Procure manter uma estrutura simples, que irá facilitar a busca e deixará os arquivos bem separados e organizados.

Estrutura b√°sica

  less/
  |
  |- base/
  |   |- reset.less           # Reset/normalize
  |   |- typography.less      # Typography rules
  |   ...                     # Etc ...
  |
  |- components/
  |   |- buttons.less         # Buttons
  |   |- carousel.less        # Carousel
  |   |- cover.less           # Cover
  |   |- dropdown.less        # Dropdown
  |   |- navigation.less      # Navigation
  |   ...                     # Etc ...
  |
  |- helpers/
  |   |- variables.less       # Less Variables
  |   |- mixins.less          # Less Mixins
  |   |- helpers.less         # Class & Placeholders helpers
  |   ...                     # Etc ...
  |
  |- layout/
  |   |- grid.less            # Grid System
  |   |- header.less          # Header
  |   |- footer.less          # Footer
  |   |- sidebar.less         # Sidebar
  |   |- forms.less           # Forms
  |   ...                     # Etc ...
  |
  |- pages/
  |   |- home.less            # Home specific styles
  |   |- contact.less         # Contact specific styles
  |   ...                     # Etc ...
  |
  |- themes/
  |   |- theme.less           # Default theme
  |   |- admin.less           # Admin theme
  |   ...                     # Etc ...
  |
  |- vendors/
  |   |- bootstrap.less       # Bootstrap
  |   ...                     # Etc ...
  |
  |- main.less                # Less primary file

Detalhando a estrutura

O nome de cada diret√≥rio j√° deixa bem claro que tipos de arquivos ser√£o armazenados l√° dentro. Isso n√£o significa que essa estrutura √© imut√°vel, ela pode, e deve, ser alterada seguindo as necessidades do projeto, servindo apenas como um ponto de partida para quem est√° na situa√ß√£o de: ‚Äúmas eu tinha certeza que era essa linha que eu tinha que alterar‚ÄĚ.

Base

Neste diret√≥rio coloco alguns arquivos gerais, como um reset (eu uso o normalize.css), defini√ß√Ķes de tipografia, esquema de cores, entre outros.

Components

Aqui ficam alguns componentes que ser√£o utilizados em v√°rias p√°ginas da aplica√ß√£o como bot√Ķes, menu de navega√ß√£o, dropdowns, etc.

Helpers

Serve para armazenar arquivos com mixins, fun√ß√Ķes, vari√°veis e escalas.

Layout

Neste diretório ficam armazenados arquivos relacionados ao layout de componentes, como o header, footer, menu, sidebar, formulários e outros.

Pages

Aqui ficam os arquivos com estilos específicos para determinadas páginas da aplicação, home, contato, sobre, etc.

Themes

Se for o caso de ter diferentes temas para a aplicação, prefiro ter um diretório para manter os estilos em arquivos separados.

Vendors

Caso a aplicação use CSS de terceiros, eles ficam armazenados neste diretório e normalmente não são editados.

Como a m√°gica acontece?

Eu gosto de deixar apenas um arquivo no diretório raiz, ele que é responsável por importar todos os outros componentes da aplicação.

Meu setup

Eu tenho uma task configurada no Grunt para compilar um novo arquivo CSS sempre que um arquivo do diretório do LESS, ou de algum de seus sub-diretórios for modificado.

A base é essa, agora cabe a cada um adequar da melhor forma dentro do projeto, mantendo sempre uma coerência e buscando otimizar sua organização.