Aprende como usar la propiedad box-sizing correctamente en tus proyectos
Una de las propiedades que llego para solucionarnos la vida en el diseño web es la propiedad box-sizing, propiedad que nos permite cambiar el modelo de caja y ajustarlo a nuestras necesidades, si aun no sabes acerca de box-sizing te recomiendo leer antes este articulo: Como cambiar el modelo de caja de los navegadores con Box-sizing CSS
Como utilizar box-sizing correctamente
Anteriormente lo que hacíamos era aplicar box-sizing a todos los elementos de la web con el selector universal * de la siguiente manera:
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
Con esto conseguíamos que todos los elementos de nuestra web tuvieran la propiedad border-box, y esta forma de hacerlo esta bien, pero no es la mejor. Cuando trabajamos con proyectos mas grandes como por ejemplo un theme para un CMS como WordPress lo recomendable es hacerlo de la siguiente manera:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Vamos a explicarlo para que puedas entender porque esta practica es mejor que utilizando el selector universal *. Como ya mencione anteriormente, si trabajamos con proyectos mas grandes lo mas probable es que vayas a añadir nuevos módulos como plugins en el caso de WordPress, estos plugins tienen sus propios estilos CSS, y si alguno de ellos esta diseñado para funcionar con box-sizing:content-box; tendremos un problema porque nosotros establecimos que box-sizing:border-box; se aplicara a todos los elementos.
Con esta nueva practica si nosotros necesitamos agregar un plugin o modulo, simplemente tenemos que declarar que el plugin tenga un box-sizing:content-box;
Esta practica es efectiva y lo mejor seria que la utilizaras en todos los proyectos, aunque si estas en proyectos pequeños lo mas probable es que no la llegues a utilizar.
Créditos de esta practica a CSS Tricks
Muy buen tip a los que desarrollamos themes en wordpress…. Una duda, cuando utilizamos la propiedad DISPLAY:FLEX creo que ya no es necesario poner el BOX-SIZING: BORDER-BOX o me equivoco?
Muy buen tuto Carlos, me sirvió mucho al igual que el post donde explicas lo que es el box-sizing, pero me preguntaba si tienes algún post o puedes hacer uno detallado sobre los pseudo elementos :before y :after. Te lo agradecería mucho. Saludos.
Muchas gracias, me alegra que te haya servido.
De momento no tengo un post, pero si que puedo hacer uno. Atento a la web a la pagina de facebook para cuando lo publique.
Saludos
Claro que si Carlos, estaré atento ;) Saludos.
Eres muy bueno explicando se aprende mucho contigo gracias,porfa enseña a hacer esta caja de comentarios.