WebDesigners, WebMasters & Developers • 3 min de lectura

HTML/CSS shortcuts super útiles en VSCode

visual studio code

¿Cansado de escribir <div> sólo para verte obligado a desplazarte hacia atrás y escribir los elementos de clase? ¿Exhausto de anidar div dentro de div para hacer tu hermoso diseño de cuadrícula en lo que se suponía que iba a ser un flash, pero se convirtió en apoyarte en tu tecla de flecha izquierda hasta que tu mano se entumeció? Si has respondido que sí a alguna de estas preguntas, tienes que conocer a mi amigo Emmet. Emmet ayuda a los desarrolladores permitiéndoles escribir fragmentos de código dentro de VSCode, y tener un hermoso HTML saliendo por el otro extremo.

Tags Hermanos rápidos usando el signo +

Los viejos símbolos de adición (+) te darán elementos hermanos. Digamos que tienes un div con una imagen, un título h3, y un párrafo. Con el cursor en el cuerpo del div, simplemente escribe img+h3+p y emmet te dará el hermoso html :

img+h3+p

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

Y tu cursor estará listo para insertar el src de tu imagen.

Elementos anidados con el signo >

¿Y si necesitas elementos anidados? Simplemente cambia el + por un >! body>main>div>h1 te dará:

>! body>main>div>h1

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

 

3. Múltiples elementos con el *

Hacer una tabla puede llevar mucho tiempo, a menos que utilices emmet en todo su potencial. Utilizando la misma técnica, los paréntesis te permitirán multiplicar el número de hijos anidados. div>(p*5) se convierte en:

div>(p*5)

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

2. Id’s a la velocidad de luz

Si quieres poner algunos divs con ids ya adjuntos, puedes usar la sintaxis estilo css. #article se convierte en <div id=«article»></div>. Pero puedes combinar otras técnicas con esto, por ejemplo div>#hello>p se convierte en:

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

1. DIV pero con clase

Si prestaste atención durante el último consejo, probablemente ya entenderás cómo utilizar las clases. Basta con añadir un punto. .bold se convierte en un <div class="bold"></div>.

También puedes encadenarlos para añadir más (.bold.bigtitle.nav-bar-header) o combinar cualquier método anterior para ponerlos en marcha. Prueba con div>#art1.article>#art2.article>#art3.article y verás cómo se pueden combinar muchas cosas de las que acabamos de hablar.

Comentarios

Artículos Relacionados