你曾經(jīng)考慮過(guò)想要加快 HTML 和 CSS 編碼速度嗎?不管你是否想過(guò)，都來(lái)看看這篇文章吧，你會(huì)從中學(xué)到很多東西。我們要討論的不是 CSS 網(wǎng)格框架，也不是 CSS Reset。在這篇文章中，我們關(guān)注的是不同尋常的編碼方式——CSS 編譯器以及 HTML 縮寫編碼技術(shù)。借助這些優(yōu)秀的工具和技術(shù)，能夠大大的減少開發(fā)時(shí)間，加快開發(fā)進(jìn)度。

HTML

加快HTML 編碼的方法有很多，這里我們要介紹的是 HTML 縮寫技術(shù)。取代傳統(tǒng)的編寫完整 HTML 標(biāo)簽，我們只需要編碼縮寫代碼就能擴(kuò)展到完整的HTML標(biāo)記，一個(gè)簡(jiǎn)單的例子：#container將被轉(zhuǎn)換成<div id="container"></div>。實(shí)現(xiàn) HTML 縮寫技術(shù)，有兩種著名的解決方案——Zen Coding 和 HAML。

Zen Coding

[[51884]]

Zen Coding 是一個(gè)用于快速編寫 HTML，CSS，XML，XSL 或者其他結(jié)構(gòu)化格式語(yǔ)言編碼的插件，包括 Zen HTML 和 Zen CSS 兩部分。這個(gè)插件核心是一個(gè)強(qiáng)大的縮寫引擎，允許你擴(kuò)展表達(dá)式，類似于從CSS選擇器到 HTML 代碼。支持Aptana/Eclipse、TextMate、Coda、Notepad++、Espresso、Dreamweaver、UltraEdit、Visual Studio、NetBeans、EmEditor、Vim等所有常見的編碼工具。強(qiáng)烈推薦給編寫 HTML 和 CSS 代碼的朋友，讓你代碼飛起來(lái)!

Haml

[[51885]]

Haml 的作者 Hampton Catlin 是這樣介紹 Haml 的：Haml 是對(duì)傳統(tǒng) XHTML 生成方式的一種反叛，它既不是純粹的代碼，也不是一種文本處理語(yǔ)言，它是與眾不同的，是一種在我看來(lái)最為自然的 XHTML 構(gòu)造方式。Haml 是 Rails 下的一種可選模板語(yǔ)言方案，使用 CSS 風(fēng)格的語(yǔ)法來(lái)描述 DIV 的 ID 和 Class，以更加優(yōu)雅簡(jiǎn)潔的方式編寫 HTML 代碼。

這是我從 Haml 網(wǎng)站拿過(guò)來(lái)的一個(gè)示例，你將看到編寫 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 代碼的方法也有很多，這里向大家介紹一項(xiàng)非?？岬臇|西——CSS 編譯器，我個(gè)人覺得這是提供 CSS 編碼速度最有效的方法。只是，你需要花一點(diǎn)點(diǎn)時(shí)間學(xué)習(xí)新的語(yǔ)法，新語(yǔ)法非常簡(jiǎn)單，你很快就能學(xué)會(huì)。

所有的 CSS 編譯器都有如下共同點(diǎn)：

◆ 新的語(yǔ)法，通常很容易就能學(xué)會(huì)

◆ 允許嵌套規(guī)則，定義變量，混合類型，繼承

◆ 生成格式化良好的 CSS 文件

Sass

[[51886]]

Sass 讓 CSS 代碼變得更加有趣，Sass 擴(kuò)展了 CSS3，增加了規(guī)則嵌套、變量定義、混合類型、選擇器、繼承等等特性，能夠生成良好格式化的 CSS 代碼，易于組織和維護(hù)。它能將類似 CSS 但是書寫更簡(jiǎn)潔的 Sass 語(yǔ)言最終轉(zhuǎn)換為 CSS 代碼。Sass 提供了基于 Ruby 語(yǔ)言開發(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（http://lesscss.org/）

[[51887]]

Less 最早是一個(gè) Ruby 的 gem，讓 CSS 具有動(dòng)態(tài)語(yǔ)言的特性，這些特性包括變量，操作符，嵌套規(guī)則。其實(shí) Less 真正的作用是將使用高級(jí)特性的 CSS 轉(zhuǎn)換成標(biāo)準(zhǔn)的 CSS。這些都是在 Web 客戶端發(fā)起請(qǐng)求時(shí)通過(guò) Http Handler 來(lái)完成的。也可以是編輯時(shí)就完成的。此外，Less 可以配置成自動(dòng)最小化所生成的 CSS 文件，不僅節(jié)省了帶寬，并且使最終用戶體驗(yàn)更上一層。另外有 .Net 版本的 Less，做 .Net 開發(fā)的朋友可以關(guān)注一下。

CleverCSS

CleverCSS 是受 Python 啟發(fā)而為 CSS 開發(fā)的一個(gè)小型標(biāo)記語(yǔ)言，用于生成干凈的結(jié)構(gòu)化的樣式表。它比 CSS2 更加強(qiáng)大和干凈，和 CSS 最大的區(qū)別是語(yǔ)法：CleverCSS 基于縮進(jìn)而不單調(diào)，而這是和 Python 規(guī)則相悖的，但也不失為組織樣式表的一個(gè)好方法。

HSS

HSS 是一個(gè)用于擴(kuò)展 CSS 語(yǔ)法的一個(gè)工具，具有變量和嵌套等眾多強(qiáng)大特性。

xCSS

xCSS 基于標(biāo)準(zhǔn)的 CSS，同時(shí)賦予了在編寫復(fù)雜的樣式表的時(shí)候的強(qiáng)大的面向?qū)ο蠊ぷ髁鞒?，使?xCSS 能夠大幅減少你的開發(fā)時(shí)間。xCSS 提供了整體的 CSS 結(jié)構(gòu)的直觀概述，使用變量以及通過(guò)重用現(xiàn)有的樣式和其它很多方便的功能來(lái)加速 CSS 代碼編寫。xCSS 是一個(gè)輕量級(jí)的工具，而且能夠讓你的代碼保持語(yǔ)義。

最后但不是最不重要

最后向大家推薦一款非常棒的在線小工具——Markup Generator，它能夠幫助你快速的生成 HTML 代碼并能夠根據(jù)從代碼中提取所有的選擇器，然后自動(dòng)生成 CSS 框架代碼。例如編寫如下簡(jiǎn)寫代碼：

#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 jizhula.com 

使用 Markup Generator 能夠生成如下標(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 jizhula.com</p> 
    </div> 
</div> 

同時(shí)還能夠生成如下的 CSS 框架代碼：

#root {  }  
 #top {  }  
  #logo {  }  
   #logo a {  }  
  #search {  }  
   #search fieldset {  }  
    #search fieldset label {  }  
    #query {  }  
    #search fieldset button {  }  
 #header {  }  
  #header h1 {  }  
  #header h2 {  }  
 #content {  }  
  #primary {  }  
   #about {  }  
  #secondary {  }  
   #contact {  }  
   #notify {  }  
   #bookmarks {  }  
 #footer {  }  
  #footer p {  } 

非常好的一款工具，大家可以在線試用一下。

以上就是全部?jī)?nèi)容了，這些實(shí)用的工具和技術(shù)能夠讓W(xué)eb開發(fā)人員擺脫編寫 HTML 和 CSS 過(guò)程中的枯燥與乏味，能夠大幅的節(jié)省編碼時(shí)間，加快開發(fā)進(jìn)度。

原文：http://www.cnblogs.com/lhb25/archive/2011/12/01/tools-to-speed-up-your-css-and-html-coding.html

【編輯推薦】

1. 你可能不知道的25個(gè)瀏覽器開發(fā)工具小秘密
2. 推薦九款非常優(yōu)秀的HTML 5在線設(shè)計(jì)工具
3. 推薦5個(gè)免費(fèi)項(xiàng)目管理工具
4. 10個(gè)免費(fèi)的PHP編輯器/開發(fā)工具推薦
5. Web開發(fā)者欣喜若狂的40個(gè)UI設(shè)計(jì)工具和資源