ZenCoding でコーディング速度を向上させましょう_html/css_WEB-ITnose

最近、VS 神レベルのプラグイン Web Essentials についての一連のブログを書きました。その中で、ZenCoding については、HTML&CSS 操作スキル セクションで簡単に言及しました。今日はこれについて詳しく話しましょう。

概要

Zen コーディングは、CSS スタイル セレクター構文を使用して HTML をより高速に作成する方法です。 VS を使用している場合は、VS プラグイン Web Essentials をインストールした後、Zencoding エンコード方式を使用できます。Web Essentials のダウンロードについては、ここをクリックしてください。他のエディタを使用している場合は、ここからダウンロードしてインストールしてください (FanQiang が必要です)。 Zen コーディングは 2009 年に導入され、何度も更新され、退屈な HTML をより効率的に作成するための一般的な方法になりつつあります。

クイック ガイド

以下は、一般的に使用される Zen コーディング関数の一部であり、現在 VS2013 の Web Essentials プラグインでサポートされています。

'#' id 属性を作成します

'.' クラス属性を作成します

'[]' 子要素を作成します

'+' ブラザーを作成します要素

'^' は要素レベルを向上させます

'*' は乗算記号に相当し、同じものを n 回作成します。

「$」は増加する数字を置き換えます。

「$$」は、00、01 などの埋め込み桁のある数字に使用されます。

「{}」は要素のテキストを作成します。

どうすればいいですか?以下の複雑な例を見てください:

div#olDiv>ol>li.item*6>span{ZenCoding$$}.red

Tab キーを押すと、次のコードが生成されます:

<div id="olDiv">    <ol>        <li class="item">            <span class="red">ZenCoding01</span>        </li>        <li class="item">            <span class="red">ZenCoding02</span>        </li>        <li class="item">            <span class="red">ZenCoding03</span>        </li>        <li class="item">            <span class="red">ZenCoding04</span>        </li>        <li class="item">            <span class="red">ZenCoding05</span>        </li>        <li class="item">            <span class="red">ZenCoding06</span>        </li>    </ol></div>

ID とクラス属性: # および .

CSS スタイル構文を使用して、要素を作成し、それに ID またはクラス属性を与えることができます。

div#container.layout は次のコードを生成します:

<div id="container" class="layout"></div>

カスタム属性: []

角括弧 [] を使用して任意の属性を作成できます。

div[title] は次のコードを生成します:

<div title=""></div>

複数の属性を作成し、属性に値を割り当てることもできます:

input[placeholder="あなたの名前を入力してください" type="text"] は生成します次のコード:

rrree

子要素: >

まず要素を作成し、次にその子要素を作成できます。

たとえば、form#loginForm.login>input[type="text"] は次のコードを生成します:

<input type="text" value="" placeholder="请输入姓名" />

兄弟要素:+

Zen コーディングを使用すると、兄弟要素を簡単に作成できます。

footer>div>a+input は次のコードを生成できます:

<form id="loginForm" class="login">      <input type="text" value="" /> </form>

要素のレベルを上げる: ^

> シンボルは要素のレベルを下げます。ただし、^ シンボルは逆の効果があります。要素のレベルを上げるために使用され、複数のレベルにアップグレードできます。たとえば、1^ は 1 レベルを上げることができ、4^ は 4 レベルを上げることができます。この機能は一般的には使用されません。

たとえば、footer>div>a+input^^p の場合、p タグは入力レベルに基づいて 2 レベル上げられ、p タグは最も外側のフッター タグと同じレベルになるようにする必要があります。コードは次のとおりです:

<footer>    <div>        <a href=""></a>        <input type="" value="" />    </div></footer>

Product: *

n 個の同一の要素を作成します。

たとえば、ul>li*6 は次のコードを生成します:

<footer>    <div>        <a href=""></a>        <input type="" value="" />    </div></footer>

要素番号: $

product* を使用して n 個の同一の要素を作成する場合、$ を使用してそれらに増分番号を追加できます。注: 複数の $ 演算子 ($$ など) を使用すると、複数のゼロが埋め込まれた数値が作成されます。

たとえば、ul>li#id$$$*4 は次のコードを生成します:

<ul>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li></ul>

要素内のテキスト: {}

要素にテキストを入力する場合は、{} を使用できます。シンボル。

たとえば、ul>li*10>span{Windows $} は次のコードを生成します:

<ul>    <li id="id001"></li>    <li id="id002"></li>    <li id="id003"></li>    <li id="id004"></li></ul>

すべてのシンボルを結合する

複数の関数を結合すると、非常に優れた HTML をより速く記述でき、テンプレート用の関数も作成できます

Knockout.js

バインディングを作成し、プロパティ名を変更するだけです。

たとえば、section[data-bind="foreach:customers"]>div*4>input[type="text" data-bind="text:$$"] は次のコードを生成します:

<ul>    <li>        <span>Windows 1</span>    </li>    <li>        <span>Windows 2</span>    </li>    <li>        <span>Windows 3</span>    </li>    <li>        <span>Windows 4</span>    </li>    <li>        <span>Windows 5</span>    </li>    <li>        <span>Windows 6</span>    </li>    <li>        <span>Windows 7</span>    </li>    <li>        <span>Windows 8</span>    </li>    <li>        <span>Windows 9</span>    </li>    <li>        <span>Windows 10</span>    </li></ul>

組み合わせ: ()

組み合わせは、複雑な式を作成できる Zen コーディングの強力な機能です。

たとえば、div>(header>div)+section>(ul>li*2>a)+footer>(div>span) は次のコードを生成できます:

<section data-bind="foreach:customers">    <div>        <input type="text" value="" data-bind="text:01" /></div>    <div>        <input type="text" value="" data-bind="text:02" /></div>    <div>        <input type="text" value="" data-bind="text:03" /></div>    <div>        <input type="text" value="" data-bind="text:04" /></div></section>

補足

知りたい場合は詳細 簡単な構文については、この

フォーム ファイル

をダウンロードしてください (FanQiang が必要です)。