{"id":304238,"date":"2020-02-27T16:02:59","date_gmt":"2020-02-27T23:02:59","guid":{"rendered":"https:\/\/css-tricks.com\/?p=304238"},"modified":"2020-03-10T12:09:00","modified_gmt":"2020-03-10T19:09:00","slug":"why-is-css-frustrating","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/why-is-css-frustrating\/","title":{"rendered":"Why is CSS Frustrating?"},"content":{"rendered":"\n<p>Here\u2019s <a href=\"https:\/\/twitter.com\/KevinJPowell\/status\/1231979370446802945\" rel=\"noopener\">a great thread<\/a> by Kevin Powell that&#8217;s making the rounds. He believes so many folks see CSS as a frustrating and annoying language:<\/p>\n\n\n\n<figure class=\"wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">That&#39;s just as unintuitive as JS starting to count at 0, but since you learned that and accept it, it&#39;s fine.<br><br>The real issue isn&#39;t with CSS. If you struggle with it, or ever call it unintuitive, it&#39;s probably because you don&#39;t really understand how CSS is meant to work.<\/p>&mdash; Kevin Powell (@KevinJPowell) <a href=\"https:\/\/twitter.com\/KevinJPowell\/status\/1231979376830484481?ref_src=twsrc%5Etfw\" rel=\"noopener\">February 24, 2020<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<!--more-->\n\n\n\n<p>Why do people respect JavaScript or other languages enough to learn them inside-out, and yet constantly dunk on CSS? Well, all this reminds me of what Jeremy Keith wrote a while back when he argued that <a href=\"https:\/\/adactio.com\/journal\/12571\" rel=\"noopener\">CSS is simple, but not easy<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Unlike a programming language that requires knowledge of loops,  variables, and other concepts, CSS is pretty easy to pick up. Maybe it\u2019s because of this that it has gained the reputation of being simple. It <em>is<\/em> simple in the sense of \u201cnot complex\u201d, but that doesn\u2019t mean it\u2019s easy.  Mistaking \u201csimple\u201d for \u201ceasy\u201d will only lead to heartache.<\/p><p>I think that\u2019s what\u2019s happened with some programmers coming to CSS for the first time. They\u2019ve heard it\u2019s simple, so they assume it\u2019s easy. But then when they try to use it, it doesn\u2019t work. It must be the fault of the language, because they know that they are smart, and this is supposed to be easy. So they blame the language. They say it\u2019s broken. And so they try to \u201cfix\u201d it by making it conform to a more programmatic way of thinking.<\/p><\/blockquote>\n\n\n\n<p>There have been times where I\u2019ve sat down with engineers to pair with them about a tricky layout issue and the CSS is treated as being beneath them \u2014 as if the language is somehow too unpredictable to warrant learning and mastering. Perhaps this has something to do with the past, where we\u2019ve spent years fighting the way browsers render things differently. But this is mostly a solved problem. I can\u2019t remember the last time I fought against browsers like that.<\/p>\n\n\n\n<p>Instead, I reckon the biggest issue that engineers face \u2014 and the reason why they find it all so dang frustrating \u2014 is that CSS forces you to face the <em>webishness<\/em> of the web. Things require fallbacks. You need to take different devices into consideration, and all the different ways of seeing a website: mobile, desktop, no mouse, no keyboard, etc. Sure, you have to deal with that when writing JavaScript, too, but it\u2019s easier to ignore. You can\u2019t ignore the layout of your site being completely broken on a phone.<\/p>\n\n\n\n<p><strong>Side note:<\/strong> We have <a href=\"https:\/\/css-tricks.com\/centering-css-complete-guide\/\">a guide to centering in CSS<\/a> not because CSS is busted and dumb, but because there are so many variables to the extent that a simple question like, \u201cHow do I center text?\u201d is actually much more complicated than it appears. There\u2019s so much context that\u2019s missed.<\/p>\n\n\n\n<p>This reminds me of one of my favorite blog posts of all time, where Brandon Smith argues that <a href=\"https:\/\/css-tricks.com\/css-is-awesome\/\">CSS is awesome<\/a> and we should respect the language and learn how it works under the hood:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>CSS is hard because its properties interact, often in unexpected ways. Because when you set one of them, you&#8217;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><p>One rule of thumb for mitigating this is, <strong>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 <code>min-width<\/code> instead of <code>width<\/code> where you can. Think in terms of rules, in terms of <em>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><\/blockquote>\n\n\n\n<p> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here\u2019s a great thread by Kevin Powell that&#8217;s making the rounds. He believes so many folks see CSS as a frustrating and annoying language:<\/p>\n","protected":false},"author":223806,"featured_media":304256,"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":[4],"tags":[870],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/css-mind-blown.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/css-mind-blown.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304238"}],"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\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=304238"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304238\/revisions"}],"predecessor-version":[{"id":304925,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304238\/revisions\/304925"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/304256"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=304238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=304238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=304238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}