Entrar Ainda não tem acesso?
3
respostas

Padrão de desenvolvimento CSS

Referente ao curso HTML, CSS e JavaScript: Praticando com as tecnologias da Web

por Thiago Medeiros
| 118.7k xp | 28 posts
Programador

Olá pessoal.

Acompanhando o curso, observei um pouco o jeito de escrever CSS que o instrutor usa, ele tem um padrão para desenvolver cada parte da página e um CSS para cada parte da página. Ex: um CSS para uma única DIV, que contenha menus, etc.

Estou vendo mais afundo CSS agora, mas neste padrão de organização ainda não tinha visto, e achei bem interessante, organizado e fácil de manutenir.

Também achei interessante o jeito que o instrutor falava dos elementos HTML e como alcançá-los com o CSS, falando sobre elemento pai e filho, me pareceu um pouco com POO.

Gostaria de entender melhor estes padrões (se é que são) e a melhor maneira de escrever CSS. O instrutor falou muito pouco sobre, só explicou o que usou, gostaria de algum artigo, ou livro que detalhe mais sobre esta organização de arquivos CSS.

Grato.

3 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Thiago isso varia muito, cada um tem sei jeito de escrever e organizar css, podemos ver por exemplo o bootstrap onde separa os arquivos de acordo com os atributos ou seja, tem um arquivo panel.css, grid.css, alert.css.

Particularmente defini alguns padrões, utilizo da mesma forma que o bootstrap, para cada recurso css tenho um arquivo: block.scss, alert.scss, form.scss, button.scss, declaro as regras css em ordem alfabéticas:

.a {
    // regras
}
.exemplo {
    background: #FFFFFF;
    border: 1px solid #DCDCDC;
    float: left;
    font-size: 1rem;
    width: 100%;
}
.outro {
    // regras
}

Também uso as cores sempre com 6 digitos em hexadecimal, você pode encontrar mais no artigo do tableless: http://tableless.com.br/principios-para-escrever-css-de-forma-consistente/

Espero ter ajudado

por Natan Souza
| 2101.7k xp | 3699 posts
Instrutor Product Design Lead

Outro link interessante é essa palestra do Rafael Rinaldi sobre esse tema (Arquiteturas CSS).

Na Caelum e no curso presencial de JS usamos uma versão modificada do BEM, mas a ideia é a mesma.

por Natan Souza
| 2101.7k xp | 3699 posts
Instrutor Product Design Lead

Oi Thiago,

Conseguimos te ajudar com a sua dúvida?

Se sim, não esqueça de marcar uma das respostas como solução, para darmos o tópico como solucionado, ok?

Abcs!