Code42 > HTML + CSS, Vim > Zen Coding – snippety do kosza

Zen Coding – snippety do kosza

Snippety do htmla? Nieeee. Zobaczcie Zen Coding. W skrócie działa to tak. Wpisuję w edytorze CSSową składnią:

div#content>h1+p

Wciskam jakąś kombinację klawiszy i dostaję:

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

Sprytne, nie? :) Ale to jeszcze mało. Spróbujcie tego:

div#top>h1>a[title=Do strony głównej]{Moja strona}<ul#menu>li.pos$*3>a
<div id="top">
    <h1>
        <a href="" title="Do strony głównej">Moja strona</a>
    </h1>

    <ul id="menu">
        <li class="pos1">
            <a href=""></a>
        </li>
        <li class="pos2">

            <a href=""></a>
        </li>
        <li class="pos3">
            <a href=""></a>
        </li>

    </ul>
</div>

Chyba nie muszę mówić jak bardzo taka pomoc przyspiesza pracę. Napisanie z palca kodu z drugiego przykładu zajęłoby mi przypuszczalnie więcej niż 2 minuty. Gdybym użył snippetów (do których przy HTMLu nie mogę się przyzwyczaić) może skróciłbym ten czas dwukrotnie. Zaś używając wynalazku Zen Coding całość naklepałem w 20s (i to nie mając wprawy). Tak więc gorąco polecam.

Gdyby ktoś szukał wtyczki do VIMa, to powstał plugin, którego twórca zainspirował się Zen Codingiem.

Wpis ten opublikowałem też na swoim prywatnym blogu.

Podobne wpisy:

  1. Dlaczego frameworki CSS ssą?
  2. Refaktoryzacja CSS — jednak coś można
Kategorie:HTML + CSS, Vim Tagi:, , , ,
  1. Listopad 23rd, 2009 at 12:42 | #1

    Istnieje podobny plugin do Netbeansa moze?

  2. reinmar
    Listopad 23rd, 2009 at 13:35 | #2
  3. Listopad 23rd, 2009 at 13:38 | #3

    Az sobie chyba sprobuje, bo wyglada to zabawnie :D

  1. Brak jeszcze trackbacków