8 Fast and Furious Tools to speed up your CSS and HTML Coding Time

Introduction

Ever wondering how to speed up your HTML and CSS coding? We are not talking about Grid framework nor CSS reset, or hardcore stuff like faster computer or high speed wireless router here. In this post we going to focus on one of the unusual way of coding - CSS compiler and HTML abbreviation coding techniques.

As a frontend developer, I have been using Coda, Zen coding and recently adopted LESS. I have saved a ton of HTML, CSS and Javascript snippets in my Coda as well. With all these tools and techniques, it greatly reduce the development time!

HTML & CSS Examples

I got this example from HAML website, you can see how fast to write a full HTML markup:

<!-- Abbreviation --> 
#profile
  .left.column
    #date= print_date
    #address= current_user.address
  .right.column
    #email= current_user.email
    #bio= current_user.bio

<!-- Expanded -->
<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>

And SASS CSS example of one of its features - CSS Nesting.

 
table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}



table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

CSS

There are plenty of ways to speed up the way we normally would code CSS. We are not talking about CSS grid framework or CSS reset in this post, we are going for something cooler - CSS compiler. I think it's the most effective method to increase productivity. The only thing though, you will have to spend a little bit of time to learn the new syntaxes (It's really easy to pick it up).

All of the compilers have the same characteristic:

• We need to learn the syntaxes, usually is very easy to pick up
• Allow nested rules, variables, mixins.
• Generate well formatted CSS files

• Sass Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
• {less} LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js. This is the one I'm using, however, instead of compiling the CSS with javascript, I'm using an app called LESS.app for Mac OS X which remove the needs of a javascript file because it compiles and generate the CSS whenever we save the less file.
• CleverCSS CleverCSS is a small markup language for CSS inspired by Python that can be used to build a style sheet in a clean and structured way. In many ways it's cleaner and more powerful than CSS2 is. The most obvious difference to CSS is the syntax: it is indentation based and not flat. While this is obviously against the Python Zen, it's nonetheless a good idea for structural styles.
• HSS HSS is tool that extends the CSS syntax with powerful features such as variables and nested blocks.
• xCSS xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing complex style cascades. Using xCSS means a dramatic cut down to your development time by: having a intuitive overview of the overall CSS structure, using variables, re-using existing style cascades and many other handy features. But, most frameworks are bulky and inflexible, aren't they? Not xCSS! It's lightweight and seamlessly integrates into any existing workflow. Aside from that the CSS overhead is getting reduced while your (X)HTML attributes remain semantic.

HTML

We have the same thing for HTML. Eliminate the needs of writing full html tag, just use abbreviation code and expand it into full HTML markup. A simple example: #container will be converted to <div id="container"></div>

We have two famous solutions - Zen Coding and HAML. Personally, I have been using Zen Coding with Coda, and seriously, I can't live without it because it saves me so much times! Zen coding also supports CSS, for example bg will become background attribute.

• Zen Coding Zen Coding is an editor plugin for high-speed HTML, CSS, 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. It supports most of the famous editors.
• Haml 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. However, Haml avoids the need for explicitly coding HTML into the template, because it itself is a description of the HTML, with some code to generate dynamic content.

Last but not least

Let me end this post with a small tool - Markup Generator. Basically, You just have to submit your HTML code, and it will generate a CSS file with all the selectors it found in the HTML code. Pretty handy sometimes, it's a good tool to have.

• Markup Generator Markup Generator is a simple tool created for xhtml/css coders that are tired of writing boring frame code at the very beginning of slicing work. It's main purpose is to speed up your work by generating xhtml markup and a css frame out of very intuitive, shortened syntax so you can jump directly to the elements styling.

• TAGS:
• CSS
• HTML
• Tips
• Tools
• Tweak