Pilares para construir um bom HTML e CSS.
Tags: webdev, css, html, frontend
Published: 2023-11-22 09:47:45




 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…

**LAYOUT**: Onde definimos o layout geral.
|– _navigation.scss  # Navigation
|– _grid.scss        # Grid system
|– _header.scss      # Header
|– _footer.scss      # Footer
|– _sidebar.scss     # Sidebar
|– _forms.scss       # Forms
|   ...                  # 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!_