Emmet, anteriormente conocida como Codificación Zen, es una de las mejores herramientas que debe tener para aumentar su productividad mientras codifica HTML o CSS. Funciona igual que la finalización de código, pero es más potente y sorprendente. Es capaz de automatizar su HTML / CSS de una forma simple a una compleja.
Emmet ofrece un buen soporte para editor de texto o IDE (entorno de desarrollo integrado) como Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, corchetes, Notepad ++, PHPStorm y muchos más. También es compatible con la herramienta de edición en línea como JSFiddle, JSBin, CodePen, IceCoder y Codio .
La forma en que funciona Emmet es escribiendo la tecla del teclado de la pestaña cuando termine de escribir la sintaxis. Los siguientes son los símbolos Emmet más comunes que puede utilizar. Para verlos en acción, por favor sigue leyendo.
Emmet - HTML mejores trucos
Te sorprenderás al escribir HTML con Emmet como lo hice yo. Como se dijo anteriormente, Emmet puede abreviar un HTML simple a uno muy complejo. Y están escritos solo en una sola línea de código. De manera predeterminada, si abrevias un nombre de etiqueta desconocido, Emmet escribirá automáticamente la etiqueta que escribes. Vea la animación a continuación para entenderlo fácilmente.
1. Anidación
Para anidar algunos elementos solo necesita agregar un signo más grande > después de cada etiqueta que desee utilizar. Por ejemplo, cuando quiero tener un header con nav, div, ul y li dentro, solo necesito escribir header>nav>div>ul>li y la tecla de tabulación.
2. hermano
Si no desea anidar sus elementos, simplemente puede usar un signo más + seguido de las etiquetas que desea agregar. Por ejemplo, el header+section+article+footer le dará un lugar diferente para header, section, article y footer .
3. subir
Cuando está dentro de un elemento secundario y desea tener otro elemento fuera de ese elemento, puede subir fácilmente un elemento con el signo ^ . Si lo escribes dos veces, escalarás el elemento doble y así sucesivamente. Por ejemplo, si escribe header>div>h1>nav, tendrá el elemento de navegación aún dentro del h1. Para sacarlo, simplemente reemplace el último > signo con ^ .
4. Añadir clase
Emmet también puede incluir su nombre de clase preferido dentro de la etiqueta. El signo que usará es el mismo que el selector de clase en CSS que es un punto . firmar. Por ejemplo, si quiero tener un div con clase .container, h1 con .title y nav con .fixed, entonces solo tengo que escribir div.container>header>h1.title+nav.fixed .
Si desea tener más de una clase dentro, escriba su clase adicional después de la primera clase junto con el punto . firmar. Ejemplo: div.container.center producirá .
5. Añadir ID
Además de la clase, también puede agregar una identificación dentro de su etiqueta con # signo # . El uso es el mismo que al agregar una clase, pero no puede escribir doble ID en el interior. Si intentas hacerlo, Emmet solo leerá la última ID que escribas.
6. Añadir texto
Emmet no es tan simple como abreviar algunas etiquetas, incluso puede agregar una línea de texto dentro. Para agregar un poco de texto, solo tiene que envolver el texto con el signo {} corchete. No es necesario agregar un signo > más grande ya que el texto se agregará automáticamente dentro de la etiqueta.
7. Añadir atributo
Si desea agregar otro atributo aparte de la clase y la identificación, simplemente coloque el atributo que desea agregar dentro del signo del corchete [] . Por ejemplo, quiero tener una imagen que tenga la fuente logo.png con el logo alt, así que solo escribo img[src="logo.png"] .
8. Agrupación
Cuando desee tener un elemento con varios elementos anidados en su interior, agruparlos con el signo () lo ayudará a lograrlo fácilmente. Por ejemplo, quiero tener un contenedor que tenga un encabezado con h1 y nav dentro y otra sección fuera del encabezado, simplemente escribiré: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Multiplicación
Esta característica puede convertirse en uno de tus favoritos de Emmet. Al igual que con la multiplicación, podemos multiplicar cualquier elemento tanto como queramos. Para usarlo, simplemente agregue un signo de estrella * después del elemento que desea multiplicar y agregue el número del elemento. Por ejemplo, quiero escribir cinco elementos li dentro de ul, entonces la sintaxis correcta es ul>li*5 .
10. Numeración automática
La numeración automática te ayudará a escribir fácilmente diferentes nombres con un número creciente. La sintaxis correcta para esta característica es un signo de dólar. La numeración automática se utiliza mejor con la multiplicación. Ejemplo, quiero agregar mi elemento anterior de li con una clase de item1 a item5 . Entonces, solo tengo que agregar un nombre de clase adicional con el signo de dólar: ul>li.item$*5 .
11. Lorem
Si solía escribir algún texto ficticio abriendo el generador de lipsum como lipsum.com, con Emmet no necesita hacerlo más. Emmet también admite el generador de texto ficticio con sintaxis de lorem o lipsum . También puede especificar cuánto tiempo se convertirá su texto. Por ejemplo, quiero tener un texto con 10 palabras, luego escribiré lorem10 .
12. Auto documento
Cuando está iniciando un nuevo proyecto, en lugar de escribir la estructura html manualmente o copiar y pegar desde otros recursos, Emmet puede hacerlo por usted mejor. Todo lo que necesitas hacer es escribir un exclamativo ! Firma, pulsa la pestaña y la magia pasa. Eso generará una estructura de documento HTML5 para usted, si desea utilizar un HTML4 en su lugar, simplemente escriba html:4t .
13. Enlace
Si tiene un archivo favicon, rss o CSS externo que desea agregar a su documento, puede usar trucos de enlaces para escribirlos más rápido. Para incluir un favicon, escriba link:favicon luego se le generará un enlace de favicon con el nombre predeterminado del archivo favicon.ico . Y para css, link:css le generará un enlace CSS con el nombre de estilo style.css predeterminado en style.css interior. Y RSS será rss.xml como nombre predeterminado.
Puedes combinarlos con el signo más + para generar recursos más rápidos.
14. ancla
De forma predeterminada, cuando escribe a etiqueta y luego pulsa la pestaña, obtendrá a etiqueta completa con el atributo href interior. Pero puede agregar un // valor si lo combina con el enlace, por ejemplo, a:link . Y si desea tener un enlace de correo en su lugar, entonces use a:mail .
15. Salto inteligente
Los últimos trucos HTML que te daré son las funciones de omisión inteligente. Básicamente, no tienes que escribir el nombre de la etiqueta cuando quieres tener una clase o una identificación dentro de ella. Esto se aplica sólo en algunas condiciones determinadas.
Primero, si desea tener un div con ID o clase dentro, no necesita escribir el nombre de la etiqueta, solo escriba directamente el símbolo de id o clase junto con su nombre.
Segundo, cuando está dentro de una etiqueta ul, omite escribir la etiqueta li si tiene una clase o id.
Y lo último se aplica dentro de la etiqueta de la table . Puede omitir la escritura de las etiquetas tr y td si tienen clase o id y Emmet las agregará automáticamente.
Emmet - Los mejores trucos de CSS
Después de aprender algunos de los trucos HTML, ahora es el momento para el CSS. Algunos de los símbolos comunes que se muestran en la imagen superior no funcionarán con CSS. Son más grandes > y suben ^ símbolos. Si los usas, producirán como el símbolo más + . Por lo tanto, vamos a ir.
1. Ancho y Altura
Definir width y height con Emmet es muy fácil. Solo tiene que escribir la primera palabra de ellos seguido del tamaño que desea agregar. De forma predeterminada, si no especifica las unidades, Emmet las generará con la unidad px . El símbolo de unidad disponible es porcentaje % y em .
2. texto
Hay algunos símbolos de propiedad de texto fáciles de usar y se generarán con el valor predeterminado. ta generará text-align con valor left, td será text-decoration none valor none y tt se transformará en text-transform con valor en uppercase .
3. Antecedentes
Para agregar fondo, simplemente use la abreviatura bg . Puede combinarlo con bgi para obtener background-image de background-color, bgc para background-color de background-color bgc para la bgc de background-color . También puede escribir bg+ para obtener una lista completa de propiedades de fondo.
4. Font Face
El signo más no solo es aplicable para el fondo. Para @font-face, simplemente puede escribir @f+ para obtener una lista completa de las propiedades de @font-face . Si escribe @f sin el signo más, solo obtendrá una @font-face básica.
5. Misceláneo
Otros grandes trucos son los que puedes abreviar escribiendo animation con texto anim . Si agrega un signo menos, obtendrá propiedades de animación con valor total. También hay @kf texto @kf que producirá una lista completa de @keyframe .
Conclusión
Emmet es una herramienta de ahorro de tiempo muy grande para optimizar su proceso de desarrollo. Si solo conoces a Emmet, no es demasiado tarde para intentarlo ahora. Esos trucos son solo algunas de las características de Emmet. Hay muchos otros símbolos y sintaxis en Emmet, especialmente para CSS. Solo dirígete a los documentos de Emmet o a la hoja de trucos para mejorar tu lectura.
