Contact Us
  • Write Blazing Fast HTML and CSS with Emmet

    What is Emmet?

    Emmet is a plugin that enables rapid text editing with HTML and CSS. It can be used with many text editors and is very simple to learn.

    Emmet-io

    Why use Emmet?

    Most text editors come with some form of code completion to speed up your workflow. Emmet takes the speed of your workflow to the next level.

    Emmet takes the speed of your workflow to the next level.

    How it works

    Emmet reads your mind. Type div>ul>li*4 and press tab (or enter depending on your text editor) and you will instantly get an unordered list with 4 list items as seen here:

    <div>
    	<ul>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ul>
    </div>
    

    Type h2.cool and Emmet will give you a level 2 Heading with a class name cool: <h2 class="cool"></h2>.

    Emmet also works with CSS

    Emmet lets you dribble out your CSS and predicts what you want to do. Type ta:c and you will get text-align:center. Type m-a and you will get margin-auto.

    Includes Lorem Ipsum Generator

    Type p>lorem30 and you will get a paragraph with 30 words of lorem ipsum “dummy text.”

    Review the CheatSheet

    As intuitive as Emmet is, it’s helpful to review the cheat sheet once in a while. Sometimes I find myself typing certain things and am disappointed when Emmet doesn’t read my mind. Overall, however, Emmet is amazingly dead-on at predicting your intentions.

    Sometimes you may bump into a conflict with your text editor’s auto-complete triggers. When this happens for me (using Sublime Text 2), I create a new sublime snippet that overrides Emmet. I’ve only had to do this on a few occasions.

    Emmet has a WordPress Plugin

    If you spend a lot of time writing code within WordPress, you can also install an Emmet WordPress plugin so you can use Emmet syntax directly in your posts and pages.

    Available for Many Text Editors

    Most text editors have an Emmet plugin. Set-up is generally very fast. You will be up and running – writing blazing fast HTML and CSS in no time.

    You will be up and running – writing blazing fast HTML and CSS in no time.

    Are you using Emmet or any other tools that help you write fast HTML and CSS? Please leave a comment with any tips or questions!

    Speak Your Mind

    *