{"id":291843,"date":"2019-06-27T14:29:11","date_gmt":"2019-06-27T21:29:11","guid":{"rendered":"http:\/\/css-tricks.com\/?p=291843"},"modified":"2019-06-27T14:29:11","modified_gmt":"2019-06-27T21:29:11","slug":"which-css-is-awesome-makes-the-most-sense-if-you-dont-know-css-well","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/which-css-is-awesome-makes-the-most-sense-if-you-dont-know-css-well\/","title":{"rendered":"Which CSS IS AWESOME makes the most sense if you don&#8217;t know CSS well?"},"content":{"rendered":"<p>Peter-Paul posted this question:<\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p lang=\"en\" dir=\"ltr\">Which of the examples in the image do you consider correct?<\/p>\n<p>If you know CSS well, don&#39;t reply, just retweet. <\/p>\n<p>If you don&#39;t know CSS too well, please reply to the poll in the next tweet. <a href=\"https:\/\/t.co\/4bgnf9Wdkc\">pic.twitter.com\/4bgnf9Wdkc<\/a><\/p>\n<p>&mdash; ppk &#x1f1ea;&#x1f1fa; (@ppk) <a href=\"https:\/\/twitter.com\/ppk\/status\/1140617885309644800?ref_src=twsrc%5Etfw\" rel=\"noopener\">June 17, 2019<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>Note the interesting caveat: only vote in the poll if you <em>don&#8217;t<\/em> know CSS well. <\/p>\n<p><!--more--><\/p>\n<p>The winning answer was <strong>D<\/strong>! You gotta wonder if the result would have been different if the request for non-CSS experts wasn&#8217;t there.<\/p>\n<p>I like to think I know CSS OK, so I didn&#8217;t vote. My brain goes like this:<\/p>\n<ol>\n<li>I think he&#8217;s asking &#8220;by default,&#8221; so the answer may assume there&#8217;s no other CSS doing anything to that text.<\/li>\n<li>I wish I <em>knew why<\/em> the box was that particular width, but I guess I&#8217;ll just assume it&#8217;s a set <code>width<\/code>.<\/li>\n<li>It&#8217;s not <strong>B<\/strong> because ellipsis stuff <a href=\"https:\/\/css-tricks.com\/snippets\/css\/truncate-string-with-ellipsis\/\">requires extra stuff<\/a>, and doesn&#8217;t work on multiple lines like that &mdash; unless we&#8217;re talking <a href=\"https:\/\/css-tricks.com\/line-clampin\/\">line clamping<\/a>, which is even weirder.<\/li>\n<li>It&#8217;s not <strong>C<\/strong> because that requires hiding overflow which is never really a default &mdash; that is, except off the top and left of the browser window, I guess. Or in an iframe.<\/li>\n<li>It&#8217;s not <strong>D<\/strong> because words just don&#8217;t break like that unless you do <a href=\"https:\/\/css-tricks.com\/where-lines-break-is-complicated-heres-all-the-related-css-and-html\/\">pretty specific stuff<\/a>.<\/li>\n<li><strong>A<\/strong> actually makes decent sense. It&#8217;s weird to look at, but I&#8217;ve been dealing with stuff busting out of containers my whole career. <i>C&#8217;est la vie.<\/i><\/li>\n<\/ol>\n<p>Remember, we&#8217;ve done a deep dive into <a href=\"https:\/\/css-tricks.com\/css-is-awesome\/\">CSS IS AWESOME<\/a> before and how it interestingly captures the weirdness of CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Peter-Paul posted this question: Which of the examples in the image do you consider correct? If you know CSS well, don&#39;t reply, just retweet. If you don&#39;t know CSS too well, please reply to the poll in the next tweet. pic.twitter.com\/4bgnf9Wdkc &mdash; ppk &#x1f1ea;&#x1f1fa; (@ppk) June 17, 2019 Note the interesting caveat: only vote in [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":292040,"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":[478],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/css-is-awesome.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":337121,"url":"https:\/\/css-tricks.com\/how-to-describe-elements-natural-sizing-behavior\/","url_meta":{"origin":291843,"position":0},"title":"How to describe element&#8217;s natural sizing behavior","date":"March 26, 2021","format":false,"excerpt":"PPK: When introducing width and height I explain that by default width takes as much horizontal space as it can, while height takes as little vertical space as possible. This leads to a discussion of these two opposed models that I excerpt below. My question is: which names do I\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/percentage-padding-width.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":340897,"url":"https:\/\/css-tricks.com\/fit-content-and-fit-content\/","url_meta":{"origin":291843,"position":1},"title":"fit-content and fit-content()","date":"May 20, 2021","format":false,"excerpt":"Here's some hardcore deep-dive CSS nerdery from PPK. If you can wrap your mind around min-content (the smallest an element can be based on the content it contains) and max-content (the largest the content of an element can push it) then it's just one more little step to understanding fit-content.\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/fit-content.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":19740,"url":"https:\/\/css-tricks.com\/ppk-on-gradients\/","url_meta":{"origin":291843,"position":2},"title":"PPK on Gradients","date":"January 4, 2013","format":false,"excerpt":"The problem with gradients is that they are a syntactic nightmare. The gradient spec writers and browser makers changed their mind not once but twice. Thus we have three sets of syntax, and all three occasionally crop up even today. I call these old, middle, and new syntax. I still\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":304584,"url":"https:\/\/css-tricks.com\/negative-margins\/","url_meta":{"origin":291843,"position":3},"title":"Negative Margins","date":"March 9, 2020","format":false,"excerpt":"PPK digs into the subject, which he found woefully undercovered in web tech documentation. Our entry doesn't mention them at all, which I'll aim to fix. Agree on this situation: This is by far the most common use case for negative margins. You give a container a padding so that\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/negative-margins.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":197596,"url":"https:\/\/css-tricks.com\/poll-wrapup-the-number-of-people-touching-css\/","url_meta":{"origin":291843,"position":4},"title":"Poll Wrapup: The Number of People Touching CSS","date":"March 10, 2015","format":false,"excerpt":"The last poll around here was: How many people touch the CSS in your current main project? Defined as: Actually author and edit it. Or, are an active consumer of it. You\/they write HTML and use the CSS available thus have a vested interest in the actual CSS, not just\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":342930,"url":"https:\/\/css-tricks.com\/inherit-initial-unset-revert\/","url_meta":{"origin":291843,"position":5},"title":"inherit, initial, unset, revert","date":"June 22, 2021","format":false,"excerpt":"There are four keywords that are valid values for any CSS property (see the title). Of those, day to day, I'd say I see the inherit used the most. Perhaps because it's been around the longest (I think?) but also because it makes logical sense (\"please inherit your value from\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.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\/291843"}],"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=291843"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/291843\/revisions"}],"predecessor-version":[{"id":292041,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/291843\/revisions\/292041"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/292040"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=291843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=291843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=291843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}