Design Concept
  1. Blog
  2. Zen Coding

Zen Coding

Niedawno dostałam linka do artykułu poświęconego zagadnieniu zen coding. Po jego przeczytaniu stwierdziłam, że pisanie kodu dzięki niemu staje się dużo… szybsze. Wystarczy trochę poeksperymentować z demonstracyjnym edytorem. Czym właściwie jest Zen coding? Jest to zestaw narzędzi pozwalający na szybkie tworzenie dokumentów html i css używając składni podobnej do CSS. Napisany przez nas „zenowy” kod jest rozwijany za pomocą odpowiednich narzędzi wbudowanych w edytor na właściwy kod. Napisana w technologii zen poniższa linijka 

html:xt>div#header>div#logo+ul#nav>li.item-$*5>a
zostanie rozwinięta do 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
	<div id="header">
		<div id="logo"></div>
		<ul id="nav">
			<li class="item-1"><a href=""></a></li>
			<li class="item-2"><a href=""></a></li>
			<li class="item-3"><a href=""></a></li>
			<li class="item-4"><a href=""></a></li>
			<li class="item-5"><a href=""></a></li>
		</ul>
	</div>
</body>
</html>
Aż trudno uwierzyć prawda? Poniżej przestawiam jeszcze kilka przykładów. 
tarea

<textarea></textarea>

link:css

<link rel="stylesheet" type="text/css" href="style.css"/>

script:src
<script type="text/javascript" src=""></script>

div#blok>span.tytul

<div id="blok"><span class="tytul"></span></div>
Zen coding oferuje nie tylko rozwijanie składni html, ale również css np. 
p:0

padding:0;

bd:n

border:none;
Zachęcam do odwiedzenia strony projektu. Na stronie znajduje się między innymi wykaz edytorów, które oferują wsparcie dla zen coding oraz wykaz skrótów i ich rozwinięć.