技术开发 频道

HTML和CSS优化编码技术:代码驾轻就熟

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

  HTML

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

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

  Zen Coding

  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

  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。这些都是在 Web 客户端发起请求时通过 Http Handler 来完成的。也可以是编辑时就完成的。此外,Less 可以配置成自动最小化所生成的 CSS 文件,不仅节省了带宽,并且使最终用户体验更上一层。另外有 .Net 版本的 Less。

  CleverCSS

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

  HSS

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

  xCSS

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

  最后但不是最不重要

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



#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 过程中的枯燥与乏味,能够大幅的节省编码时间,加快开发进度。

0
相关文章