Rails: Segmentando CSS por telas

Sites muito grandes acabam por ter arquivos CSS enormes, e que mesmo divididos em várias partes e utilizando @import, são carregados em todas as páginas e podem causar atraso no carregamento de páginas.

Não seria ideal que, por exemplo, nossa página de login possua uma folha de estilo própria, mas que este CSS seja carregado apenas quando estivermos na página de login? Seria, e é isso que vou abordar neste artigo, um pequeno mas útil truque, que aprendi em um dos videocasts da Railscasts.com.

A ídeia é bem simples, o rails possui uma tag chamada stylesheet_link_tag que cria um link para uma folha de estilos. Ela aparece geralmente no arquivo de layout escolhido, o que para quem não conhece o rails, é como se fosse o template principal, e todo conteudo gerado é encaixado dentro deste.

Isto funciona muito bem pois as folhas de estilo deve ser declaradas na tag HEAD do HTML. Porém, se formos declarar as folhas de estilo no template de cada tela, não temos mais acesso a esta tag, pois tudo que esta no template será incluído dentro da tag body do layout, onde aparece a tag <%= yield %>

O primeiro passo é com o uso da função yield, mas desta vez iremos passar um parametro para ela, com isso estaremos criando um bloco nomeado, onde o conteúdo que definirmos será renderizado.

  Título <%= yield(:head) %> 

Agora devemos criar uma forma de inserir novas folhas de estilo neste nosso bloco, com uma chamada limpa, para mantermos a sintaxe limpa do rails e do ruby, podemos fazer algo assim no arquivo, por exemplo, login.html.erb:

 <% stylesheet 'login' %> 

Agora devemos definir esta função. Iremos definir ela no arquivo de helpers da applicação, assim ela estará disponível em toda a aplicação. Esta função deve utilizar a mesma tag que geralmente usamos para adicionar folhas de estilo, mas o conteudo gerado deve ser focado para o bloco “:head"que criamos, usando a função content_for. Ficaria algo assim:

 def stylesheet(\*args) content\_for(:head) { stylesheet\_link\_tag(\*args) } end 

Pronto. agora você pode definir a folha de estilo de uma tela no próprio template, organizando seus CSS melhor e evitando carregar regras ou arquivos desnecessários.