Como organizamos o código front-end na Codeland

● filipe
3 min readFeb 3, 2015

Codeland?

A Codeland é uma empresa de desenvolvimento web de Porto Alegre, conta com uma galera muito maneira e cheia de idéias, se um dia tiver de bobeira e quiser trocar uma idéia com a gente, sera muito bem bem vindo :D.

Estou trabalhando na Codeland a quase 5 meses e quando eu cheguei não existia muito bem definido como funcionaria a organização do front. Depois de algumas conversar e analises sobre qual seria a melhor forma de fazer isso chegamos a um set de ferramentas e metódologias que eu irei mostrar pra vocês nesse post.

Começando

Começando pelo mais básico, assim é a organização nosso código e essas são as melhores práticas utilizadas para manter a consistência.

“Best Pactrices”

  • SCSS Syntax
  • Atomic Design.
  • BEM para nomenclatura.
  • Somente classes nada de ids.
  • Evitamos usar nesting, e se usar no máximo 3 níveis.
  • Organizamos as propriedades CSS com o CSS Comb.
  • Cores com Hexadecimal e unidades sempre px (em em alguns casos).

Ferramentas

Sass

Para lidar com o CSS utilizamos Sass. Ele fornece uma infinidade de features na hora de lidar com CSS como: variáveis, mixins, placeholders, functions. e muito mais. Isso agiliza bastante o nosso trabalho e também ajuda muito na hora da organização.

Slim

Como template engine usamos o slim, que em nossa opinião é a forma mais limpa e organizada de escrever html. Slim está para html como sass está para css, é simplesmente lindo!

Estrutura de pastas

Como havia comentado, usamos atomic design como metodologia para organizar, e é de lá que tiramos nossa estrutura de pastas.

Metodologias

Aqui totalmente caberia um novo post para ir a fundo em casa uma delas, então por hora escolhi deixar o link de um artigo do tableless para cada, assim se você se interessar pode dar uma conferida lá.

Bem um novo método para CSS Thaiana Poplade

Atomic design para organização do códigoDani Guerrato

Frameworks

Como framework base costumamos utilizar o já bastante utilizado bootstrap. Ele traz uma infinidade de components e estilos que são muito uteis, mas devem ser usados com sabedoria para no final das contas não ficar uma macarronada no código.

Concluindo

Na stack de front-end procuramos estar sempre atualizados com o que há de mais novo, as melhores tecnicas para e, principalmente, o que facilita e nos ajuda para melhor desenvolver nossos projetos. Espero que esse texto possa ajudar você a conhecer alguma metodologia ou ferramenta nova, e que tenham gostado de conhecer um pouco de como funcionam as coisas aqui na Codeland!

--

--