Aqui vão 10 dicas do line25.com para soluções simples no seu código CSS

@media

@media screen and (max-width: 960px) {
 /* Seus estilos aqui */
}

As regras @media, conhecidas como media queries, estão associadas com a criação de websites responsivos. São aqueles designs que se adaptam ao formato de tela de cada dispositivo, ou o tamanho da janela do navegador. Faça uma media query usando as propriedades do tipo min-width para que as regras se apliquem a um determinado tamanho de tela.

Todos os navegadores modernos suportam este tipo de regras. Os antigos (IE6,7,8), infelizmente não entendem as regras em media queries, de modo que elas não serão passadas a eles. Mas é possível suportá-los com uma solução em javascript chamada Respond.js.

background-size

body {
 background: url(image.jpg) no-repeat;
 background-size: 100%;
}

Uma propriedade considerada extremamente útil, e que atualmente tem suporte em todos os navegadores. Antes fazer com que uma imagem se ajustasse ao seu elemento pai podia custar muito javascript e testes, mas agora basta uma linha para se obter o efeito de imagem de fundo em tela cheia.

Atenção: certifique-se de que a sua imagem de fundo permanece legível ao acessar seu site em navegadores que não suportam essa propriedade, como o IE8. Também é recomendado que, ao usar background-image, use-se uma cor de fundo alternativa para o caso de a imagem de fundo não ser carregada.

@font-face

@font-face {
 font-family: Blackout;
 src: url("assests/blackout.ttf") format("truetype");
}

Já existem muitas fontes novas e distribuídas gratuitamente para se usar com @font-face. Você pode usar esse código para incorporar fontes disponíveis gratuitamente ao seu site, ou usar um serviço como o Google Webfonts ou Typekit.

Para atender as inconsistências de implementação nos diferentes navegadores, não são necessárias soluções de programação, bastando fornecer a mesma fonte em diferentes formatos: WOFF é preferencial, seguido de TTF e EOT (para o Internet Explorer). Use o Font Squirrel Generator para converter fontes que você tem licensa para usar. Veja abaixo um exemplo de regra para servir fonte incorporada ao site que vai funcionar em todos os navegadores:

@font-face {
 font-family: 'MinhaFamiliaDeFontes';
 src: url('minhafonte.eot?#iefix') format('embedded-opentype'), 
 url('minhafonte.woff') format('woff'), 
 url('minhafonte.ttf') format('truetype'),
 url('minhafonte.svg#nomeDaFonteSVG') format('svg');
 }

margin: 0 auto;

#container {
 margin: 0 auto;
}

A inteligente declaração margin: 0 auto; é o que faz o container principal do site ficar centralizado na janela. Surpreendentemente, nunca houve nas especificações das CSS uma forma de centralizar um elemento. Mas nós acabamos descobrindo a solução na margem automática. Adicione margin: 0 auto; para centralizar um bloco dentro de seu elemento pai.

overflow: hidden

.container {
 overflow: hidden;
}

Existem todo tipo de soluções para limpar os floats, mas uma forma pura e simples de preservar o alinhamento do layout quanto há elementos fluídos lateralmente é declarar overflow: hidden; no container dos elementos que terão float. Nenhum peso adicional no site e funciona perfeitamente em 90% dos casos.

.clearfix

.clearfix:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}

Para os casos em que overflow: hidden; não resolve, use a técnica do clearfix. Não precisa usar o nome clearfix para suas classes. Faça seu código com as regras acima e aplique a classe ao layout em container que tem elementos fluídos.

color: rgba();

.btn {
 color: rgba(0,0,0,0.5);
}

Imagens PNG eram a única solução para dar efeitos de transparência, até que o CSS teve o avanço de implementar o modo de cores RGBa (a de alfa). Usando RGBa em vez de valores hexadecimais, você pode selecionar os valores de vermelho, verde e azul, além de um canal alfa, declarando, por exemplo, 0.5 para 50% de opacidade.

input[type="text"]

input[type="text"] {
 width: 200px;
}

O formato de seletores como input[type="text"] e outros seletores avançados representam um passo para o nível avançado de CSS. Seletores de atributos são muito úteis para estilizar elementos de acordo com determinadas condições sem a necessidade de criar novas classes. Muitos seletores são suportados inclusive pelas versões antigas do Internet Explorer.

transform: rotate(30deg);

.title {
 transform: rotate(30deg);
}

Embora não tenha muita utilidade prática, certas manipulações de elementos sem a necessidade de Javascript merecem ser lembradas. Pode-se criar ótimos efeitos de animação ao combinar rotação com transições CSS.

a {outline: none;}

a {outline: none;}

Sabe aquela linha pontilhada que aparece ao redor de um link ou outro elemento de interação ao ser clicado, estragando a beleza do seu layout? Declare {outline: none;} para removê-la, mas por questões de acessibilidade, não se esqueça de adicionar o estado :focus para os seus links. Se o problema não é a linha pontilhada e sim que ela não envolva a tela toda, declare {overflow: auto; } na sua folha de estilos.