Padrão de desenvolvimento CSS | HTML, CSS e JavaScript: Praticando com as tecnologias da Web

3
respostas

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

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

30/06/2016

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

| 2095.3k xp | 3689 posts

Instrutor Product Design Lead na Alura

01/07/2016

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

| 2095.3k xp | 3689 posts

Instrutor Product Design Lead na Alura

15/07/2016

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!