CategoryCSS

Artigos e códigos interessantes em CSS

Afinal, usar ou não seletores IDs no css ?

css

Eu uso. #prontofalei. Lógico que uso, e vou continuar usando.

Continue reading

Object Oriented CSS – A teoria das classes reutilizáveis – OOCSS

css

Por quê ?

A base da teoria oocss é algo que todos nós depois de alguns layouts recortados já devemos ou deveríamos nos ter deparado e notado: duplicação de estilos.

Uma sensação de dejavu, onde elementos diferentes e não relacionados, começam a declarar alguns estilos semelhantes, como cor de fundo, estilo de borda, família ou cor da fonte.. coisas desse tipo.
Continue reading

Afinal, como nomear IDs e CLASSes no CSS/HTML ?

Somos incentivados a usar UpperCamelCase para nomear classes em OOP, usamos lowerCamelCase nos nomes dos métodos, não podemos usar dash-case em nomes de variáveis (erro de sintaxe), por isso usamos underscore_case.. mas saindo do mundo backend, e voltando para o frontend, afinal, como nomear ids e classes no css/html ?

a
Continue reading

Otimização de imagens com media queries

Otimizando imagens

Já sabemos que:

  1. o smushit comprime imagens sem perda de qualidade;
  2. servir imagens a partir de um subdomínio ajuda enganar o browser para então aumentarmos o paralelismo;
  3. se esse subdomínio for cookieless melhor ainda;
  4. o servidor nginx no lugar do apache, é mais recomendado para assets;
  5. se configurarmos eTags no servidor os assets irão cachear;
  6. devemos ter gzip para que sejam servidos arquivos menores;
  7. devemos ter certeza de que não há nenhuma requisição inválida, afinal o browser perde um tempo considerável ao buscar um recurso com erro, e isso impacta na performance do site.

Mas hoje em dia, temos que nos preocupar também com os diversos tamanhos de tela, por isso, não faz sentido deixar nosso visitante fazer download de uma imagem gigante que não apareça na tela dele.

Servindo imagens específicas

As nossas novas amigas media queries podem nos ajudar nessa otimização de imagens. E para isso, me apoio num comportamento inteligente dos browsers modernos.
Continue reading

Tableless: Como posicionar elementos de um layout – Recorte CSS

Sim, um tema básico aqui no blog. Ou talvez nem tanto.
Diariamente vejo diversos desenvolvedores se enrolando com essa questão: “Como estruturar um layout css?”, ou “Por que tableless é tão difícil?”, e “Por que no Chrome/Internet Explorer, não fica igual?”

Continue reading