讓代碼飛一會兒：快速編寫 HTML 和 CSS 的工具和技術

前言

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

HTML

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

Zen Coding

　　

　　Zen Coding 是一個用於快速編寫 HTML，CSS，XML，XSL 或者其他結構化格式語言編碼的外掛程式，包括 Zen HTML 和 Zen CSS 兩部分。這個外掛程式核心是一個強大的縮寫引擎，允許你擴充運算式。支援Aptana/Eclipse、TextMate、Coda、Notepad++、Espresso、Dreamweaver、UltraEdit、Visual Studio、NetBeans、EmEditor、Vim等所有常見的編碼工具。強烈推薦給編寫 HTML 和 CSS 代碼的朋友，讓你代碼飛起來！

Haml

　　

　　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

 

　　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

 

　　Less 最早是一個 Ruby 的 gem，讓 CSS 具有動態語言的特性，這些特性包括變數，操作符，嵌套規則。其實 Less 真正的作用是將使用進階特性的 CSS 轉換成標準的 CSS。這些都是在 網頁用戶端發起請求時通過 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 過程中的枯燥與乏味，能夠大幅節省編碼時間，加快開發進度。

您可能還喜歡

 

• 24款非常實用的CSS3工具終極收藏
• 20個非常有用的Web開發工具和架構
• 10款非常有用的Web設計和開發工具
• 12款很棒的瀏覽器安全色性測試載入器推薦
• 推薦10款非常優秀的 HTML5 開發工具

 

參考文章：8 Tools to speed up your CSS and HTML Coding

編譯來源：夢想天空 ◆ 關注Web前端開發技術 ◆ 分享網頁設計資源