Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. HTML & CSS
Code

Consejo rápido: Nunca escriba un prefijo del proveedor de nuevo

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Juan Pablo Diaz Cuartas (you can also view the original English article)

Conoces el ejercicio bastante bien. ¿Desea dar una sección de las esquinas redondeadas de su sitio web con CSS3? Luego, necesitará nada menos que tres prefijos de proveedor: webkit, moz y el formulario recomendado por el W3C. ¿No es una gran pérdida de tiempo, sin mencionar el espacio en la pantalla? ¿Qué pasa si, en cambio, pudiéramos usar un archivo de clase? Bueno, podemos! Te mostraré cómo hoy.


La clave

Si usamos una herramienta como LESS o SASS, podemos crear nuestros propios archivos de clase con bastante facilidad. ¿No tienes idea de lo que estoy hablando? Bueno, primero, revisa este consejo rápido. Te enseñará exactamente cómo ponerte en marcha con Less.


Archivo de clases

A continuación, tenemos que crear un archivo de clases principales que se utilizará en cada proyecto. Siéntase libre de almacenar este archivo en cualquier lugar que desee, sin embargo, en el video de arriba, uso nuestra popular (y exclusiva) aplicación Structurer.

Vamos a hacer el primero juntos, pero asegúrese de revisar el screencast para más detalles.

En cuanto a las convenciones de nomenclatura, he descubierto que es más inteligente usar el nombre oficial recomendado para su nombre de clase, en este caso, "border-radius". Para declarar las variables con Less, las anteponemos con un símbolo @. En este caso, estamos estableciendo un valor predeterminado de 3px, sin embargo, si necesitamos anular ese valor en nuestro proyecto, ¡es muy fácil!


Algunos ejemplos

En este punto, simplemente enjuague y repita para cada propiedad que requiera múltiples prefijos de proveedor. Aquí hay algunos consejos para comenzar:

Sombra de la caja

Transición

Caja

Flexionar


Conclusión

Me encantaría escuchar tus pensamientos sobre esto. Si te gusta la idea, volvamos a cargar esta hoja de estilos.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.