Zen Coding

As a developer, I’m always looking for ways to improve my coding practices and efficiency. In the programming world, I work almost completely with frameworks such as Zend and CodeIgnitor using MVC at it’s fullest. On the front-end, I’ve learned to use Blueprint CSS combined with semantic markup to standardize my layouts. But now, I’ve added another INCREDIBLE tool to my belt, and I want to share it with all of you as well.. Zen Coding

What is Zen Coding?

From a general perspective Zen Coding is simply the practice of making lightweight and reusable code to allow for peaceful coding and debugging (that’s my definition anyways). There has been a movement in the front-end development community towards finding new ways to use CSS with semantic markup in order to produce the desired layouts and styles. Now Sergey Chikuyonok has taken that to a whole new level. He’s reversed the idea of Zen Coding using HTML markup to generate CSS Selectors and allowed us to create our markup from using CSS Selectors. This might seem confusing, so lets look at some code:

Plain and simply put, the Zen Coding plugin (supported on multiple text editors) translates code like this:

div#header>ul.nav>li*5

into this:

<div id="header">
	<ul class="nav">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

.. and yet, this is still nothing folks! Dive in deeper over at Smashing Mag