Masterclass CSS3
Cascading Stylesheets vai muito além de pintar textos. É engenharia visual purista que exige responsividade atômica, variáveis escaláveis e performance 60FPS.
A Arquitetura OOCSS
O Object-Oriented CSS foca na separação de estrutura e pele (visual). Na NTL, utilizamos utilitários (como Tailwind) mesclados com classes de bloco (.form-group, .btn-primary) para agilizar telas repetitivas, ao mesmo tempo garantindo que a base se mantenha super enxuta e fácil de sobrescrever em projetos White-Label.
Variáveis Nativas (Custom Properties)
Variáveis CSS (ex: --primary-color) são reativas em runtime. Diferente do SCSS, você pode alternar de Dark Mode para Light Mode dinamicamente apenas mudando a cor root no JavaScript. A padronização da NTL prevê uma paleta estrita injetada no document.documentElement.
Modelos Híbridos de Layout
Flexbox é linear (1D). CSS Grid é bidimensional (2D). Você deve usar Flexbox para alinhar ícones, botões e barras de navegação (fluxos contínuos). E deve usar Grid obrigatoriamente para as estruturas da página, galerias e dashboards corporativos. Dominar o "grid-template-areas" é essencial para layouts semânticos.
Animações Guiadas por GPU
Jamais anime "width", "height", "top", "margin" ou "left". Estas propriedades causam o efeito Reflow e Paint no DOM (processamento pesado de CPU). Sempre interpole "transform" (translate, scale, rotate) e "opacity", ativando a aceleração de GPU (Compositing) a 60 FPS consistentes.
A Bíblia do Estilo
- Evite ao máximo a palavra impura !important. Suba a especificidade com combinadores aninhados se precisar.
- Mobile First: Seus Media Queries devem usar min-width (construindo de baixo para cima), reduzindo código inútil.
- Respeite o z-index. Crie um sistema indexado (10, 20, 30) ao invés de usar z-index 999999 quebrado.