The most effective 6 methods for compiling HTML and CSS

HTML5, CSS3, and JavaScript provide a great place for front-end developers. Everyone is arming themselves with a lot of tools and technologies to speed up development.

This article shares the most effective method in 6, hoping to provide you with efficiency and save time for you.

1. Dynamic CSS (Dynamic CSS)

If you want to accelerate your CSS code writing, you need to learn and master dynamic CSS. The nested riles, variables, mixins, and selector inheritance functions are added to most of the dynamic CSS, which improves the code utilization.

2. HTML snippets (HTML segment)

Using code snippets is a quick way to write HTML code. Zen Coding and HAML are recommended. First, it will speed you up quickly, and secondly, it can avoid some human errors, because all the code is tested and generated correctly.

3. CSS reset (CSS resetting)

The advantage of CSS reset is to avoid browser incompatibility. Recommendation: Eric Meyers CSS reset and YUI.

4. CSS Grid layout (Grid layout)

Many developers do not use CSS grid layout. The concept of grid layout comes from traditional printing and publishing. on the web, grid layout is very important in magazine templates/websites. This method has been proved by a large number of developers to be an effective way to improve the product design speed.

CSS grid layout has good cross-platform support and other features. The following describes some related resources:

Html-css-techniques/which-css-grid-framework-shocould-you-use-for-web-design/"> Which CSS Grid Framework shocould you use for web design

960 Grid Layout

YUI Grid layout

Blue Print Grid layout

5. HTML/CSS Editor

You need a good code editor. In addition to notepad, there are many other code editors with different characteristics. For example, coda's ftp engine is very stable. Of course, you can also log on to the open-source Chinese community to search for more open-source editor.

Notepad ++ (windows, free)

Aptana (all platforms, free)

Bluefish (all platform, free)

Coda (mac, $99)

Textmate (mac, $57)

6. other online tools

The following tools can help you save a little time.

Backfire: Save the CSS changes of firebug.

Live. js: Update CSS.

CSS Auto Reload: Same as Live. js, but you can set the Reload time.

Yahoo Grid Builder: YUI mesh creation.