Zen Coding - HTML/CSS z prędkością światła (cz.I)

 

Stara szkoła kodowania

Zanim odkryłem Zen Coding pisałem swój kod od podstaw, korzystając z dobrodziejstw snippetów i kolorowania składni, w które wyposażony jest Notepad++, mój ulubiony edytor. W ten sposób nauczyłem się kodować poprawnie i w miarę szybko. Wraz z rozwojem umiejętności przybywało mi zleceń i obowiązków. Usprawnienie pracy stało się sprawą priorytetową.

Czym (nie) jest Zen Coding?

Zen Coding to wtyczka do większości popularnych notatników i programów typu IDE. Pozwala na skrócony zapis kodu HTML i CSS i rozwijanie go w poprawny kod za pomocą zestawu skrótów klawiszowych. Dla przykładu, użyjmy skrótu Ctrl+e użyty na końcu następującej linijki:

#content>.article

W efekcie otrzymamy rozwinięcie w postaci kodu HTML:

<div id="content"></div>

Jak łatwo zauważyć, Zen Coding wykorzystuje zapis znany z CSS dla przedstawienia identyfikatorów i klas. Także koncept zastosowania znaku większości poprzedzającego elementy podrzędne jest nam doskonale znany. Przyjrzyjmy się nieco bardziej złożonemu przykładowi:

(#content>.article*2>h2+p+a.more)+#sidebar>.widget*3

w rozwinięciu otrzymamy:

<div id="content"></div>
&nbsp;
<div id="sidebar"></div>

Widzimy, że Zen Coding korzysta z podstaw arytmetyki, gdzie działania w nawiasie mają pierwszeństwo. Znak + oznacza w tym wypadku elementy równorzędne, czyli rodzeństwo. Gwiazdka (*) pozwala na multiplikację elementów. Prawda, że to banalne?

Zen Coding w praktyce

Łatwo sobie wyobrazić, jak dalece Zen Coding usprawnia pracę kodera. Szybka templatka pod WordPressa? Z Zen Coding mogę napisać cały HTML w jednej linijce. Nie wierzycie? Jednym z najmniej przyjemnych zadań kodera jest pisanie deklaracji dokumentu. Jasne, możemy użyć do tego celu templatki. Z Zen Coding nie ma jednak takiej potrzeby. Sprawę załatwia jedno polecenie:

html:xs

gdzie (xs) odpowiada wersji języka, w tym wypadku XHTML Strict W rozwinięciu otrzymamy więcej niż oczekujemy:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

Czy przykułem Waszą uwagę?

To nie wszystko!

Kolejną niezwykle przydatną funkcją jest możliwość owinięcia kodem HTML listy elementów tekstowych. Dla przykładu, użycie skrótu Ctrl+Shift+A przy zaznaczeniu następującej listy:

Element 1 
Element 2 
Element 3 
Element 4

otwiera okno dialogowe, w które wpisujemy dowolny skrót w formie znanej nam z poprzednich przykładów, np.

ul>li>a*

gdzie * jest informacją, że oznaczony nią element ma być multiplikowany. W efekcie otzymamy poprawny kod HTML wypełniony treścią.

<ul>
<li><a>Element 1</a>
<a>Element 2</a> 
<a>Element 3</a> 
<a>Element 4</a></li>
</ul>

Zen Coding usprawnia wiele innych operacji. Z jego pomocą możemy np. szybko odnaleźć zamknięcie elementu (Ctrl+M), ponumerować tworzone elementy, czy sprawnie przeskakiwać pomiędzy kolejnymi parametrami w celu ich wypełnienia lub edycji. Pełną listę poleceń Zen Coding znajdziecie w oficjalnym Cheat Sheet.

A co z CSS?

Zen Coding jest niezwykle przydatny także w pracy z CSS. Tym zajmiemy się jednak w drugiej części artykułu.

Co sądzicie o Zen Coding?

Jak podoba Wam się Zen Coding? Czy widzicie zastosowanie dla niego w swoim systemie pracy? A może znacie inne, lepsze i bardziej skuteczne rozwiązania. Dajcie nam znać w komentarzach!