Como encontrar CSS morto e otimizar estilos

Conheça uma técnica simples e de baixíssimo custo para identificar CSS morto e otimizar o código e performance de projetos web. Você vai se surpreender!

Diquinhas marotas de CSS Grid (parte 2)

Último artigo da série com dicas e macetes (muitas vezes) não tão óbvios sobre CSS Grid para aprimorar as habilidades em layouts para web.

hack flex-grow 9999: o hack de Flexbox que você precisa conhecer

Flexbox guarda muitas surpresas. Conheça o hack flex-grow 9999 e pergunte-se como você conseguiu trabalhar com Flexbox por tanto tempo sem saber disso!

O poder de flex-grow em Flexbox

Conheça uma maneira de usar flex-grow, uma das propriedades de Flexbox, para a solução de um problema comum de front-end.

CSS Blocks: introdução à API

Veja neste artigo uma introdução à API de CSS Blocks e comece a entender porque este é um dos melhores compiladores CSS da atualidade.

LinkedIn anuncia CSS Blocks, o novo otimizador de CSS

Saiba mais sobre CSS Blocks, o novo projeto open source da LinkedIn de um otimizador CSS que promete contribuir muito para o desenvolvimento front-end.

Diquinhas marotas de CSS Grid (parte 1)

Conheça dicas e macetes (muitas vezes) não tão óbvios sobre CSS Grid e aprimore suas habilidades no melhor que o front-end tem a oferecer para layouts.

A maneira 100% correta de fazer breakpoints em CSS

Depois de anos usando breakpoints, será que a maioria dos desenvolvedores front-end realmente já pararam para pensar se estão fazendo do jeito certo?

Curso “Flexbox: o guia completo”

Aprenda Flexbox e domine uma das melhores tecnologias CSS para criação de layouts modernos e elementos de UI responsivos!

Porque CSS Grid é melhor que Bootstrap para criar layouts

Com o advento de CSS Grid, o framework front-end Bootstrap pode não ser mais tão necessário… Saiba mais sobre os poderes de CSS Grid para layouts.

Responsive Components: uma solução para container queries

Conheça Responsive Components, uma solução para componentes responsivos que resolve o problema de Container Queries e pode ser usada imediatamente!

Minicurso grátis “Sass placeholders: o jeito certo”

Saiba mais sobre o minicurso grátis para aprender a usar placeholder selectors do jeito certo e construir uma biblioteca de utilitários CSS.

Curso “CSS Grid: o sistema definitivo de layouts”

Aprenda CSS Grid Layout e desenvolva layouts de maneira surpreendente!

16 dicas de Sass para facilitar sua vida (parte 1)

Conheça dicas Sass que podem mudar sua maneira de usar o melhor pré-processador CSS da atualidade

Curso “CSS: um passo adiante”

Eleve seu CSS ao próximo nível com CSSOO, SMACSS, BEM, Pré-processadores CSS, Namespaces CSS e Task Runners!

Motion UI: 4 formas de usar animação funcional

Interfaces animadas/Motion UI são ponto imprescindível para UX. Conheça 4 formas de usar animação funcional em projetos web.

Você não precisa de um framework CSS Grid

Com o advento de CSS Grid Layout, não demorou muito para surgirem frameworks de Grid. Mas há considerações importantes a serem feitas.

Imagem de largura total em layout com limite de largura

Conheça a solução mais simples e eficiente para ter imagem de largura total em layout com largura limitada.

CSS @supports: detecção nativa de suporte a propriedades CSS

Saiba mais sobre CSS @supports, diretiva CSS que permite detectar o suporte de navegador para propriedade de estilo. Ideal para progressive enhancement.

Desmistificando o CSS crítico “acima da borda”

Usar CSS crítico inline “acima da borda” é uma técnica infalível? Leia mais para saber que a melhor resposta para dilemas web continua sendo “depende”.

Unidades de viewport: controle de tipografia em web design responsivo

Saiba como ter controle absoluto de tipografia em web design responsivo através de unidades de viewport.

UX em validação de formulários com HTML e CSS

Conheça técnicas simples de HTML e CSS que podem incrementar (e muito!) a UX em validação de formulários.

Livro “CSS Eficiente”

O livro “CSS Eficiente” traz conceitos imprescindíveis ao dia-a-dia e apresenta técnicas para construir uma Arquitetura CSS profissional.

Imagens responsivas com srcset e sizes

Conheça mais sobre srcset e sizes, seus novos amigos na hora de implementar imagens responsivas

Flexbox

Use Flexbox para levar a criação de layouts CSS ao próximo nível: saiba mais sobre Flexbox através de explicações detalhadas e exemplos de código.

Unidades de CSS moderno: rem, vh, vw, vmin, vmax, ex, ch

Conheças as unidades de CSS moderno (rem, vh, vw, vmin, vmax, ex, ch) e saiba como e quando aplicá-las.

Pré-processadores CSS e Chrome DevTools

Aprenda como usar o potencial máximo da DevTools ao trabalhar com pré-processadores CSS.

UIkit: framework front-end modular responsivo

UIkit é um framework responsivo modular de front-end projetado para ser leve e simples de se usar. Veja mais informações e conheça seus componentes.

Webshims Lib: Polyfills de recursos de HTML5 e CSS3

Conheça a Webshims Lib e saiba como ter polyfills de recursos de HTML5 e CSS3 carregados sob demanda!

Filtros CSS3

Saiba como é possível usar os incríveis filtros CSS3 para efeitos como blur, greyscale, brilho, matiz, saturação e mais. Conheça o poder dos novos filtros CSS3!

Como melhorar a performance do site limpando HTML, CSS e imagens

Aprenda como melhorar a performance e tempo de carregamento do site limpando HTML, CSS e imagens e fazendo um bom planejamento de recursos.

Escrevendo CSS eficiente

Escrever CSS performático e de qualidade é algo que nem todos desenvolvedores front-end sabem fazer. Se você se encaixa neste grupo, leia o artigo!

Usando Modernizr para detectar features de HTML5 e CSS3

Conheça e aprenda a usar Modernizr, biblioteca JavaScript que permite detectar features de HTML5 e CSS3 do navegador e prover soluções, caso necessário.

Não use IDs como seletores CSS

À primeira vista, pode parecer estranho não usar IDs como seletores em CSS, mas, através argumentos bem embasados, entenda porque isso é verdade.

URLs longas apresentadas corretamente com CSS

Apresentar corretamente URLs e outros textos longos é essencial para um layout consistente e de qualidade. Saiba como fazer isso lendo este artigo!

Diferenças entre IDs e Classes

Aprenda a diferença entre IDs e classes, usados em XHTML, CSS e javascript. Saber a diferença entre classes e IDs evita erros básicos e permite desenvolver sites melhores

CSS float: considerações, dicas e macetes para bons layouts na web

Aprenda sobre CSS float e veja dicas e macetes para fazer bons layouts para a web usando tableless