软件工程师-快速编写HTML和CSS的工具集合

星期八职场经验网（）

【现成经验助你快速完成工作】

在这篇文章中，我们关注的是不同寻常的编码方式——CSS编译器以及HTML缩写编码技术。借助这些优秀的工具和技术，能够大大的减少开发时间，加快开发进度。AD：你曾经考虑过想要加快HTML和CSS编码速度吗?不管你是否想过，都来看看这篇文章吧，你会从中学到很多东西。我们要讨论的不是CSS网格框架，也不是CSSReset。在这篇文章中，我们关注的是不同寻常的编码方式——CSS编译器以及HTML缩写编码技术。借助这些优秀的工具和技术，能够大大的减少开发时间，加快开发进度。HTML加快HTML编码的方法有很多，这里我们要介绍的是HTML缩写技术。取代传统的编写完整HTML标签，我们只需要编码缩写代码就能扩展到完整的HTML标记，一个简单的例子：#container将被转换成<divid="container"></div>。实现HTML缩写技术，有两种著名的解决方案——ZenCoding和HAML。ZenCodingZenCoding是一个用于快速编写HTML，CSS，XML，XSL或者其他结构化格式语言编码的插件，包括ZenHTML和ZenCSS两部分。这个插件核心是一个强大的缩写引擎，允许你扩展表达式，类似于从CSS选择器到HTML代码。支持Aptana/Eclipse、TextMate、Coda、Notepad++、Espresso、Dreamweaver、UltraEdit、VisualStudio、NetBeans、EmEditor、Vim等所有常见的编码工具。强烈推荐给编写HTML和CSS代码的朋友，让你代码飞起来!HamlHaml的作者HamptonCatlin是这样介绍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文件SassSass让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。这些都是在Web客户端发起请求时通过HttpHandler来完成的。也可以是编辑时就完成的。此外，Less可以配置成自动最小化所生成的CSS文件，不仅节省了带宽，并且使最终用户体验更上一层。另外有.Net版本的Less，做.Net开发的朋友可以关注一下。CleverCSSCleverCSS是受Python启发而为CSS开发的一个小型标记语言，用于生成干净的结构化的样式表。它比CSS2更加强大和干净，和CSS最大的区别是语法：CleverCSS基于缩进而不单调，而这是和Python规则相悖的，但也不失为组织样式表的一个好方法。HSSHSS是一个用于扩展CSS语法的一个工具，具有变量和嵌套等众多强大特性。xCSSxCSS基于标准的CSS，同时赋予了在编写复杂的样式表的时候的强大的面向对象工作流程，使用xCSS能够大幅减少你的开发时间。xCSS提供了整体的CSS结构的直观概述，使用变量以及通过重用现有的样式和其它很多方便的功能来加速CSS代码编写。xCSS是一个轻量级的工具，而且能够让你的代码保持语义。最后但不是最不重要最后向大家推荐一款非常棒的在线小工具——MarkupGenerator，它能够帮助你快速的生成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

使用MarkupGenerator能够生成如下标准的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

{

}