Pilares para construir um bom HTML e CSS.

Andrea Nozaki — Wed, 22 Nov 2023 09:47:45 +0000

1- RESPONSIVIDADE 🖥️📱

Construir um website que funciona em todos os tamanhos de telas. Fluid layouts, media queries , responsive images, correct units, desktop-first ou mobile-first.

2- Manutenção e Escalabilidade ⚙️🚀

Escrever um código que possa ser sustentável e escalável , significa escrever codigo limpo, fácil de entender, que suporte o crescimento futuro.
Para isso precisamos pensar na arquitetura CSS, que é a maneira que organizamos nossos arquivos, como nomeamos nossas classes e como estruturamos nossa marcação em HTML.

3- Web Performance 🌐

Significa torná-lo mais rápido e menor em tamanho, de modo que o usuário possa baixar menos dados.

Oque podemos fazer:

Fazer o menor numero possíveis de solicitações HTTP, oque significa colocar o menor número possível de arquivos em nosso documento HTML.
Usar pre-processador como o Sass.
Reduzir o numero de imagens, usando somente as necessárias.

4- BEM-Block Element Modifier 🔎

Converter o HTML no sistema BEM.
BEM selectors

.block {}
Portanto, primeiro, no BEM, um bloco é um componente independente que
é significativo por si só.componentes
independentes que podem ser reutilizados em
qualquer lugar do projeto.

.block__element{}
Em seguida, um elemento faz parte de um bloco e
não tem significado por si só,é um elemento específico dentro do bloco. Elementos são partes menores e dependentes do bloco.Temos a mesma palavra no código todo, com isso cria seletores com especificidades muito baixas.

.block__element—modifier{}
Por último, temos o modificador, e o
modificador é um sinalizador que podemos colocar em um bloco ou elemento para torná-lo diferente dos blocos ou elementos regulares.

5- Arquitetura 🏛️
Existem algumas mas vou dar o exemplo da 7-1 Pattern.

Éuma abordagem específica para organizar arquivos Sass em sete pastas diferentes.
THE 7 FOLDERS:
BASE- Onde colocamos as definições básicas do produto(reset, estilos para elementos html padrão)
|– _reset.scss # Reset/normalize
|– _typography.scss # Typography rules
| ... # etc…

COMPONENTS: Onde temos um arquivo para cada componente.
|– _buttons.scss # Buttons
|– _carousel.scss # Carousel
|– _cover.scss # Cover. | _dropdown.scss # Dropdown
... # etc…

PAGES: Onde temos estilos para paginas especificas do projeto.
|– _home.scss # Home specific styles
|– _contact.scss # Contact specific styles
| ... # etc…

THEMES: Onde deve implementar diferentes temas visuais.
|– _theme.scss # Default theme
|– _admin.scss # Admin theme
| ... # etc…

ABSTRACTS: Onde colocamos codigo que nao gera CSS, como variáveis ou mixins.
_variables.scss # Sass Variables
|– _functions.scss # Sass Functions
|– _mixins.scss # Sass Mixins
| ... #etc

VENDORS: Onde todo CSS de terceiros estará lá.
|– _bootstrap.scss # Bootstrap
|– _jquery-ui.scss # jQuery UI
| ... # etc…

E claro:
main.scss

O arquivo principal (geralmente chamado de main.scss) na raiz do projeto é responsável por importar todos os parciais dessas pastas, criando assim o arquivo CSS final.

NEM SEMPRE PRECISAMOS USAR TODAS, VAI DEPENDER DO TAMANHO E DO ESCOPO DO PROJETO.

📚Essas são alguns tópicos que acho muito importante para que possamos construir um bom html e css e decidi compartilhar para ajudar quem está começando agora, espero que tenha gostado do artigo ☺️

Bons estudos!

Forem: Andrea Nozaki

Pilares para construir um bom HTML e CSS.