Zen Coding: Como escrever html e css em alta qualidade

Veja neste artigo como você pode melhorar de forma considerável o tempo de desenvolvimento de seus projetos com a utilização do Zen Coding.

por Vinicius Moraes

Salve, salve, galera do linha de código. Vamos imaginar o seu chefe ou coordenador todos os dias perguntando quando o projeto vai ser entregue e pedindo uma maneira rápida para você ganhar tempo no desenvolvimento front-end. Em resumo, pedindo o famoso “pastel client-side”, rsrs. E aproveitando essa oportunidade lanço a campanha no twitter #ñSouPasteleiroDev.

O que é Zen Coding?

Zen Coding é um plugin para editores de html e css como o notepad++, sublime text 2, Aptana, Komodo Edit e muitos outros. No artigo de hoje, será explicado o funcionamento do plugin.

Através de abreviações simples, podemos criar expressões que são similares à CSS seletores e com uma linha de comando apenas, podemos criar uma estrutura para um menu com submenu em html, estruturar as novas tags do html5 dentro da página e muitos exemplos que acontece no dia-a-dia do front-end e back-end. Codificar diferentes linguagens nunca foi tão simples e rápido. Uma ferramenta importante para o desenvolvimento de aplicações web.

Atualmente o Zen Coding suporta as linguagens: CSS, HTML, XML / XSL e HAML via filtros. Com uma lista de editores que suporta o plugin Zen Coding: Aptana, Zend Studio, Eclipse, TextMate, Coda, Komodo Edit/IDE, Notepad++, Sublime Text 2, Dreamweaver e Netbeans.

IMPORTANTE: Todos os exemplos criados abaixo no Sublime Text 2. Para executar uma linha de expressão do plugin Zen Coding no editor, copie e cole no editor o exemplo, div>main>ul>li*3 e no final de cada linha um TAB para imprimir.

Com o conhecimento do Zen Coding você vai:

1. Codificar e editar linguagens mais simples;
2. Otimizar o tempo de realização da sua aplicação web;

Listagem 1: exemplo de abreviação em html, com expressão compilada.

//Expressão certa:
header>nav>ul>li*5>a[title=""]

//Expressão errada:
header > nav > ul > li * 5 > a[title=""]

/* Dica: Se existir espaços na sua expressão, não vai funcionar corretamente. 
Nesse caso o plugin vai identificar separadamente cada elemento e compilar. 
Lembre-se de olhar cada abreviação antes compilar. */

/* html compilado */
<header>
	<nav>
		<ul>
			<li><a href="" title=""></a></li>
			<li><a href="" title=""></a></li>
			<li><a href="" title=""></a></li>
			<li><a href="" title=""></a></li>
			<li><a href="" title=""></a></li>
		</ul>
	</nav>
</header>

Abreviatura de #ninjaHTML

Listagem 2: exemplo com os atributos ID e CLASS.

article#main+aside.box

/*Irá imprimir*/
<article id="main"></article>
<aside class="box"></aside>

Listagem 3: exemplo de atributos personalizados.

table#tabela[cellpadding="0" cellspacing="0"]>tr>td[colspan="2"]

/*Irá imprimir*/
<table id="tabela" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2"></td>
	</tr>
</table>

Listagem 4: exemplo de multiplicação de elemento.

footer>nav*2>ul>li*5

/*Irá imprimir*/
<footer>
	<nav>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</nav>
	<nav>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</nav>
</footer>

Listagem 5.1: numeração com caractere $, será trocado pelo número especificado na multiplicação.

li.item$*4

/*Irá imprimir*/
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>

Listagem 5.2: caractere $ múltiplos na expressão são usados como zeros.

li.item$$$

/*Irá imprimir*/
<li class="item001"></li>

Listagem 6: exemplo de grupos de expressões ilimitado em uma única linha.

div>(header>nav>ul>li*3>a)+article>(h1+h2)

/*Irá imprimir*/
<div>
	<header>
		<nav>
			<ul>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
			</ul>
		</nav>
	</header>
	<article>
		<h1></h1>
		<h2></h2>
	</article>
</div>

Listagem 7: exemplo de abreviatura com texto, declare {} e dentro coloque o texto.

a[title="Clique Aqui"]{clique aqui para avançar}

/*Irá imprimir*/
<a href="" title="Clique Aqui">clique aqui para avançar</a>

Abreviatura de #ninjaCSS

Dica: Baseado em especificação CSS nível 3.

Para um melhor entendimento das abreviaturas para css, acesse o link

Listagem 8: Exemplos de regras especiais e algumas propriedades que normalmente são usadas.

@m
@i
@f
pos:r
bxsh:m
bxsh:w
m:4
maw
bdrs
bg+
bg:ie

/*Irá imprimir*/
@media print {
	
}
@import url();
@font-face {
	font-family: ;
	src: url();
}

position: relative;
-moz-box-shadow: 0 0 0 0 #000;
-webkit-box-shadow: 0 0 0 #000;
margin: 0 0 0 0;
max-width: ;
border-radius: ;
background: #FFF url() 0 0 no-repeat;
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src=' x.png',sizingMethod=' crop');

Listagem 9: Exemplo de funcionamento do HTML com Zen Coding

/*HTML*/
div.main>(header>a[title="logotipo"]+nav>ul>li*3>a[title="" rel=""])+article>(header>hgroup>h1+h2)+footer>(nav>ul>li>a[title=""])+p.copyright

/*Irá imprimir*/
<div class="main">
	<header>
		<a href="" title="logotipo"></a>
		<nav>
			<ul>
				<li><a href="" title="" rel=""></a></li>
				<li><a href="" title="" rel=""></a></li>
				<li><a href="" title="" rel=""></a></li>
			</ul>
		</nav>
	</header>
	<article>
		<header>
			<hgroup>
				<h1></h1>
				<h2></h2>
			</hgroup>
		</header>
		<footer>
			<nav>
				<ul>
					<li><a href="" title=""></a></li>
				</ul>
			</nav>
			<p class="copyright"></p>
		</footer>
	</article>
</div>

Assista o vídeo: Esse vídeo foi criado por Sergey Chikuyonok, um desenvolvedor front-end. Defensor da otimização de tempo no processo de trabalho com desenvolvimento web.

Concluo aqui este artigo cujo objetivo foi apresentar o plugin Zen Coding e mostrar exemplos do funcionamento do ZC, uma ferramenta para otimizar o desenvolvimento e tornar mais simples o trabalho do front-end.

Até a próxima.