让代码飞一会儿:快速编写 HTML 和 CSS 的工具和技术
原创
©著作权归作者所有:来自51CTO博客作者山边小溪的原创作品,请联系作者获取转载授权,否则将追究法律责任
前言
你曾经考虑过想要加快 HTML 和 CSS 编码速度吗?不管你是否想过,都来看看这篇文章吧,你会从中学到很多东西。我们要讨论的不是 CSS 网格框架,也不是 CSS Reset。在这篇文章中,我们关注的是不同寻常的编码方式——CSS 编译器以及 HTML 缩写编码技术。借助这些优秀的工具和技术,能够大大的减少开发时间,加快开发进度。
HTML
加快 HTML 编码的方法有很多,这里我们要介绍的是
HTML 缩写技术。取代传统的编写完整 HTML 标签,我们只需要编码缩写代码就能扩展到完整的HTML标记,一个简单的例子:#container将被转换成<div id="container"></div>。实现
HTML 缩写技术,有两种著名的解决方案——Zen Coding 和 HAML。
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 的作者 Hampton Catlin 是这样介绍 Haml 的:Haml 是对传统
XHTML 生成方式的一种反叛,它既不是纯粹的代码,也不是一种文本处理语言,它是与众不同的,是一种在我看来最为自然的 XHTML 构造方式。Haml 是 Rails 下的一种可选模板语言方案,使用
CSS 风格的语法来描述 DIV 的 ID 和 Class,以更加优雅简洁的方式编写 HTML 代码。
这是我从 Haml 网站拿过来的一个示例,你将看到编写
HTML 代码是多么的迅速。
![](p_w_picpaths/editer/InBlock.gif)
#profile
![](p_w_picpaths/editer/InBlock.gif)
.left.column
![](p_w_picpaths/editer/InBlock.gif)
#date= print_date
![](p_w_picpaths/editer/InBlock.gif)
#address= current_user.address
![](p_w_picpaths/editer/InBlock.gif)
.right.column
![](p_w_picpaths/editer/InBlock.gif)
#email= current_user.email
![](p_w_picpaths/editer/InBlock.gif)
#bio= current_user.bio
Haml 模板引擎能够把上面的代码生成如下的标准 HTML 代码:
![](p_w_picpaths/editer/InBlock.gif)
<div id=
"profile">
![](p_w_picpaths/editer/InBlock.gif)
<div
class=
"left column">
![](p_w_picpaths/editer/InBlock.gif)
<div id=
"date"><%= print_date %></div>
![](p_w_picpaths/editer/InBlock.gif)
<div id=
"address"><%= current_user.address %></div>
![](p_w_picpaths/editer/InBlock.gif)
</div>
![](p_w_picpaths/editer/InBlock.gif)
<div
class=
"right column">
![](p_w_picpaths/editer/InBlock.gif)
<div id=
"email"><%= current_user.email %></div>
![](p_w_picpaths/editer/InBlock.gif)
<div id=
"bio"><%= current_user.bio %></div>
![](p_w_picpaths/editer/InBlock.gif)
</div>
![](p_w_picpaths/editer/InBlock.gif)
</div>
CSS
和 HTML 一样,快速编写
CSS 代码的方法也有很多,这里向大家介绍一项非常酷的东西——CSS 编译器,我个人觉得这是提供 CSS 编码速度最有效的方法。只是,你需要花一点点时间学习新的语法,新语法非常简单,你很快就能学会。
所有的 CSS 编译器都有如下共同点:
- 新的语法,通常很容易就能学会
- 允许嵌套规则,定义变量,混合类型,继承
- 生成格式化良好的 CSS 文件
Sass 让 CSS 代码变得更加有趣,Sass 扩展了
CSS3,增加了规则嵌套、变量定义、混合类型、选择器、继承等等特性,能够生成良好格式化的
CSS 代码,易于组织和维护。它能将类似 CSS 但是书写更简洁的 Sass 语言最终转换为
CSS 代码。Sass 提供了基于 Ruby 语言开发的工具能够很容易的将 Sass 代码转换为 CSS 代码。
下面是演示 Sass 的重要特性——CSS 嵌套的示例代码:
![](p_w_picpaths/editer/InBlock.gif)
table.hl {
![](p_w_picpaths/editer/InBlock.gif)
margin: 2em 0;
![](p_w_picpaths/editer/InBlock.gif)
td.ln {
![](p_w_picpaths/editer/InBlock.gif)
text-align: right;
![](p_w_picpaths/editer/InBlock.gif)
}
![](p_w_picpaths/editer/InBlock.gif)
}
![](p_w_picpaths/editer/InBlock.gif)
li {
![](p_w_picpaths/editer/InBlock.gif)
font: {
![](p_w_picpaths/editer/InBlock.gif)
family: serif;
![](p_w_picpaths/editer/InBlock.gif)
weight: bold;
![](p_w_picpaths/editer/InBlock.gif)
size: 1.2em;
![](p_w_picpaths/editer/InBlock.gif)
}
![](p_w_picpaths/editer/InBlock.gif)
}
借助 Sass 工具能够生成如下的标准 CSS 代码:
![](p_w_picpaths/editer/InBlock.gif)
table.hl {
![](p_w_picpaths/editer/InBlock.gif)
margin: 2em 0;
![](p_w_picpaths/editer/InBlock.gif)
}
![](p_w_picpaths/editer/InBlock.gif)
table.hl td.ln {
![](p_w_picpaths/editer/InBlock.gif)
text-align: right;
![](p_w_picpaths/editer/InBlock.gif)
}
![](p_w_picpaths/editer/InBlock.gif)
li {
![](p_w_picpaths/editer/InBlock.gif)
font-family: serif;
![](p_w_picpaths/editer/InBlock.gif)
font-weight: bold;
![](p_w_picpaths/editer/InBlock.gif)
font-size: 1.2em;
![](p_w_picpaths/editer/InBlock.gif)
}
Less 最早是一个 Ruby 的 gem,让
CSS 具有动态语言的特性,这些特性包括变量,操作符,嵌套规则。其实 Less 真正的作用是将使用高级特性的 CSS 转换成标准的 CSS。这些都是在 Web 客户端发起请求时通过 Http Handler 来完成的。也可以是编辑时就完成的。此外,Less 可以配置成自动最小化所生成的
CSS 文件,不仅节省了带宽,并且使最终用户体验更上一层。另外有 .Net 版本的
Less,做 .Net 开发的朋友可以关注一下。
CleverCSS 是受 Python 启发而为 CSS 开发的一个小型标记语言,用于生成干净的结构化的样式表。它比 CSS2 更加强大和干净,和
CSS 最大的区别是语法:CleverCSS 基于缩进而不单调,而这是和 Python 规则相悖的,但也不失为组织样式表的一个好方法。
HSS 是一个用于扩展
CSS 语法的一个工具,具有变量和嵌套等众多强大特性。
xCSS 基于标准的
CSS,同时赋予了在编写复杂的样式表的时候的强大的面向对象工作流程,使用 xCSS 能够大幅减少你的开发时间。xCSS 提供了整体的 CSS 结构的直观概述,使用变量以及通过重用现有的样式和其它很多方便的功能来加速
CSS 代码编写。xCSS 是一个轻量级的工具,而且能够让你的代码保持语义。
最后但不是最不重要
最后向大家推荐一款非常棒的在线小工具——
Markup Generator,它能够帮助你快速的生成
HTML 代码并能够根据从代码中提取所有的选择器,然后自动生成 CSS 框架代码。例如编写如下简写代码:
![](p_w_picpaths/editer/InBlock.gif)
#root
![](p_w_picpaths/editer/InBlock.gif)
#top
![](p_w_picpaths/editer/InBlock.gif)
#logo
![](p_w_picpaths/editer/InBlock.gif)
a[href=
"/"]=Markup Generator
![](p_w_picpaths/editer/InBlock.gif)
form#search
![](p_w_picpaths/editer/InBlock.gif)
fieldset
![](p_w_picpaths/editer/InBlock.gif)
label[
for=
"query"]=Enter keyword:
![](p_w_picpaths/editer/InBlock.gif)
input[type=
"text" name=
"term"]#query
![](p_w_picpaths/editer/InBlock.gif)
button[type=
"submit"]=Find
![](p_w_picpaths/editer/InBlock.gif)
#header
![](p_w_picpaths/editer/InBlock.gif)
h1=Markup Generator
![](p_w_picpaths/editer/InBlock.gif)
h2=Nifty tool
for XHTML/CSS coders
![](p_w_picpaths/editer/InBlock.gif)
#content
![](p_w_picpaths/editer/InBlock.gif)
#primary
![](p_w_picpaths/editer/InBlock.gif)
#about
![](p_w_picpaths/editer/InBlock.gif)
#secondary
![](p_w_picpaths/editer/InBlock.gif)
#contact.box
![](p_w_picpaths/editer/InBlock.gif)
#notify.box
![](p_w_picpaths/editer/InBlock.gif)
#bookmarks.box
![](p_w_picpaths/editer/InBlock.gif)
#footer
![](p_w_picpaths/editer/InBlock.gif)
p=Copyright (c) 2011 jizhula.com
使用 Markup Generator 能够生成如下标准的 HTML 代码:
![](p_w_picpaths/editer/InBlock.gif)
<div id=
"root">
![](p_w_picpaths/editer/InBlock.gif)
<div id=
"top">
![](p_w_picpaths/editer/InBlock.gif)
<div id=
"logo">
![](p_w_picpaths/editer/InBlock.gif)
<a href=
"/">Markup Generator</a>
![](p_w_picpaths/editer/InBlock.gif)
</div>
![](p_w_picpaths/editer/InBlock.gif)
<form id=
"search" method=
"post" action=
"./">
![](p_w_picpaths/editer/InBlock.gif)
<fieldset>
![](p_w_picpaths/editer/InBlock.gif)
<label
for=
"query">Enter keyword:</label>
![](p_w_picpaths/editer/InBlock.gif)
<input id=
"query" type=
"text" name=
"term" />
![](p_w_picpaths/editer/InBlock.gif)
<button type=
"submit">Find</button>
![](p_w_picpaths/editer/InBlock.gif)
</fieldset>
![](p_w_picpaths/editer/InBlock.gif)
</form>
![](p_w_picpaths/editer/InBlock.gif)
</div>
![](p_w_picpaths/editer/InBlock.gif)
<div id=
"header">
![](p_w_picpaths/editer/InBlock.gif)
<h1>Markup Generator</h1>
![](p_w_picpaths/editer/InBlock.gif)
<h2>Nifty tool
for XHTML/CSS coders</h2>
![](p_w_picpaths/editer/InBlock.gif)
</div>
![](p_w_picpaths/editer/InBlock.gif)
<div id=
"content">
![](p_w_picpaths/editer/InBlock.gif)
<div id=
"primary">
![](p_w_picpaths/editer/InBlock.gif)
<div id=
"about"></div>
![](p_w_picpaths/editer/InBlock.gif)
</div>
![](p_w_picpaths/editer/InBlock.gif)
<div id=
"secondary">
![](p_w_picpaths/editer/InBlock.gif)
<div id=
"contact" class=
"box"></div>
![](p_w_picpaths/editer/InBlock.gif)
<div id=
"notify" class=
"box"></div>
![](p_w_picpaths/editer/InBlock.gif)
<div id=
"bookmarks" class=
"box"></div>
![](p_w_picpaths/editer/InBlock.gif)
</div>
![](p_w_picpaths/editer/InBlock.gif)
</div>
![](p_w_picpaths/editer/InBlock.gif)
<div id=
"footer">
![](p_w_picpaths/editer/InBlock.gif)
<p>Copyright (c) 2011 jizhula.com</p>
![](p_w_picpaths/editer/InBlock.gif)
</div>
![](p_w_picpaths/editer/InBlock.gif)
</div>
同时还能够生成如下的 CSS 框架代码:![](p_w_picpaths/editer/InBlock.gif)
#root { }
![](p_w_picpaths/editer/InBlock.gif)
#top { }
![](p_w_picpaths/editer/InBlock.gif)
#logo { }
![](p_w_picpaths/editer/InBlock.gif)
#logo a { }
![](p_w_picpaths/editer/InBlock.gif)
#search { }
![](p_w_picpaths/editer/InBlock.gif)
#search fieldset { }
![](p_w_picpaths/editer/InBlock.gif)
#search fieldset label { }
![](p_w_picpaths/editer/InBlock.gif)
#query { }
![](p_w_picpaths/editer/InBlock.gif)
#search fieldset button { }
![](p_w_picpaths/editer/InBlock.gif)
#header { }
![](p_w_picpaths/editer/InBlock.gif)
#header h1 { }
![](p_w_picpaths/editer/InBlock.gif)
#header h2 { }
![](p_w_picpaths/editer/InBlock.gif)
#content { }
![](p_w_picpaths/editer/InBlock.gif)
#primary { }
![](p_w_picpaths/editer/InBlock.gif)
#about { }
![](p_w_picpaths/editer/InBlock.gif)
#secondary { }
![](p_w_picpaths/editer/InBlock.gif)
#contact { }
![](p_w_picpaths/editer/InBlock.gif)
#notify { }
![](p_w_picpaths/editer/InBlock.gif)
#bookmarks { }
![](p_w_picpaths/editer/InBlock.gif)
#footer { }
![](p_w_picpaths/editer/InBlock.gif)
#footer p {
以上就是全部内容了,这些实用的工具和技术能够帮助Web开发人员摆脱编写 HTML 和 CSS 过程中的枯燥与乏味,能够大幅节省编码时间,加快开发进度。