1. Technology

Inheriting box-sizing Probably Slightly Better Best-Practice

I’m a big fan of resetting box-sizing to border-box, so much that we have a special day of the year around here. But there is a little adjustment to setting it that seems like a pretty good idea.

Here’s the adjusted version:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Credit on the inheritence idea to Jon Neal here, who says:

This will give you the same result, and make it easier to change the box-sizing in plugins or other components that leverage other behavior.

Explaining further, let’s say you have a component that was just designed to work with the default content-box box-sizing. You just wanted to use it and not mess with it.

.component {
  /* designed to work in default box-sizing */
  /* in your page, you could reset it to normal */
  box-sizing: content-box;
}

The trouble is, this doesn’t actually reset the entire component. Perhaps there is a <header> inside that component that expects to be in a content-box world. If this selector is in your CSS, in “the old way” of doing a box-sizing reset…

/* This selector is in most "old way" box-sizing resets */
* {
  box-sizing: border-box;
}

Then that header isn’t content-box as you might expect, it’s border-box. Like:

<div class="component"> <!-- I'm content-box -->
  <header> <!-- I'm border-box still -->
  </header>
</div>

In order to make that reset easier and more intuitive, you can use the inheriting snippet up at the top there, and the inheriting will be preserved.

It works:

See the Pen Easy to Reset Box-Sizing by Chris Coyier (@chriscoyier) on CodePen.

This isn’t a majorly huge thing. You might already be using the box-sizing reset the “old way” and never have gotten bit by it. That’s the case for me. But as long as we’re promoting a “best practice” style snippet, we might as well hone it to be the best it can be.


Inheriting box-sizing Probably Slightly Better Best-Practice is a post from CSS-Tricks

No Comments
Comments to: Inheriting box-sizing Probably Slightly Better Best-Practice

Recent Articles

Good Reads

Introduction:   Welcome to the vibrant coastal town of Fuengirola, Spain, where the sun-kissed beaches and lively atmosphere create the perfect backdrop for a fulfilling life. Amidst the beauty and bustle of this charming locale, we understand the importance of experiencing every moment to the fullest. For many, the key to unlocking the sounds of […]

Worlwide

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]
Introduction:   Welcome to the vibrant coastal town of Fuengirola, Spain, where the sun-kissed beaches and lively atmosphere create the perfect backdrop for a fulfilling life. Amidst the beauty and bustle of this charming locale, we understand the importance of experiencing every moment to the fullest. For many, the key to unlocking the sounds of […]
Cosmetic dentistry has evolved beyond mere dental hygiene; it’s become a powerful tool for enhancing both the aesthetics and confidence associated with your smile. Whether you’re considering teeth whitening, dental veneers, or another cosmetic dental procedure, a deeper understanding of this field can illuminate the positive impact it can have on your life and well-being. […]

Trending

Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]