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