星期八職場經(jīng)驗網(wǎng)（）

【現(xiàn)成經(jīng)驗助你快速完成工作】

在這篇文章中，我們關(guān)注的是不同尋常的編碼方式——CSS編譯器以及HTML縮寫編碼技術(shù)。借助這些優(yōu)秀的工具和技術(shù)，能夠大大的減少開發(fā)時間，加快開發(fā)進(jìn)度。AD：你曾經(jīng)考慮過想要加快HTML和CSS編碼速度嗎?不管你是否想過，都來看看這篇文章吧，你會從中學(xué)到很多東西。我們要討論的不是CSS網(wǎng)格框架，也不是CSSReset。在這篇文章中，我們關(guān)注的是不同尋常的編碼方式——CSS編譯器以及HTML縮寫編碼技術(shù)。借助這些優(yōu)秀的工具和技術(shù)，能夠大大的減少開發(fā)時間，加快開發(fā)進(jìn)度。HTML加快HTML編碼的方法有很多，這里我們要介紹的是HTML縮寫技術(shù)。取代傳統(tǒng)的編寫完整HTML標(biāo)簽，我們只需要編碼縮寫代碼就能擴(kuò)展到完整的HTML標(biāo)記，一個簡單的例子：#container將被轉(zhuǎn)換成<divid="container"></div>。實現(xiàn)HTML縮寫技術(shù)，有兩種著名的解決方案——ZenCoding和HAML。ZenCodingZenCoding是一個用于快速編寫HTML，CSS，XML，XSL或者其他結(jié)構(gòu)化格式語言編碼的插件，包括ZenHTML和ZenCSS兩部分。這個插件核心是一個強大的縮寫引擎，允許你擴(kuò)展表達(dá)式，類似于從CSS選擇器到HTML代碼。支持Aptana/Eclipse、TextMate、Coda、Notepad++、Espresso、Dreamweaver、UltraEdit、VisualStudio、NetBeans、EmEditor、Vim等所有常見的編碼工具。強烈推薦給編寫HTML和CSS代碼的朋友，讓你代碼飛起來!HamlHaml的作者HamptonCatlin是這樣介紹Haml的：Haml是對傳統(tǒng)XHTML生成方式的一種反叛，它既不是純粹的代碼，也不是一種文本處理語言，它是與眾不同的，是一種在我看來最為自然的XHTML構(gòu)造方式。Haml是Rails下的一種可選模板語言方案，使用CSS風(fēng)格的語法來描述DIV的ID和Class，以更加優(yōu)雅簡潔的方式編寫HTML代碼。這是我從Haml網(wǎng)站拿過來的一個示例，你將看到編寫HTML代碼是多么的迅速。#profile

.left.column

#date=

print_date

#address=

current_user.address

.right.column

#email=

current_user.email

#bio=

current_user.bio

Haml模板引擎能夠把上面的代碼生成如下的標(biāo)準(zhǔn)HTML代碼：<div

id="profile">

<div

class="left

column">

<div

id="date"><%=

print_date

%></div>

<div

id="address"><%=

current_user.address

%></div>

</div>

<div

class="right

column">

<div

id="email"><%=

current_user.email

%></div>

<div

id="bio"><%=

current_user.bio

%></div>

</div>

</div>

CSS和HTML一樣，快速編寫CSS代碼的方法也有很多，這里向大家介紹一項非?？岬臇|西——CSS編譯器，我個人覺得這是提供CSS編碼速度最有效的方法。只是，你需要花一點點時間學(xué)習(xí)新的語法，新語法非常簡單，你很快就能學(xué)會。所有的CSS編譯器都有如下共同點：◆新的語法，通常很容易就能學(xué)會◆允許嵌套規(guī)則，定義變量，混合類型，繼承◆生成格式化良好的CSS文件SassSass讓CSS代碼變得更加有趣，Sass擴(kuò)展了CSS3，增加了規(guī)則嵌套、變量定義、混合類型、選擇器、繼承等等特性，能夠生成良好格式化的CSS代碼，易于組織和維護(hù)。它能將類似CSS但是書寫更簡潔的Sass語言最終轉(zhuǎn)換為CSS代碼。Sass提供了基于Ruby語言開發(fā)的工具能夠很容易的將Sass代碼轉(zhuǎn)換為CSS代碼。下面是演示Sass的重要特性——CSS嵌套的示例代碼：table.hl

{

margin:

2em

0;

td.ln

{

text-align:

right;

}

}

li

{

font:

{

family:

serif;

weight:

bold;

size:

1.2em;

}

}

借助Sass工具能夠生成如下的標(biāo)準(zhǔn)CSS代碼：table.hl

{

margin:

2em

0;

}

table.hl

td.ln

{

text-align:

right;

}

li

{

font-family:

serif;

font-weight:

bold;

font-size:

1.2em;

}

Less（/）Less最早是一個Ruby的gem，讓CSS具有動態(tài)語言的特性，這些特性包括變量，操作符，嵌套規(guī)則。其實Less真正的作用是將使用高級特性的CSS轉(zhuǎn)換成標(biāo)準(zhǔn)的CSS。這些都是在Web客戶端發(fā)起請求時通過HttpHandler來完成的。也可以是編輯時就完成的。此外，Less可以配置成自動最小化所生成的CSS文件，不僅節(jié)省了帶寬，并且使最終用戶體驗更上一層。另外有.Net版本的Less，做.Net開發(fā)的朋友可以關(guān)注一下。CleverCSSCleverCSS是受Python啟發(fā)而為CSS開發(fā)的一個小型標(biāo)記語言，用于生成干凈的結(jié)構(gòu)化的樣式表。它比CSS2更加強大和干凈，和CSS最大的區(qū)別是語法：CleverCSS基于縮進(jìn)而不單調(diào)，而這是和Python規(guī)則相悖的，但也不失為組織樣式表的一個好方法。HSSHSS是一個用于擴(kuò)展CSS語法的一個工具，具有變量和嵌套等眾多強大特性。xCSSxCSS基于標(biāo)準(zhǔn)的CSS，同時賦予了在編寫復(fù)雜的樣式表的時候的強大的面向?qū)ο蠊ぷ髁鞒?，使用xCSS能夠大幅減少你的開發(fā)時間。xCSS提供了整體的CSS結(jié)構(gòu)的直觀概述，使用變量以及通過重用現(xiàn)有的樣式和其它很多方便的功能來加速CSS代碼編寫。xCSS是一個輕量級的工具，而且能夠讓你的代碼保持語義。最后但不是最不重要最后向大家推薦一款非常棒的在線小工具——MarkupGenerator，它能夠幫助你快速的生成HTML代碼并能夠根據(jù)從代碼中提取所有的選擇器，然后自動生成CSS框架代碼。例如編寫如下簡寫代碼：#root

#top

#logo

a[href="/"]=Markup

Generator

form#search

fieldset

label[for="query"]=Enter

keyword:

input[type="text"

name="term"]#query

button[type="submit"]=Find

#header

h1=Markup

Generator

h2=Nifty

tool

for

XHTML/CSS

coders

#content

#primary

#about

#secondary

#contact.box

#notify.box

#bookmarks.box

#footer

p=Copyright

(c)

2011

使用MarkupGenerator能夠生成如下標(biāo)準(zhǔn)的HTML代碼：<div

id="root">

<div

id="top">

<div

id="logo">

<a

href="/">Markup

Generator</a>

</div>

<form

id="search"

method="post"

action="./">

<fieldset>

<label

for="query">Enter

keyword:</label>

<input

id="query"

type="text"

name="term"

/>

<button

type="submit">Find</button>

</fieldset>

</form>

</div>

<div

id="header">

<h1>Markup

Generator</h1>

<h2>Nifty

tool

for

XHTML/CSS

coders</h2>

</div>

<div

id="content">

<div

id="primary">

<div

id="about"></div>

</div>

<div

id="secondary">

<div

id="contact"

class="box"></div>

<div

id="notify"

class="box"></div>

<div

id="bookmarks"

class="box"></div>

</div>

</div>

<div

id="footer">

<p>Copyright

(c)

2011

</p>

</div>

</div>

同時還能夠生成如下的CSS框架代碼：#root

{

}

#top

{

}

#logo

{

}

#logo

a

{

}

#search

{

}

#search

fieldset

{

}

#search

fieldset

label

{

}

#query

{

}

#search

fieldset

button

{

}

#header

{

}

#header

h1

{

}

#header

h2

{

}

#content

{

}