Dicas para padronizar seus códigos e arquivos CSS - #1

Destaque

Existe uma camada no desenvolvimento de aplicações web que possibilita deixar projetos lindos e maravilhosos. Estou falando do CSS, essa linguagem espetacular que trouxe literalmente vida as nossas páginas Web.

E essa linguagem de formatação precisa de um carinho todo especial quando se vai codificá-la, pois é ela que trará toda a beleza para seu projeto.

Existem diversas técnicas espalhadas por ai visando a melhor escrita e padronização de seus arquivos e códigos CSS. O objetivo desse artigo não é mostrar as várias técnicas, mas sim mostrar as melhores no qual eu tenho obtido mais resultados positivos em meus projetos. Irei dividir o artigo em 2 para que a leitura não fique muito cansativa e extensa.

Com a adoção dessas técnicas você terá os seguintes benefícios:

  • Código escalável;
  • Maior produtividade;
  • Fácil manutenção;
  • Legibilidade;
  • Organização.

O mais interessante em seguir algumas técnicas de padronização do CSS, é que se você trabalha em equipe, o código parecerá que somente uma pessoa o escreveu, ficando muito mais confortável a manutenção. Veja a seguir algumas dicas:

Modularização

Você pode modularizar tanto os arquivos como o próprio código criando blocos de estilos que poderão ser reutilizados em todo o projeto.

Modularizando arquivos

A modularização de arquivos é uma técnica muito funcional e facilita a manutenção do código. Ela não é recomendada para projetos pequenos, pois seria inviável, a quantidade de código é muito baixa e exigiria retrabalho.

Agora para projetos maiores é interessante modularizar, pois você terá um controle maior sobre a estilização do projeto.

É possível utilizar a modularização de diversas formas. Confira esse artigo que fala de forma mais detalhada sobre esse assunto.

No meu dia a dia como trabalho muito com desenvolvimento de sites, gosto de modularizar por sessão.

Isso porque eu consigo ter um controle maior na estilização responsiva do site. Permite também um código mais escalável, pois você consegue alterar a estilização das sessões sem correr o risco de atrapalhar outras. Caso ocorra algum empecilho, você saberá exatamente qual arquivo procurar para consertar, evitando assim, ficar rolando uma estrutura enorme de código CSS para corrigir uma coisa simples.

Modularização por sessão

Em alguns projetos modularizo por página, mas somente em projetos onde algumas páginas tem elementos muito diferentes das outras.

Na modularização de arquivos, você terá que trabalhar com um arquivo que importará todos os outros. Gosto de chamá-lo de geral.css, é ele que você deve chamar no cabeçalho de sua index.

Modularizando código

Essa é uma técnica bastante difundida entre os frameworks CSS e também pode ser chamada de OOCSS ou CSS Orientado a Objeto. O objetivo principal é evitar escrever códigos repetidos, em vez disso você cria blocos de estilos comuns que poderão ser usados em toda aplicação e atribui esse estilo onde você achar necessário. Olha só um exemplo bem simples dessa técnica:

Primeiro você escreve a estrutura comum do elemento:

.alerta{
	width: 100%;
	padding: 15px;
	margin: 8px;
	font-size: 16px;
	text-align: center;
	border-width: 1px;
	border-style: solid;
}

Depois você cria as variações desse elemento permitindo utilizá-las em todas as sessões do seu projeto, bastando somente declarar na tag html o nome da classe de estrutura e a classe que fará as alterações.

.alerta-sucesso{
	border-color: #27ae60;
	color: #27ae60;
	background: #2ecc71;
}
.alerta-erro{
	border-color: #c0392b;
	color: #c0392b;
	background: #e74c3c;
}
<!-- Parágrafo com mesma estrutura mas na cor verde -->
<p class="alerta alerta-sucesso">
	<!-- conteudo -->
</p>
<!-- Parágrafo com mesma estrutura mas na cor vermelho -->
<p class="alerta alerta-erro">
	<!-- conteudo -->
</p>

Desta forma você pode reutilizar esse estilo em qualquer outro elemento html.

Comentários

Os comentários são excelentes para que você e outras pessoas consigam entender o que está acontecendo em determinado trecho de código. Por isso os comentários é um importante meio de documentação, e cabe a você adotar um padrão para todos os seus projetos.

Em CSS podemos fazer uso de vários tipos de comentário. Eu particularmente utilizo o padrão do Comment-Snippets, que é um snippet para Sublime Text.

Comentar bloco de sessões

/*=============================================
=            Section comment block            =
=============================================*/



/*=====  End of Section comment block  ======*/

Utilizo muito para envolver uma estilização específica de algum componente utilizado na aplicação.

Comentar sessões dentro do bloco.

/*=============================================
=            Section comment block            =
=============================================*/

Utilizo para comentar estilos de módulos que fazem parte de um componente.

Comentar Subsessões.

/*----------  Subsection comment block  ----------*/

Uso para comentar trechos específicos de algum comportamento de módulo.

Comentar trechos complexos

/**

    TODO:
    - First todo item
    - Second todo item

 */

Esse último uso para blocos que exijam uma documentação mais detalhada onde eu possa fazer quebras de linha.

Claro, essa forma que utilizo é um padrão que eu tenho adotado em meus projetos, mas você pode muito bem adaptar tranquilamente às suas necessidades, o importante é manter o padrão para que outro desenvolvedor não se descabele ao se deparar com seu código.

Espero que tenha gostado dessa 1º parte do artigo sobre padrões CSS. Na 2º parte pretendo falar sobre: Nomenclatura, Estrutura dos Seletores, Formatação e algumas outras técnicas que os devs tem usado por ai.


Viu algum erro, tem uma crítica ou sugestão, não hesite em deixar um comentário e compartilhar. Isso ajuda muito o blog ficar de pé.

Última modificação em Quarta, 28 Outubro 2015 18:00
(0 votos)
Lido 5093 vezes
Tags :

Deixe um comentário

Certifique-se de preencher os campos indicados com (*). Não é permitido código HTML.

Receba conteúdos exclusivos

Please wait