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!