DEV Community

Cover image for Pilares para construir um bom HTML e CSS.
Andrea Nozaki
Andrea Nozaki

Posted on • Edited on

1 1

Pilares para construir um bom HTML e CSS.

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!

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (1)

Collapse
 
vanessatelles profile image
Vanessa Telles

Ó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 😄