Let code fly for a while: tools and technologies for quick HTML and CSS Compilation

Source: Internet
Author: User
Preface

Have you ever considered speeding up HTML and CSS coding? Whether you have thought about it or not, read this article and you will learn a lot from it. We will not discuss the CSS grid framework or CSS Reset. In this article, we focus on the CSS compiler and the HTML abbreviation encoding technology, an unusual encoding method. With these excellent tools and technologies, You can greatly reduce development time and speed up development.

HTML

There are many ways to accelerate HTML encoding. Here we will introduce the abbreviated HTML technology. Instead of writing complete HTML tags, we only need to encode the abbreviation code to extend to the complete HTML Tag. A simple example: # container is converted to <div id = "container"> </div>. There are two famous solutions for implementing the HTML abbreviation technology: Zen Coding and HAML.

Zen Coding

  

Zen Coding is a plugin for quick Coding of HTML, CSS, XML, XSL, or other structured format languages, including Zen HTML and Zen CSS. The core of this plug-in is a powerful abbreviation engine that allows you to expand expressions. Aptana/Eclipse, TextMate, Coda, Notepad ++, Espresso, Dreamweaver, UltraEdit, Visual Studio, NetBeans, EmEditor, Vim, and other common coding tools are supported. We strongly recommend you write HTML and CSS code to make your code fly!

Haml

  

Haml's author hamton Catlin introduced Haml as follows: Haml is a rebellion against traditional XHTML generation methods. It is neither pure code nor a text processing language, it is different and the most natural XHTML constructor in my opinion. Haml is an optional template language solution in Rails. It uses CSS-style syntax to describe the ID and Class of the DIV and write HTML code in a more elegant and concise way.

This is an example I have taken from the Haml website. You will see how fast HTML code can be written.

#profile  .left.column    #date= print_date    #address= current_user.address  .right.column    #email= current_user.email    #bio= current_user.bio

The Haml template engine can generate the following standard HTML code:

<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

Like HTML, there are also many ways to quickly write CSS code. Here we will introduce a very cool thing-CSS compiler. I personally think this is the most effective method to provide CSS encoding speed. However, you need to spend a little time learning New syntaxes. New syntaxes are very simple and you will soon be able to learn them.

All CSS compilers have the following things in common:

  • New syntaxes are usually easy to learn.
  • Nested rules are allowed, variables are defined, mixed types are defined, and inheritance is allowed.
  • Generate formatted CSS files
Sass

 

Sass makes CSS code more interesting. Sass extends CSS3 and adds features such as rule nesting, variable definition, hybrid type, selector, and inheritance to generate well-formatted CSS code, easy to organize and maintain. It can convert Sass, which is similar to CSS but more concise in writing, into CSS code. Sass provides Ruby-based tools that can easily convert Sass code into CSS code.

The following is an example code of CSS nesting, an important feature of Sass:

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

The Sass tool can generate the following standard CSS code:

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 was originally a Ruby gem that gave CSS dynamic language features, including variables, operators, and nested rules. In fact, the true role of Less is to convert CSS with advanced features into standard CSS. These are all completed through Http Handler when the Web client initiates a request. It can also be completed during editing. In addition, Less can be configured to automatically minimize the generated CSS file, which not only saves bandwidth, but also makes the end user experience more advanced. In addition, there is a. Net version Less. If you are developing. Net, you can check it out.

CleverCSS

  

CleverCSS is a small markup language developed for CSS inspired by Python to generate a clean and structured style sheet. It is much more powerful and clean than CSS2, and the biggest difference with CSS is the Syntax: CleverCSS is not monotonous Based on indentation, which is contrary to the Python rules, but it is also a good way to organize style sheets.

HSS

  

HSS is a tool used to extend CSS syntax. It has many powerful features such as variables and nesting.

XCSS

XCSS is based on standard CSS and provides a powerful object-oriented workflow for compiling complex style sheets. Using xCSS can greatly reduce your development time. XCSS provides an intuitive overview of the overall CSS structure. It uses variables and accelerates CSS code writing by reusing existing styles and many other convenient functions. XCSS is a lightweight tool that keeps your code semantic.

Last but not least

Finally, we recommend a great online tool --Markup GeneratorIt helps you quickly generate HTML code, extract all selectors from the code, and then automatically generate CSS framework code. For example, write the following abbreviated code:

#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

Use Markup Generator to generate the following standard HTML code:

<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">

The following CSS framework code can also be generated:

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

A very good tool. You can try it online.

The above is all the content. These practical tools and technologies can help Web developers get rid of the boring and boring HTML and CSS coding process, greatly saving coding time and speeding up development progress.

You may also like

 

  • The Ultimate Collection of 24 practical CSS3 tools
  • 20 useful Web development tools and frameworks
  • 10 useful Web design and development tools
  • Recommended 12 excellent browser compatibility testing tools
  • 10 excellent HTML5 development tools are recommended

 

Reference: 8 Tools to speed up your CSS and HTML Coding

Source: Dream sky ◆ focus on Web Front-end development technology ◆ share Web design resources

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.