![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/css-is-awesome.jpg?ssl=1\")
<\/figure>\nMost of you reading this have probably encountered this image at least once. It’s a joke we can all relate to, right? You try and do something simple with CSS, and the arcane ways in which even basic properties interact inevitably borks it up.<\/p>\n
If this joke epitomizes the collective frustration that developers have with CSS, then at the risk of ruining the fun, I thought it would be interesting to dissect the bug at its heart, as a case study in why people get frustrated with CSS.<\/p>\n
The problem<\/h3>\n
See the Pen CSS is Awesome<\/a> by Brandon (@brundolf<\/a>) on CodePen<\/a>.<\/p>\n There are three conditions that have to be met for this problem to occur:<\/p>\n In real-world scenarios, the second condition is most likely the thing that needs to be fixed, but we’ll explore all three.<\/p>\n This is little bit unfair to the box’s content because the word AWESOME<\/strong> can’t fit on one line at the given font size and container width. By default, text wraps at white space and doesn’t break up words. But let’s assume for a moment that we absolutely cannot afford to change the container’s size. Perhaps, for instance, the text is a blown-up header on a site that’s being viewed on an especially small phone.<\/p>\n To get a continuous word to wrap, we have to use the CSS property See the Pen CSS is Awesome: word-break<\/a> by Brandon (@brundolf<\/a>) on CodePen<\/a>.<\/p>\n In this case, the only way to make the content more responsive was to enable word breaking. But there are other kinds of content that might be overflowing. If There are many possible ways the container element might have been forced to not grow. For example: More often than not, if you set an element’s If one of your flex items has overflowing content, things get a little more complicated. The first thing you can do is check if you’re specifying its width, as in the previous section. If you aren’t, probably what’s happening is the element is “flex-shrinking”. Flex items first get sized following the normal rules; Setting Sometimes there’s just no way around it. Maybe the container width is limited by the screen size itself. Maybe the content is a table of data, with rows that can’t be wrapped and columns that can’t be collapsed any further. We can still handle the overflow more gracefully than just having it spill out wherever.<\/p>\n The most straightforward solution is to hide the content that’s overflowing. Setting See the Pen CSS is Awesome: overflow:hidden<\/a> by Brandon (@brundolf<\/a>) on CodePen<\/a>.<\/p>\n If the content is text, we can make this a little more visually appealing by adding See the Pen CSS is Awesome: ellipsis<\/a> by Brandon (@brundolf<\/a>) on CodePen<\/a>.<\/p>\n The preferable remedy is usually going to be setting See the Pen CSS is Awesome: overflow:auto<\/a> by Brandon (@brundolf<\/a>) on CodePen<\/a>.<\/p>\n This is a particularly graceful fallback, because it means that no matter what<\/em>, the user will be able to access all of the content. Plus, the scrollbar will only appear if it’s needed, which means it’s not a bad idea to add this property in key places, even if you don’t expect it to come into play.<\/p>\n CSS is hard because its properties interact, often in unexpected ways. Because when you set one of them, you’re never just setting that one thing. That one thing combines and bounces off of and contradicts with a dozen other things, including default things that you never actually set yourself.<\/p>\n One rule of thumb for mitigating this is, never be more explicit than you need to be<\/strong>. Web pages are responsive by default. Writing good CSS means leveraging that fact instead of overriding it. Use percentages or viewport units instead of a media query if possible. Use Another rule of thumb is to let either width or height be determined by content<\/strong>. In this case, that wasn’t enough, but in most cases, it will be. Give things an avenue for expansion. When you’re setting rules for how your elements get sized, especially if those elements will contain text content, think through the edge cases. “What if this content was pared down to a single character? What if this content expanded to be three paragraphs? It might not look great, but would my layout be totally broken?”<\/p>\n CSS is weird. It’s unlike any other code, and that makes a lot of programmers uncomfortable. But used wisely it can, in fact, be awesome.<\/p>\n","protected":false},"excerpt":{"rendered":" I bought this mug recently for use at work. Being a professional web developer, I decided it would establish me as the office’s king of irony. The joke on it isn’t unique, of course. I’ve seen it everywhere from t-shirts to conference presentations.<\/p>\n","protected":false},"author":243416,"featured_media":255927,"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":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/css-is-awesome-scaled.jpg?fit=2560%2C2013&ssl=1","jetpack-related-posts":[{"id":301447,"url":"https:\/\/css-tricks.com\/how-many-css-properties-are-there\/","url_meta":{"origin":255923,"position":0},"title":"How many CSS properties are there?","date":"January 14, 2020","format":false,"excerpt":"Tomasz \u0141akomy posted a joke tweet about naming all the CSS attributes and Tejas Kumar replied with a joke answer, going as far as making an npm module. You can even run a terminal command to see them: npx get-all-css-properties You'll get 259 of them. The source code uses the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/css-sparkle-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":340919,"url":"https:\/\/css-tricks.com\/css-hell\/","url_meta":{"origin":255923,"position":1},"title":"CSS Hell","date":"May 21, 2021","format":false,"excerpt":"Collection of common CSS mistakes, and how to fix them From Stef\u00e1nia P\u00e9ter. Clever idea for a site! Some of them are little mind-twisters that could bite you, and some of them are honing in on best practices that may affect accessibility. Why \"CSS Hell\"? It's a\u00a0joke\u00a0idea I stole from\u00a0HTMHell.\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-19-at-10.18.58-AM.png?fit=1084%2C452&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":342358,"url":"https:\/\/css-tricks.com\/inline-styles-as-classes-lol\/","url_meta":{"origin":255923,"position":2},"title":"Inline Styles as Classes (lol)","date":"June 16, 2021","format":false,"excerpt":"If you're abhorred by using inline styles, just move that style to the class attribute! And then make sure you have CSS in place that, ya know, does what it says on the box. https:\/\/twitter.com\/samthor\/status\/1402825668061130755 OK lemme dig in and totally ruin the joke. First off, it's a joke, so\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/E3fWebBVUAQOoaZ.png?fit=620%2C480&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":314419,"url":"https:\/\/css-tricks.com\/the-mad-magazine-fold-in-effect-in-css\/","url_meta":{"origin":255923,"position":3},"title":"The Mad Magazine Fold-In Effect in CSS","date":"June 25, 2020","format":false,"excerpt":"This was always my favorite thing in Mad magazine. One page (the inside of the back cover, I think) was covered in a zany illustration. You folded that page in thirds, covering up the middle-third of that image, and a new image would form because the illustration was designed to\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/mad-magazine-fold-in.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":340599,"url":"https:\/\/css-tricks.com\/json-in-css\/","url_meta":{"origin":255923,"position":4},"title":"JSON in CSS","date":"May 20, 2021","format":false,"excerpt":"Jonathan Neal tweeted a heck of a little CSS trick the other day, putting JSON inside CSS and plucking it out with JavaScript. Valid values for custom properties are quite liberal! So this looks for a CSS rule (e.g. a whole block, like #x { y: z; } where the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/css-json.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":317266,"url":"https:\/\/css-tricks.com\/position-vertical-scrollbars-on-opposite-side-with-css\/","url_meta":{"origin":255923,"position":5},"title":"Position Vertical Scrollbars on Opposite Side with CSS","date":"July 22, 2020","format":false,"excerpt":"Fair warning: I can't say I recommend this in general because it breaks a very strong expectation of where scrollbars are, which are useful for a lots of folks, not to mention, a core accessibility feature for many. But it is a fascinating CSS trick and the web is a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/scrollbar-progress.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/06\/css-is-awesome-scaled.jpg?fit=1024%2C805&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/255923"}],"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\/243416"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=255923"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/255923\/revisions"}],"predecessor-version":[{"id":256261,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/255923\/revisions\/256261"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/255927"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=255923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=255923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=255923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
Fixing the content size<\/h3>\n
Breaking up words<\/h4>\n
word-break<\/code>. Setting it to break-all<\/code> will instruct the browser to break up words if necessary to wrap text content within its container.<\/p>\nOther content<\/h4>\n
word-wrap<\/code> were set to nowrap<\/code>, the text wouldn’t even wrap in-between words. Or, the content could be a block-level element, whose width<\/code> or min-width<\/code> is set to be greater than the container’s width.<\/p>\nFixing the container size<\/h3>\n
width<\/code>, max-width<\/code>, and flex<\/code>. But the thing they all have in common, is that the width is being determined by something other than its content<\/em>. This isn’t inherently bad, especially since there is no fixed height, which in most cases would cause the content to simply expand downwards. But if you run into a variation on this situation, it’s worth considering whether you really need<\/em> to be controlling the width, or whether it can be left up to the page to determine.<\/p>\nAlternatives to setting
width<\/code><\/h4>\nwidth<\/code>, and you set it in pixels, you really meant to set either min-width<\/code> or max-width<\/code>. Ask yourself what you really care about. Was this element disappearing entirely when it lacked content because it shrunk to a width of 0? Set min-width<\/code>, so that it has dimension but still has room to grow. Was it getting so wide that a whole paragraph fit on one line and was hard to read? Set max-width<\/code>, so it won’t go beyond a certain limit, but also won’t extend beyond the edge of the screen on small devices. CSS is like an assistant: you want to guide it, not dictate its every move.<\/p>\nOverflow caused by flexbox<\/h4>\n
width<\/code>, content, etc. The resulting size is called their flex-basis<\/code> (which can also be set explicitly with a property of the same name). After establishing the flex basis for each item, flex-grow<\/code> and flex-shrink<\/code> are applied (or flex<\/code>, which specifies both at once). The items grow and shrink in a weighted way, based on these two values and the container’s size.<\/p>\nflex-shrink: 0<\/code> will instruct the browser that this item should never get smaller than its flex basis. If the flex basis is determined by content (the default), this should solve your problem. be careful with this, though. You could end up running into the same problem again in the element’s parent. If this flex item refuses to shrink, even when the flex container is smaller than it, it’ll overflow and you’re back to square one.<\/p>\nHandling overflow<\/h3>\n
overflow: hidden;<\/h4>\n
overflow: hidden;<\/code> will simply cut things off where they reach the border of the container element. If the content is of a more aesthetic nature and doesn’t include critical info, this might be acceptable.<\/p>\ntext-overflow: ellipsis;<\/code>, which automatically adds a nice little “\u2026” to text that gets cut off. It is worth noting, though, that you’ll see slightly less of the actual content to make room for the ellipsis. Also note that this requires overflow: hidden;<\/code> to be set.<\/p>\noverflow: auto;<\/h4>\n
overflow-x: auto;<\/code>. This gives the browser the go-ahead to add a scroll bar if the content overflows, allowing the user to scroll the container in that direction.<\/p>\nWhy does this conundrum resonate so universally with people who have used CSS?<\/h3>\n
min-width<\/code> instead of width<\/code> where you can. Think in terms of rules, in terms of what you really mean to say<\/em>, instead of just adding properties until things look right. Try to get a feel for how the browser resolves layout and sizing, and make your changes and additions on top of that judiciously. Work with CSS, instead of against it.<\/p>\n