你曾經考慮過想要加快 HTML 和 CSS 編碼速度嗎?不管你是否想過，都來看看這篇文章吧，你會從中學到很多東西。我們要討論的不是 CSS 網格框架，也不是 CSS Reset。在這篇文章中，我們關注的是不同尋常的編碼方式——CSS 編譯器以及 HTML 縮寫編碼技術。借助這些優秀的工具和技術，能夠大大的減少開發時間，加快開發進度。

HTML

加快HTML 編碼的方法有很多，這里我們要介紹的是 HTML 縮寫技術。取代傳統的編寫完整 HTML 標簽，我們只需要編碼縮寫代碼就能擴展到完整的HTML標記，一個簡單的例子：#container將被轉換成<div id="container"></div>。實現 HTML 縮寫技術，有兩種著名的解決方案——Zen Coding 和 HAML。

Zen Coding

[[51884]]

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

Haml

[[51885]]

Haml 的作者 Hampton Catlin 是這樣介紹 Haml 的：Haml 是對傳統 XHTML 生成方式的一種反叛，它既不是純粹的代碼，也不是一種文本處理語言，它是與眾不同的，是一種在我看來最為自然的 XHTML 構造方式。Haml 是 Rails 下的一種可選模板語言方案，使用 CSS 風格的語法來描述 DIV 的 ID 和 Class，以更加優雅簡潔的方式編寫 HTML 代碼。

這是我從 Haml 網站拿過來的一個示例，你將看到編寫 HTML 代碼是多么的迅速。

#profile  
  .left.column  
    #date= print_date 
    #address= current_user.address  
  .right.column  
    #email= current_user.email  
    #bio= current_user.bio 

Haml 模板引擎能夠把上面的代碼生成如下的標準 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 編碼速度最有效的方法。只是，你需要花一點點時間學習新的語法，新語法非常簡單，你很快就能學會。

所有的 CSS 編譯器都有如下共同點：

◆ 新的語法，通常很容易就能學會

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

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

Sass

[[51886]]

Sass 讓 CSS 代碼變得更加有趣，Sass 擴展了 CSS3，增加了規則嵌套、變量定義、混合類型、選擇器、繼承等等特性，能夠生成良好格式化的 CSS 代碼，易于組織和維護。它能將類似 CSS 但是書寫更簡潔的 Sass 語言最終轉換為 CSS 代碼。Sass 提供了基于 Ruby 語言開發的工具能夠很容易的將 Sass 代碼轉換為 CSS 代碼。

下面是演示 Sass 的重要特性——CSS 嵌套的示例代碼：

table.hl {  
  margin: 2em 0;  
  td.ln {  
    text-align: right;  
  }  
}  
   
li {  
  font: {  
    family: serif;  
    weight: bold;  
    size: 1.2em;  
  }  
} 

借助 Sass 工具能夠生成如下的標準 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 最早是一個 Ruby 的 gem，讓 CSS 具有動態語言的特性，這些特性包括變量，操作符，嵌套規則。其實 Less 真正的作用是將使用高級特性的 CSS 轉換成標準的 CSS。這些都是在 Web 客戶端發起請求時通過 Http Handler 來完成的。也可以是編輯時就完成的。此外，Less 可以配置成自動最小化所生成的 CSS 文件，不僅節省了帶寬，并且使最終用戶體驗更上一層。另外有 .Net 版本的 Less，做 .Net 開發的朋友可以關注一下。

CleverCSS

CleverCSS 是受 Python 啟發而為 CSS 開發的一個小型標記語言，用于生成干凈的結構化的樣式表。它比 CSS2 更加強大和干凈，和 CSS 最大的區別是語法：CleverCSS 基于縮進而不單調，而這是和 Python 規則相悖的，但也不失為組織樣式表的一個好方法。

HSS

HSS 是一個用于擴展 CSS 語法的一個工具，具有變量和嵌套等眾多強大特性。

xCSS

xCSS 基于標準的 CSS，同時賦予了在編寫復雜的樣式表的時候的強大的面向對象工作流程，使用 xCSS 能夠大幅減少你的開發時間。xCSS 提供了整體的 CSS 結構的直觀概述，使用變量以及通過重用現有的樣式和其它很多方便的功能來加速 CSS 代碼編寫。xCSS 是一個輕量級的工具，而且能夠讓你的代碼保持語義。

最后但不是最不重要

最后向大家推薦一款非常棒的在線小工具——Markup Generator，它能夠幫助你快速的生成 HTML 代碼并能夠根據從代碼中提取所有的選擇器，然后自動生成 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 jizhula.com 

使用 Markup Generator 能夠生成如下標準的 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> 

同時還能夠生成如下的 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 {  } 

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

以上就是全部內容了，這些實用的工具和技術能夠讓Web開發人員擺脫編寫 HTML 和 CSS 過程中的枯燥與乏味，能夠大幅的節省編碼時間，加快開發進度。

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

【編輯推薦】

1. 你可能不知道的25個瀏覽器開發工具小秘密
2. 推薦九款非常優秀的HTML 5在線設計工具
3. 推薦5個免費項目管理工具
4. 10個免費的PHP編輯器/開發工具推薦
5. Web開發者欣喜若狂的40個UI設計工具和資源