Resposta: MUITO!
Vá para a demonstração: http://dabblet.com/gist/3333961
Uma dica muito legal que eu gostaria de compartilhar é ocultar / mostrar conteúdo usando pseudo seletores CSS. Na demonstração, temos uma caixa de seleção que mostra um parágrafo e oculta outro. A maior parte do trabalho é feito pelo ~
seletor, ele visa tudo o que vem depois do seletor anterior (no nosso caso, tudo que vem depois do elemento de entrada), é semelhante a, +
mas menos restritivo. Usamos os pseudo seletores :checked
e :not()
para mostrar ou ocultar nossos diferentes parágrafos.
É um truque muito legal e economiza algumas linhas de JS.
Às vezes, eu o uso em combinação com JS, quando um botão é pressionado, adiciono a active
classe a ele e tenho uma regra CSS para revelar mais conteúdo (é útil para barras de menu ocupadas e tal). Seria algo assim
.sub-menu {
display:none;
}
.btn.active + .sub-menu {
display:block;
}