{"id":337813,"date":"2021-04-07T13:41:57","date_gmt":"2021-04-07T20:41:57","guid":{"rendered":"https:\/\/css-tricks.com\/?p=337813"},"modified":"2021-04-07T13:41:59","modified_gmt":"2021-04-07T20:41:59","slug":"css-is-in-fact-awesome","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-is-in-fact-awesome\/","title":{"rendered":"CSS Is, In Fact, Awesome"},"content":{"rendered":"\n<p><a href=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-is-awesome.jpg\">You&#8217;ve seen the iconic image.<\/a> Perhaps some of what makes that image so iconic is that people see what they want to see in it. If you see it as a critique of CSS being silly, weird, or confusing, you can see that in the image. If you see it as CSS being powerful and flexible, you&#8217;ve got that too. That&#8217;s what <a href=\"https:\/\/blog.jim-nielsen.com\/2021\/css-is-in-fact-awesome\/\" rel=\"noopener\">Jim Neilsen is saying<\/a> here, reacting to <a href=\"https:\/\/talks.hiddedevries.nl\/2gDDUr\" rel=\"noopener\">a presentation by Hidde de Vries<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p> This is the&nbsp;<em>power<\/em>&nbsp;of CSS. It gives you options. Use them or don\u2019t.<\/p><\/blockquote>\n\n\n\n<!--more-->\n\n\n\n<p>Want it to overflow visibly? It can. Want it to lop off overflowing content? It can. Want it to stretch? It can. Want it to ellipse? It can. Want it to wrap or not wrap? It can. Want to scale the type to fit? It can. If you love CSS, this is probably exactly why.<\/p>\n\n\n\n<p>Mandy Michael has a great thread on this from a few years back:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">Or you know, how about we just make the box bigger so it fits the text, we could just get rid of the explicit width and height and everything will just work.<\/p>&mdash; Mandy Michael (@Mandy_Kerr) <a href=\"https:\/\/twitter.com\/Mandy_Kerr\/status\/985353473335091202?ref_src=twsrc%5Etfw\" rel=\"noopener\">April 15, 2018<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/css-is-awesome\/\">Brandon Smith wrote about all this<\/a> a few years back as well. I remain chuffed that Eric Meyer asked the original creator of the image, Steve Frank of Panic, about it and Steve once <a href=\"https:\/\/css-tricks.com\/css-is-awesome\/#comment-1609829\">stopped by<\/a> to explain the real origin:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p>It was 2009 and I\u2019d spent what seemed like hours trying to do something in CSS that I already knew I could do in seconds with tables. I was trying&nbsp;<em>really hard<\/em>&nbsp;to do it with CSS because that\u2019s what you\u2019re supposed to do, but I just wasn\u2019t very good at it (spoiler alert: I\u2019m still not very good at it).<\/p><p>I do have a slightly better grasp on the concept of overflow now, but at the time it just blew my mind that someone thought the default behavior should be to just have the text honk right out of the box, instead of just making the box bigger like my nice, sensible tables had always done.<\/p><p>Anyway, I just had this moment of pure frustration and, instead of solving the problem properly, I spent 5 minutes creating a snarky mug and went back to using tables. Because that\u2019s my signature move in times of crisis.<\/p><\/blockquote>\n\n\n\n<p>So, the original is indeed born out of frustration, but has nonetheless inspired many love letters to CSS. It has also certainly earned its place in CSS infamy, right alongside <a href=\"https:\/\/giphy.com\/gifs\/yYSSBtDgbbRzq\/html5\" rel=\"noopener\">Peter Griffin struggling with window blinds<\/a>, as one of the most iconic CSS images ever.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You&#8217;ve seen the iconic image. Perhaps some of what makes that image so iconic is that people see what they want to see in it. If you see it as a critique of CSS being silly, weird, or confusing, you can see that in the image. If you see it as CSS being powerful and [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":337853,"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":true,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-is-awesome-mug-cropped.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":176373,"url":"https:\/\/css-tricks.com\/githubs-css\/","url_meta":{"origin":337813,"position":0},"title":"GitHub&#8217;s CSS","date":"July 25, 2014","format":false,"excerpt":"Mark Otto takes us on a tour of the CSS of GitHub.com. So great to read a straight-talking bit like this, warts and all. This is 90% the same as we do things at CodePen. One major difference is that they combine all their CSS into two files and just\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322591,"url":"https:\/\/css-tricks.com\/parsel-a-tiny-permissive-css-selector-parser\/","url_meta":{"origin":337813,"position":1},"title":"Parsel: A tiny, permissive CSS selector parser","date":"October 2, 2020","format":false,"excerpt":"If you've ever thought to yourself, gosh, self, I wish I could have an Abstract Syntax Tree (AST) of this CSS selector, Lea has your back. If you've ever thought that same thing for an entire CSS file, that's what PostCSS is, which has gone v8. PostCSS doesn't do anything\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/parsel.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":304728,"url":"https:\/\/css-tricks.com\/use-avisited-in-your-css-stylesheet\/","url_meta":{"origin":337813,"position":2},"title":"Use a:visited in your CSS stylesheet","date":"March 9, 2020","format":false,"excerpt":"Evert Pot: Unfortunately, when setting a new color (e.g. a { color: #44F }) the \u2018purple visited link\u2019 feature also gets disabled. I think this is a shame, as there\u2019s so many instances where you\u2019re going through a list of links and want to see what you\u2019ve seen before.The 2\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/link-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":304264,"url":"https:\/\/css-tricks.com\/when-css-blocks\/","url_meta":{"origin":337813,"position":3},"title":"When CSS Blocks","date":"February 27, 2020","format":false,"excerpt":"Tim Kadlec: One particular pattern [for loading non-critical CSS] I\u2019ve seen is the preload\/polyfill pattern. With this approach, you load any stylesheets as preloads instead, and then use their\u00a0onload\u00a0events to change them back to a stylesheet once the browser has them ready. So you're trying to make your stylesheet more\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/css-block-html.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":155842,"url":"https:\/\/css-tricks.com\/cssoff-2013\/","url_meta":{"origin":337813,"position":4},"title":"CSSOff 2013","date":"November 12, 2013","format":false,"excerpt":"It's live! If this is the first you've heard of it, it's a contest where you get a Photoshop document and have two weeks to convert it into HTML and CSS. You're judged on an established set of criteria. The design this year is by Daniel Mall. You have to\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":331135,"url":"https:\/\/css-tricks.com\/what-makes-css-hard-to-master\/","url_meta":{"origin":337813,"position":5},"title":"What Makes CSS Hard To Master","date":"December 18, 2020","format":false,"excerpt":"Tim Severien: I feel we, the community, have to acknowledge that CSS is easy to get started with and hard to master. Let\u2019s reflect on the language and find out what makes it hard. Tim's reasons CSS is hard (in my own words): You can look at a matching Ruleset,\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/css-block-html.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/337813"}],"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=337813"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/337813\/revisions"}],"predecessor-version":[{"id":340273,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/337813\/revisions\/340273"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/337853"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=337813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=337813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=337813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}