Flexibilidade do CSS em ambientes de CMS

CMS ou Content Management System, significa Sistema de Gerenciamento de Conteúdo. São aqueles sistemas como o Contribute da Macromedia onde você o adapta a websites para que seu cliente que não sabe nada de HTML possa atualizar o próprio site sem a necessidade de “mão de obra” especializada. A cada dia grandes e pequenas empresas adotam a utilização destes sistemas para facilitar a atualização de conteúdo centralizando em um departamento de marketing por exemplo. As razões obvias disso é remover um dos passos no processo de atualização do site, reduzindo custos com terceiros e deixando a responsabilidade nas mãos do responsável pelo próprio conteúdo. Simples e eficiente.

Para os webdesigners que vão criar para estes ambientes eles tem um desafio um pouco maior. Existem alguns cuidados simples que podem ser observados ao estilizar e codificar um código XHTML, que facilite muito futuras manutenções. Geralmente os designers gostam de esbanjar classes e ids para ter total poder sobre cada elemento distinto em um site e provar que conseguem colocar tal elemento em qualquer lugar na página; puro pedantismo. Isso pode ser muito interessante quando se está aprendendo CSS ou quando se quer criar uma galeria de templates usando um mesmo código fonte como eu fiz no Revolução do CSS. É muito fácil estilizar uma página neste contexto estático (apesar que no Brasil parece ser poucos que conseguem isso), porque ela foi escrita para ser manipulada de qualquer jeito.

No mundo real, onde websites muitas vezes são feitos utilizando as tecnologias de CMS como o Uinet e o Contribute, o cliente não vai inserir classes e ids no conteúdo. A questão é: como tratar estilos de elementos que serão inseridos por estes administradores de conteúdo de forma dinâmica?

De um lado existem os webdesigners que lutam contra os editores CMS. Muitas vezes deixam de atender clientes por não oferecerem nenhum software de administração de conteúdo quando exigido e oferecem apenas websites estáticos que necessitam de atenção especializada para qualquer tipo de manutenção. Do outro lado está o cliente desejando ter o maior controle possível sobre o conteúdo de seu site, e esperando obter um produto final que não necessite de manutenção especializada, ou seja, um sistema de atualização de conteúdo que dê conta do recado nas mãos de quem não é desenvolvedor web. Discussões à parte, a cogitação é como criar folhas de estilos que possam sustentar conteúdo vindo de banco de dados e que foram cadastrados por sistemas de administração de conteúdo de forma eficiente?

Existem várias dicas importantes para criar estilos para conteúdos dinâmicos, que facilite a manutenção e a aceitação de conteúdo variado com um número variável de tags que o editor de conteúdo pode oferecer. Em primeiro lugar você deve conhecer bem o sistema CMS que será utilizado, conhecer suas limitações e qualidades para poder prever o que será inserido. Depois você tem que aprender a declarar seu CSS utilizando o conceito de pai e filho. Na verdade este conceito é muito básico e ironicamente poucas pessoas o aplicam corretamente. Os resultados são folhas de estilos gigantes e códigos com centenas de classes e declarações “sujas”. Quer a minha opinião? Então vamos por etapas.

Escrevendo um XHTML limpo

Procure escrever seu código XHTML separando todas as áreas distintas do seu site em módulos, dividindo-as por exemplo em navegação, header, rodapé, lateral e conteúdo. Claro que cada site terá uma estrutura diferente do outro, mas o importante é saber ter o controle por CSS sobre tags dentro de outros elementos que constituem a estrutura do site. Veja um exemplo que eu criei.

Declarando no CSS

Basicamente o exemplo exemplifica de forma prática como se pode organizar um código XHTML para facilitar sua estilização sem esbanjar classes desnecessárias. Talvez você esteja se perguntando como é possível ter um site criativo sem ficar colocando classes em diversos elementos. Isso vai depender do seu domínio de CSS e da sua criatividade. Nada de tags desnecessárias, classes ou IDs onde o conteúdo será dinâmico. Racionalmente a melhor saída é escrever todo o seu XHTML minimizando a quantidade de classes ou ids e pensando em estilizar para um ambiente onde será impossível inserir classes ou ids, ou seja, o local onde o conteúdo virá de um editor de um sistema do tipo CMS. Uma folha de estilos limpa e bem feita, depende muito de um código XHTML bem escrito.

Observe no exemplo que eu criei um ambiente para receber o conteúdo dinâmico e coloquei um id=”content”. Lá eu coloquei uma tabela, uma listagem ordenada, parágrafos e uma lista de definições. Poderia ter dezenas de outras tags, sempre se lembre disto. Por isso é importante conhecer bem o que o seu sistema CMS e o que ele pode oferecer, saber que tags geralmente ele insere, como ele trata conteúdo vindo de outros editores de textos, o que é bem comum, e criar estilos para esse ambiente.

A melhor maneira de declarar seu CSS é da seguinte maneira

	
	#content p { declaração: propriedade  ou valor; }
	#content strong { declaração:  propriedade ou valor; }
	#content table { declaração:  propriedade ou valor; }
        #content caption { declaração:  propriedade ou valor; }
	#content thead td { declaração:  propriedade ou valor; }
	#content thead th { declaração:  propriedade ou valor; }
	#content tbody td { declaração:  propriedade ou valor; }
	#content tbody th { declaração:  propriedade ou valor; }
	#content ul { declaração:  propriedade ou valor; }
	#content ul li { declaração:  propriedade ou valor; }
	#content ol { declaração:  propriedade ou valor; }
	#content ol li { declaração:  propriedade ou valor; }
	#content dl { declaração:  propriedade ou valor; }
        #content dt { declaração:  propriedade ou valor; }
	#content dd { declaração:  propriedade ou valor; }
 	

Dependendo do tamanho do site, com certeza, você encontrará tags como <strong>, <li>, <ul>, <p> etc em contextos distintos reservados para artigos, notícia, textos, post ou o que quer que seja. Os estilos de uma <ul> que represente o menu, será completamente diferente de uma listagem de itens de materiais escolar no conteúdo do site quem vem do sistema de CMS. No entanto ambas podem usar exatamente a mesma tag <ul>. Os estilos não devem ser iguais. Como declarar estilos para os diferentes contextos sem ficar colocando classes ou ids em qualquer lugar?

No exemplo, nós encontramos a tag <ul> no menu (header), em uma listagem no conteúdo e no rodapé. Todas elas estão dentro de “ambientes” previamente estabelecidos para que não haja conflito de estilos ao aplicá-los para a mesma tag em contextos diferentes. Isso é declaração de pai e filho. Elas poderiam ser declaradas da seguinte maneira:

	
	#header ul { declaração: propriedade  ou valor; }
	#content ul { declaração:  propriedade ou valor; }
	# rodape ul { declaração:  propriedade ou valor; }
  	

Neste exemplo você pode ter estilos diferentes para cada <ul> sem precisar ficar colocando classe em cada uma delas. Declarando assim, você pode criar estilos diferentes, para um mesmo elemento em contextos distintos. Assim é possível prever e simular conteúdos que podem ser inseridos através de um sistema CMS. Este é o desafio proposto pelo Chris Heilman no CSS Toolshed, que é mostrar que o CSS também pode ser flexível em contextos que utilizem sistemas CMS.

  • http://www.panacea.com.br luiz gabriel

    realmente acabar com a divs(nao totalmente claro) é mais dificil que acabar com as tabelas do layout no inicio, vira vicio, mas depois que vc entende o basico de posicionamento e o maravilhoso display:block, tudo se resolve :)

  • Henrique Boaventura

    Meus parabéns pelas matérias que ampliam muito nossos horizontes.

  • http://fatorw.com/ Walmar Andrade

    Muito bom o artigo, CMS é sempre problemática. Só vou fazer uma ressalva que não tem muito a ver com o artigo, mas sim sobre semântica. Você está usando o acronym com title toda vez que uma sigla aparece. Por exemplo, toda vez que o termo "CSS" aparece, você informa que são Cascade Style Sheets. Se não me engano, a maneira correta de fazer isso é dizer o que significa a sigla apenas na primeira vez que ela aparece. Depois, não precisa ficar repetindo. Keep it simple :)

  • http://revolucao.etc.br/css/ Henrique Costa Perei

    Walmar, no mundo real, em um jornal impresso por exemplo, é comum que um acrônimo seja explicado somente na primeira vez em que ele aparecer. Pelo menos é o que se espera do escritor.

    Na web eu procuro fazer o seguinte. Imagine que você está lendo um texto muito grande e não se lembra o que significa "SMS". No texto você pode ver que eu expliquei apenas na primeira vez que ele apareceu, mas no código eu coloquei em todos os lugares. Eu não vou fazer o leitor voltar no topo do artigo para saber o que significa CMS, se ele já se esqueceu do significado quando estiver quase no fim do artigo. Basta você colocar o mouse sobre o termo e você terá o significado dele.

    Outra grande razão para isso se chama "search engine relevance". O que é mais relevante para uma pessoa que faz uma busca no Google sobre Content Management System, um artigo que só traz uma única instância em todo o texto ou uma que tras dezenas delas?

  • http://cirofeitosa.com.br/ Ciro Feitosa

    Muito bom seu post. Um dos maiores problemas em se desenvolver um CMS (já desenvolvi), é a questão de oferecer editores WYSIWYG para os clientes poderem editar seus conteúdos. Atualmente uso o widgEditor, por ser simples e gerar códigos legíveis e acessíveis. Outro ponto, em se tratando de CMS, é gerar URLs de fácil leitura. Abraço! ;-)

  • Pingback: Hacks hack hacks! » Revolução()

  • alex rocha

    Pessoal,

    vendo os posts sobre CMS e CSS, gostaria de indicá-los o w3estudio, , definitivamente é um excelente CMS, é ideal para o gerenciamento do conteúdo do site da sua empresa, site pessoal e ajuda muito o trabalho dos desenvolvedores que têm a necessidade de desenvolverem sites diversos para seus clientes.

    com o w3estudio você pode utilizar Modelos (templates) que utilizam recursos de CSS sem limitação.

    você pode instalar o w3estudio no seu host (servidor de hospedagem) ou até mesmo no seu computador pessoal e pode exportar o site, sendo facilmente instalado em qualquer servidor de hospedagem, mesmo que não tenha o w3estudio.

    bem!!! vale a pena vocês conhecem o w3estudio e qualquer dúvida é só postar.

    ah, já ia me esquecendo! você pode participar do programa de parcerias da w3internet e desenvolver Modelos de sites (templates), recursos Extras (Plugins) e ganhar prêmios como MP3 player, iPod, etc.

    visistem:
    http://www.w3internet.com.br

    No mais um abraço a todos

  • Raquel Figueiredo

    Depois de ler este texto e iniciar-me recentemente nesta área tenho uma dúvida e agradecia muito ficar esclarecida.

    É que depois deste texto gostava de saber o que distingue uma ferramenta de autor (usada na produção de conteúdos) e um CMS. Podemos afirmar que um CMS integra a ferramenta de autor (criação de conteúdos) mais a parte da gestão dos mesmos?