Zen Coding - HTML/CSS z prędkością światła (cz.II)
W pierwszej części artykułu przedstawiłem Zen Coding jako niezwykłe ułatwienie w pracy kodera. Dowiedzieliśmy się, m.in. jak za pomocą jednej linijki pseudokodu napisać cały dokument HTML. Dziś przyjrzyjmy się rozwiązaniom, które przyspieszą naszą pracę z CSS. Zapraszam do lektury!
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:
1 2 3 | <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:
1 | 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:
1 | bg |
w rozwinięciu (Ctrl+E) daje nam, jak się zapewne domyślacie:
1 | 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:
1 2 | bg+bd+ |
przyjmują w rozwinięciu typowe wartości, które wprawny koder jest w stanie zmodyfikować wielokrotnie szybciej, niż wprowadzić je "z palca".
1 2 | 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?
1 2 3 4 | mpmbpt |
Nie powinno Was zaskoczyć, że w rozwinięciu otrzymamy:
1 2 3 4 | margin:;padding:;margin-bottom:;padding-top:; |
Zen Coding przewiduje również skróty dla wartości artybytów. Przyjrzyjmy się poniższym przykładom:
1 2 3 4 5 | d:nm:0ff:sfw:bfs:i |
Nietrudno się domyśleć, że otrzymamy następujący kod:
1 2 3 4 5 | 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:
1 2 3 4 | -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:
1 | 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.
Szukasz szybkiego hostingu z dyskami SSD? Dobrze trafiłeś.
Pakiety hostingowe Kylos to sprawdzone i niezawodne rozwiązanie dla Twojej strony.
Darmowy okres próbny pozwoli Ci sprawdzić naszą ofertę, bez ponoszenia kosztów.
Sprawdź nas