{"id":175473,"date":"2014-07-15T09:53:47","date_gmt":"2014-07-15T16:53:47","guid":{"rendered":"http:\/\/css-tricks.com\/?p=175473"},"modified":"2014-09-23T06:04:53","modified_gmt":"2014-09-23T13:04:53","slug":"inheriting-box-sizing-probably-slightly-better-best-practice","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/inheriting-box-sizing-probably-slightly-better-best-practice\/","title":{"rendered":"Inheriting box-sizing Probably Slightly Better Best-Practice"},"content":{"rendered":"

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

<\/p>\n

Here’s the adjusted version:<\/p>\n

html {\r\n  box-sizing: border-box;\r\n}\r\n*, *:before, *:after {\r\n  box-sizing: inherit;\r\n}<\/code><\/pre>\n
Credit on the inheritence idea to Jon Neal here<\/a>, who says:<\/p>\n
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.<\/p><\/blockquote>\n
Explaining further, let’s say you have a component that was just designed to work with the default content-box<\/code> box-sizing<\/code>. You just wanted to use it and not mess with it. <\/p>\n
.component {\r\n  \/* designed to work in default box-sizing *\/\r\n  \/* in your page, you could reset it to normal *\/\r\n  box-sizing: content-box;\r\n}<\/code><\/pre>\n
The trouble is, this doesn’t actually reset the entire component. Perhaps there is a <header><\/code> inside that component that expects to be in a content-box<\/code> world. If this selector is in your CSS, in “the old way” of doing a box-sizing<\/code> reset…<\/p>\n
\/* This selector is in most \"old way\" box-sizing resets *\/\r\n* {\r\n  box-sizing: border-box;\r\n}<\/code><\/pre>\n
Then that header isn’t content-box<\/code> as you might expect, it’s border-box<\/code>. Like:<\/p>\n
<div class=\"component\"> <!-- I'm content-box -->\r\n  <header> <!-- I'm border-box still -->\r\n  <\/header>\r\n<\/div><\/code><\/pre>\n
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.<\/p>\n
It works:<\/p>\n
See the Pen Easy to Reset Box-Sizing<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n
This isn’t a majorly huge thing. You might already be using the box-sizing<\/code> 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. <\/p>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[478],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/175473"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=175473"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/175473\/revisions"}],"predecessor-version":[{"id":184338,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/175473\/revisions\/184338"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=175473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=175473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=175473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}