让代码飞一会儿：快速编写HTML和CSS的工具和技术

作者：mobiledu2502937981 | 来源：互联网 | 2023-06-05 11:29

前言你曾经考虑过想要加快HTML和CSS编码速度吗？不管你是否想过，都来看看这篇文章吧，你会从中学到很多东西。我们要讨论的不是CSS网格框

前言

　　你曾经考虑过想要加快 HTML 和 CSS 编码速度吗&＃xff1f;不管你是否想过&＃xff0c;都来看看这篇文章吧&＃xff0c;你会从中学到很多东西。我们要讨论的不是 CSS 网格框架&＃xff0c;也不是 CSS Reset。在这篇文章中&＃xff0c;我们关注的是不同寻常的编码方式——CSS 编译器以及 HTML 缩写编码技术。借助这些优秀的工具和技术&＃xff0c;能够大大的减少开发时间&＃xff0c;加快开发进度。

HTML

　　加快 HTML 编码的方法有很多&＃xff0c;这里我们要介绍的是 HTML 缩写技术。取代传统的编写完整 HTML 标签&＃xff0c;我们只需要编码缩写代码就能扩展到完整的HTML标记&＃xff0c;一个简单的例子&＃xff1a;#container将被转换成

。实现 HTML 缩写技术&＃xff0c;有两种著名的解决方案——Zen Coding 和 HAML。

Zen Coding

　　Zen Coding 是一个用于快速编写 HTML&＃xff0c;CSS&＃xff0c;XML&＃xff0c;XSL 或者其他结构化格式语言编码的插件&＃xff0c;包括 Zen HTML 和 Zen CSS 两部分。这个插件核心是一个强大的缩写引擎&＃xff0c;允许你扩展表达式。支持Aptana/Eclipse、TextMate、Coda、Notepad&＃43;&＃43;、Espresso、Dreamweaver、UltraEdit、Visual Studio、NetBeans、EmEditor、Vim等所有常见的编码工具。强烈推荐给编写 HTML 和 CSS 代码的朋友&＃xff0c;让你代码飞起来&＃xff01;

Haml

　　Haml 的作者 Hampton Catlin 是这样介绍 Haml 的&＃xff1a;Haml 是对传统 XHTML 生成方式的一种反叛&＃xff0c;它既不是纯粹的代码&＃xff0c;也不是一种文本处理语言&＃xff0c;它是与众不同的&＃xff0c;是一种在我看来最为自然的 XHTML 构造方式。Haml 是 Rails 下的一种可选模板语言方案&＃xff0c;使用 CSS 风格的语法来描述 DIV 的 ID 和 Class&＃xff0c;以更加优雅简洁的方式编写 HTML 代码。

　　这是我从 Haml 网站拿过来的一个示例&＃xff0c;你将看到编写 HTML 代码是多么的迅速。

#profile.left.column#date&＃61; print_date#address&＃61; current_user.address.right.column#email&＃61; current_user.email#bio&＃61; current_user.bio

　　Haml 模板引擎能够把上面的代码生成如下的标准 HTML 代码&＃xff1a;

<%&＃61; print_date %>

<%&＃61; current_user.address %>

<%&＃61; current_user.email %>

<%&＃61; current_user.bio %>

CSS

　　和 HTML 一样&＃xff0c;快速编写 CSS 代码的方法也有很多&＃xff0c;这里向大家介绍一项非常酷的东西——CSS 编译器&＃xff0c;我个人觉得这是提供 CSS 编码速度最有效的方法。只是&＃xff0c;你需要花一点点时间学习新的语法&＃xff0c;新语法非常简单&＃xff0c;你很快就能学会。

所有的 CSS 编译器都有如下共同点&＃xff1a;

新的语法&＃xff0c;通常很容易就能学会
允许嵌套规则&＃xff0c;定义变量&＃xff0c;混合类型&＃xff0c;继承
生成格式化良好的 CSS 文件

Sass

　　Sass 让 CSS 代码变得更加有趣&＃xff0c;Sass 扩展了 CSS3&＃xff0c;增加了规则嵌套、变量定义、混合类型、选择器、继承等等特性&＃xff0c;能够生成良好格式化的 CSS 代码&＃xff0c;易于组织和维护。它能将类似 CSS 但是书写更简洁的 Sass 语言最终转换为 CSS 代码。Sass 提供了基于 Ruby 语言开发的工具能够很容易的将 Sass 代码转换为 CSS 代码。

　　下面是演示 Sass 的重要特性——CSS 嵌套的示例代码&＃xff1a;

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

　　借助 Sass 工具能够生成如下的标准 CSS 代码&＃xff1a;

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

　　Less 最早是一个 Ruby 的 gem&＃xff0c;让 CSS 具有动态语言的特性&＃xff0c;这些特性包括变量&＃xff0c;操作符&＃xff0c;嵌套规则。其实 Less 真正的作用是将使用高级特性的 CSS 转换成标准的 CSS。这些都是在 Web 客户端发起请求时通过 Http Handler 来完成的。也可以是编辑时就完成的。此外&＃xff0c;Less 可以配置成自动最小化所生成的 CSS 文件&＃xff0c;不仅节省了带宽&＃xff0c;并且使最终用户体验更上一层。另外有 .Net 版本的 Less&＃xff0c;做 .Net 开发的朋友可以关注一下。

CleverCSS

　　 CleverCSS 是受 Python 启发而为 CSS 开发的一个小型标记语言&＃xff0c;用于生成干净的结构化的样式表。它比 CSS2 更加强大和干净&＃xff0c;和 CSS 最大的区别是语法&＃xff1a;CleverCSS 基于缩进而不单调&＃xff0c;而这是和 Python 规则相悖的&＃xff0c;但也不失为组织样式表的一个好方法。

HSS

　　HSS 是一个用于扩展 CSS 语法的一个工具&＃xff0c;具有变量和嵌套等众多强大特性。

xCSS

　　xCSS 基于标准的 CSS&＃xff0c;同时赋予了在编写复杂的样式表的时候的强大的面向对象工作流程&＃xff0c;使用 xCSS 能够大幅减少你的开发时间。xCSS 提供了整体的 CSS 结构的直观概述&＃xff0c;使用变量以及通过重用现有的样式和其它很多方便的功能来加速 CSS 代码编写。xCSS 是一个轻量级的工具&＃xff0c;而且能够让你的代码保持语义。

最后但不是最不重要

　　最后向大家推荐一款非常棒的在线小工具——Markup Generator&＃xff0c;它能够帮助你快速的生成 HTML 代码并能够根据从代码中提取所有的选择器&＃xff0c;然后自动生成 CSS 框架代码。例如编写如下简写代码&＃xff1a;

#root#top#logoa[href&＃61;"/"]&＃61;Markup Generatorform#searchfieldsetlabel[for&＃61;"query"]&＃61;Enter keyword:input[type&＃61;"text" name&＃61;"term"]#querybutton[type&＃61;"submit"]&＃61;Find#headerh1&＃61;Markup Generatorh2&＃61;Nifty tool for XHTML/CSS coders#content#primary#about#secondary#contact.box#notify.box#bookmarks.box#footerp&＃61;Copyright (c) 2011 jizhula.com

　　使用 Markup Generator 能够生成如下标准的 HTML 代码&＃xff1a;

Markup Generator

Enter keyword:

`Markup Generator`

`Nifty tool for XHTML/CSS coders`

　　同时还能够生成如下的 CSS 框架代码&＃xff1a;

#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 { }

　　非常好的一款工具&＃xff0c;大家可以在线试用一下。

　　以上就是全部内容了&＃xff0c;这些实用的工具和技术能够帮助Web开发人员摆脱编写 HTML 和 CSS 过程中的枯燥与乏味&＃xff0c;能够大幅节省编码时间&＃xff0c;加快开发进度。