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

Dla przypomnienia

Zen coding jest wtyczką dla popularnych notatników i programów IDE, która pozwala na skrócony zapis kodu HTML. Z jej pomocą, następujący dokument HTML:

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

Możemy przedstawić jako pojedynczą linijkę, którą następnie rozwijamy skrótem Ctrl+E:

html:xs>(#header>ul>li*3>a)+(#content>.article>h1+p)

Zen Coding pozwala na inne operacje usprawniające pracę z HTML. Należą do nich owijanie listy elementów tekstowych dowolnym kodem HTML, parowanie znaczników czy numerowanie tworzonych elementów. 

Zen Coding a CSS

Prawdziwa siła Zen Coding objawia się jednak podczas pracy z CSS. Z uwagi na przeciętną ilość kodu CSS i jego powtarzalność, każde usprawnienie w tej materii przykuwa moją uwagę. Korzystając z Zen Coding przykładowy skrót:

bg 

w rozwinięciu (Ctrl+E) daje nam, jak się zapewne domyślacie:

background:;

Mało tego, Zen Coding ustawia kursor wewnątrz atrybuty, tak abyśmy od razu mogli wprowadzać wartości! Część atrybutów posiada także wartości domyślne wywoływane znakiem +. I tak na przykład poniższe skróty:

bg+
bd+

przyjmują w rozwinięciu typowe wartości, które wprawny koder jest w stanie zmodyfikować wielokrotnie szybciej, niż wprowadzić je "z palca".

background:#FFF url() 0 0 no-repeat;
border:1px solid #000;

Czyż nie jest to piękne?

Szybko i prosto

Wielką zaletą Zen Coding jest jej intuicyjność. Nie ma potrzeby uczenia się poleceń, bo składnię można wydedukować samodzielnie. Czy wiecie co oznaczają poniższe skróty?

m
p
mb
pt

Nie powinno Was zaskoczyć, że w rozwinięciu otrzymamy:

margin:;
padding:;
margin-bottom:;
padding-top:;

Zen Coding przewiduje również skróty dla wartości artybytów. Przyjrzyjmy się poniższym przykładom:

d:n
m:0
ff:s
fw:b
fs:i

Nietrudno się domyśleć, że otrzymamy następujący kod:

 
display:none;
margin:0;
font-family:serif;
font-weight:bold;
font-style:italic; 

Łatwość użytkowania Zen Coding nie przestaje mnie zaskakiwać. Jest jednak jedna podstawowa wada korzystania z tej wtyczki. Przesiadka na notatnik bez zainstalowanej Zen Coding wprawia mnie w chwilową konsternację. Czy nadal potrafię jeszcze pisać czysty CSS?

Rozwiń to jak chcesz

Zen Coding nie ogranicza się po stałego zestawu poleceń. Modyfikując pliki .js wtyczki możemy w łatwy sposób dodawać własne komendy. Jedną z bardziej denerwujących grup atrybutów są polecenia CSS3 korzystające z vendor prefixes. Dzięki mojej customowej komendzie zamiast pisać za każdym razem:

-webkit-border-radius: radius;
-moz-border-radius: radius;
-ms-border-radius: radius;
border-radius: radius;

co w krótkim czasie doprowadziłoby mnie do szaleństwa, piszę jedynie:

brad

Prawda, że sprytne?

Waszym zdaniem

Jakie atrybuty CSS dodalibyście do listy poleceń Zen Coding? A może macie inne rozwiązania, które pozwalają Wam kodować sprawniej? Koniecznie opiszcie je w komentarzach, chętnie je poznamy.