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!
Top comments (1)
Ótimas dicas Andrea!
Como você mencionou é o escopo do projeto que vai ditar quais dicas são necessárias e quais podem ser deixadas de lado e pra isso acontecer é preciso ter um conhecimento básico que elas existem e como funcionam, nesse sentido postagens como essa fazem a diferença para quem está começando 😄