Aprende como usar la propiedad box-sizing correctamente en tus proyectos

Share on Pinterest
Comparte con tus amigos










Enviar

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

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

5 respuestas a “Como utilizar box-sizing correctamente”

  1. Cesar Dpq dice:

    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?

  2. Erick Alvarez dice:

    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.

  3. Tiamat Hathor dice:

    Eres muy bueno explicando se aprende mucho contigo gracias,porfa enseña a hacer esta caja de comentarios.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Aprende con nuestros cursos

React y Firebase: El Curso Completo, Práctico y desde Cero

React y Firebase: Curso Completo, Práctico y desde Cero

En este curso aprenderás React desde lo mas básico y paso por paso hasta un nivel avanzado donde podrás crear sitios y aplicaciones web reales.

Inicia el curso

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 5: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso