---
title: 7 Ways to Code Faster HTML CSS
description: >-
  Are you a fast coder? Yes? If then how fast you can code? Being a fast typist isn't about coding
  faster. Faster coding is about getting more things done with...
url: https://expiredqueues.com/code-faster-html-css/
date: '2012-01-24T05:17:36.000Z'
image: https://expiredqueues.com/images/og/code-faster-html-css-6ff46cbb.jpg
---

Written in January 2012. Much of what it describes has since changed or disappeared; it is kept as a record of how the web used to work, not as advice.

Tutorials posts coding

# 7 Ways to Code Faster HTML CSS

24 January 2012 By Adrian 2 min read

![7 Ways to Code Faster HTML and CSS](https://expiredqueues.com/images/opt/banner-320.jpeg)

Are you a fast coder? Yes? If then how fast you can code? Being a fast typist isn't about coding faster. Faster coding is about getting more things done with less effort. Here comes the role of productivity tools.

Listed below are some very useful productivity tools - for Front End Developers. The tools below will help you code much faster and save a lot of time. After all we are not typists :), so why don't we use these tools:

## HTML

### 1.) [ZEN CODING](http://code.google.com/p/zen-coding/)

> Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions-similar to CSS selectors-into HTML code.

Best learn resource: <http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/>

### 2.) [Haml](http://haml-lang.com/)

> Haml is a markup language that’s used to cleanly and simply describe the HTML of any web document without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ASP, and ERB, the templating language used in most Ruby on Rails applications.

Best learn resource: [http://haml-lang.com/tutorial.html](http://haml-lang.com/)

### 3.) [Sparkup](https://github.com/rstacruz/sparkup)

> You can write HTML in a CSS-like syntax, and have Sparkup handle the expansion to full HTML code. It is meant to help you write long HTML blocks in your text editor by letting you type less characters than needed.

Best learn resource: <https://github.com/rstacruz/sparkup>

## CSS

### 4.) [LESS](http://lesscss.org/)

> The dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

Best learn resource: <http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/get-into-less-the-programmable-stylesheet-language/>

### 5.) [SASS](http://sass-lang.com/)

> Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows.

Best learn resource: <http://net.tutsplus.com/tutorials/other/mastering-sass-lesson-1/>

### 6.) [Prefixr](http://prefixr.com/)

> CSS Prefixr is a CSS pre-processor tool, that generates the cross browser css from given codes. Forget about writing multiple browser prefixes and start using Prefixr.

### 7.) [SpriteCow](http://www.spritecow.com/)

> Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.

All of the above tools are my daily usage tools. Once you get the hang of using these tools - you will thank me for listing.

[Previously Excellent CSS Frameworks for Responsive Web Design](https://expiredqueues.com/css-frameworks-for-responsive-web-design/) [Next Detect Landscape/Portrait Mode using JavaScript](https://expiredqueues.com/detect-landscape-portrait-mode-using-javascript/)

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "7 Ways to Code Faster HTML CSS",
  "datePublished": "2012-01-24T05:17:36.000Z",
  "dateModified": "2012-01-24T05:17:36.000Z",
  "author": {
    "@type": "Person",
    "name": "Adrian",
    "url": "https://expiredqueues.com/about/"
  },
  "publisher": {
    "@type": "Person",
    "name": "Adrian"
  },
  "mainEntityOfPage": "https://expiredqueues.com/code-faster-html-css/",
  "image": "https://expiredqueues.com/images/2012/banner.jpg",
  "keywords": "posts, coding, resources, tips-tricks",
  "articleSection": "Tutorials"
}
```