Como organizamos o código front-end na Codeland

Feb 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ódigo — Dani 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!

home