My 5 favorite HTML/CSS shortcuts in VSCode

#vscode #html #css

Tired of typing in <div> only to be forced to scroll back and type in the class elements? Exhausted by nesting div into div to make your beautiful grid layout in what was supposed to be a flash, but turned into leaning on your left arrow key until your hand went numb? If you said yes to any of that, you need to meet my buddy Emmet. Emmet helps devs by allowing you to type in snippets within VSCode, and have beautiful HTML come out the other end.

5. Quick siblings

Good ol' addition symbols (+) will get you sibling elements. Lets say you have a div with an image, h3, and paragraph. With your cursor in the body of the div, just type img+h3+p and emmet will give you the beautiful html :

      <div>
          <img src="" alt="">
          <h3></h3>
          <p></p>
      </div>

And your cursor will be ready to insert the src for your image.

4. Nested elements

What if you need nested elements? Just change out the + for a >! body>main>div>h1 will give you

      <body>
          <main>
              <div>
                  <h1></h1>
              </div>
          </main>
      </body>

3. Multiple elements

Making a table can be time consuming, unless you're using emmet to its full potential. Using the same technique, parentheses will let you multiply the number of nested children. div>(p*5) turns into:

      <div>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
      </div>

2. fast ids

If you want to put some divs in with ids already attached, you can use css-style syntax. #article becomes <div id="article"></div>. But you can combine other techniques with this, for instance div>#hello>p becomes

       <div>
          <div id="hello">
              <p></p>
          </div>
      </div>

1. Divs, but with class!

If you paid attention during the last tip you'll probably already understand how to use classes. Just add a dot. .bold becomes <div class="bold"></div>. You can also chain them together to add more (.bold.bigtitle.nav-bar-header) or combine any previous methods to get these going. Try div>#art1.article>#art2.article>#art3.article and you'll see how many things we've just covered can be combined.

Let me know what your favorite shortcuts are!