{"id":374775,"date":"2022-11-08T05:51:48","date_gmt":"2022-11-08T13:51:48","guid":{"rendered":"https:\/\/css-tricks.com\/?p=374775"},"modified":"2022-11-08T12:17:05","modified_gmt":"2022-11-08T20:17:05","slug":"what-css-do-you-absolutely-have-to-know-in-2022","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/what-css-do-you-absolutely-have-to-know-in-2022\/","title":{"rendered":"What CSS Do You Absolutely Have to Know in 2022?"},"content":{"rendered":"\n

Sacha Greif openly wondered<\/a> whether CSS has gotten to be, you know, too big. With all the goodies that’ve shipped in browsers the past couple of years \u2014 container queries<\/a>! relative color syntax<\/a>! cascade layers<\/a>! logical properties<\/a>! ranges in media queries<\/a>! individual transforms<\/a>! :has()<\/code> selector<\/a>! \u2014 and all of what’s on the possible horizon \u2014 CSS Toggles<\/a>! nesting<\/a>! color mixing<\/a>! scroll-linked animations<\/a>! scoped styles<\/a>! \u2014 there’s definitely a different learning curve for CSS these days for new and seasoned front-enders alike.<\/p>\n\n\n\n

There may have been a time when it was possible to know most CSS properties and how they work. Those days are long-gone, at least for an old hand like me. But that sort of begs the question: what CSS do you absolutely have to know?<\/strong><\/p>\n\n\n\n

Vincas Stonys recently took a stab at a list<\/a>. Chris put one together<\/a> based on features released since CSS3. You probably have an idea of what you would include in a list. If I had to put a Top 5 together and limit myself to only properties and selectors, it might look something like this…<\/p>\n\n\n\n\n\n\n

writing-mode<\/code><\/h3>\n\n\n

I can’t say enough about the writing-mode<\/a><\/code> property. What makes it important \u2014 especially from a learning perspective \u2014 is that it sets you up for inclusive principles that account for crafting layouts, regardless of the user’s language. A good understanding of writing-mode<\/code> is going to lead to an understanding of logical properties and values<\/a>, and those, in turn, set the stage for understanding document flow and thinking in terms of block<\/code>, inline<\/code>, start<\/code>, and end<\/code> rather than physical directions.<\/p>\n\n\n

display<\/code><\/h3>\n\n\n

I have a hard time believing anyone can write good CSS without having a solid grasp on the display<\/a><\/code> property. It’s both a property and a framework for creating layouts. There’s no Flexbox or CSS Grid without it, making it sort of like a gatekeeper to understanding those important features.<\/p>\n\n\n\n

Plus, the display<\/code> property perfectly complements writing-mode<\/code>. It’s exactly what you’ll need once writing-mode<\/code> has exposed you to document flow and logical directions. You’re going to need a property to either change an element’s normal flow (like changing a block element to an inline one) or start laying things out (like creating a flexible layout context) and that is where display<\/code> comes into play.<\/p>\n\n\n

margin<\/code> \/ padding<\/code> \/ border<\/code><\/h3>\n\n\n

Ugh, I’m totally cheating here but think learning margin<\/code>, padding<\/code>, and border<\/code> together is sort of unavoidable. They’re all parts of The Box Model<\/a>, all help with spacing and styling, and all require getting acquainted with CSS length units<\/a>. Knowing what these properties are desgined to do and how they contribute to the computed size of an element certainly gives you a lot more styling control, and dispels any confusion about why an element is the size that it is \u2014 a common CSS headache!<\/p>\n\n\n

::before<\/code> and ::after<\/code><\/h3>\n\n\n

Another one where I’m cheating a bit. Yes, ::before<\/code> and ::after<\/code> are two individual pseudo-elements, but again, I can’t imagine learning about one without the other. It’s a two-fer!<\/p>\n\n\n\n

I remember how mind-blowing it was for me to learn that these existed and can be used to create everything from cool UI effects<\/a> to complete single-div illustrations<\/a>. It opens up new possibilities and provides a first peek at how powerful CSS really is.<\/p>\n\n\n

@media<\/code><\/h3>\n\n\n

Oof, I’m already at my fifth and final item in the list and feel like there’s still so much CSS goodness that belongs here. But if I have to choose one last thing, it would be media queries<\/a>. Why? Because it’s a prime ingredient for creating fluid, flexible layouts and different viewing contexts. Container queries<\/a> might wind up knocking this off my list as it matures, but for now, @media<\/code> is a great primer for responsive design.<\/p>\n\n\n\n

Beyond that, @media<\/code> is a nice first step into the conditional qualities of CSS. Whether we’re writing a query based on the type of device thats being used (e.g., screen<\/code> or print<\/code>) or a when the browser’s viewport meets a certain criteria (e.g., width >= 768px<\/code>), the @media<\/code> syntax is incredibly useful for creating layouts that are optimized for different conditions.<\/p>\n\n\n\n

Oh, and we haven’t even touched on how @media<\/code> relates to accessibility, thanks to its ability to apply styles based on a user’s preferences<\/a> (e.g., prefers-reduced-motion<\/a><\/code>). So, in addition to crafting conditional layouts, media queries are a nice next step toward understanding inclusive design.<\/p>\n\n\n

Honerable mentions<\/h3>\n\n\n

Distilling CSS into a list of five must-know properties and selectors is tough, especially now that CSS more powerful today than it was, say, even five years ago. There are a number of other items I really wanted to include, like (in no particular order):<\/p>\n\n\n\n

  • calc()<\/code><\/li>
  • has()<\/code><\/li>
  • color<\/code><\/li>
  • font<\/code><\/li>
  • overflow<\/code><\/li>
  • position<\/code> (especially this)<\/li>
  • z-index<\/code><\/li><\/ul>\n\n\n\n

    But I stand by my choices. Learning CSS is more important than memorizing a list of properties. It’s a journey and I think the five I chose carve a nice little learning path that sets the stage for writing good style rules and next steps for diving deeper into CSS.<\/p>\n\n\n

    Alright, tell me yours!<\/h3>\n\n\n

    Disagree with my list? You should! I’ll bet you have some smart opinions and I want to see how you would have rounded out a Top 5 list.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Sacha Greif openly wondered whether CSS has gotten to be, you know, too big. With all the goodies that’ve shipped in browsers the past couple of years \u2014 container queries! relative color syntax! cascade layers! logical properties! ranges in media queries! individual transforms! :has() selector! \u2014 and all of what’s on the possible horizon \u2014 […]<\/p>\n","protected":false},"author":2508,"featured_media":294740,"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\/2019\/08\/css-tricks-logo-blur.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":340967,"url":"https:\/\/css-tricks.com\/a-cornucopia-of-container-queries\/","url_meta":{"origin":374775,"position":0},"title":"A Cornucopia of Container Queries","date":"June 9, 2021","format":false,"excerpt":"I don't know about y'all, but my feeds have been flooded with articles about CSS Container Queries these past few weeks. The buzz about container queries actually started back in December after Miriam Suzanne posted a proposal (picking up on David Baron's proposal) but it was news in a late-March\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":334168,"url":"https:\/\/css-tricks.com\/nested-media-queries\/","url_meta":{"origin":374775,"position":1},"title":"Nested Media Queries","date":"February 9, 2021","format":false,"excerpt":"We don't have \"regular\" nesting in CSS. Maybe this becomes a thing someday, or something like it. That would be cool, although that pre-spec doesn't mention anything about media queries. I'd hope we get that right out of the gate if we ever do get native CSS nesting. In fact,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/nested-css-media-queries.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363937,"url":"https:\/\/css-tricks.com\/css-database-queries\/","url_meta":{"origin":374775,"position":2},"title":"CSS Database Queries? Sure We Can!","date":"February 23, 2022","format":false,"excerpt":"Kinda silly sounding, isn't it? CSS database queries. But, hey, CSS is capable of talking to other languages in the sense that it can set the values of things that they can read. Plus, CSS can request other files, and I suppose a server could respond to that request with\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/tweet-1.jpg?fit=828%2C567&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":338521,"url":"https:\/\/css-tricks.com\/say-hello-to-css-container-queries\/","url_meta":{"origin":374775,"position":3},"title":"Say Hello to CSS Container Queries","date":"April 20, 2021","format":false,"excerpt":"Container queries are finally here! Now available behind a flag in the latest version of Chrome Canary, you can go ahead and experiment to your heart\u2019s content. Oh, and if you\u2019re not familiar with container queries then check out this post by Ethan Marcotte about why they're so dang important.\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/container-queries.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":16872,"url":"https:\/\/css-tricks.com\/conditional-content-via-css-media-queries\/","url_meta":{"origin":374775,"position":4},"title":"Conditional Content via CSS Media Queries","date":"April 29, 2012","format":false,"excerpt":"Jeremy Keith has a great article on his journey to allowing JavaScript to load in content based on the currently active media query. This allows you to keep media queries only in the CSS (DRY!). The article was sans-demo, so I made one.","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":197268,"url":"https:\/\/css-tricks.com\/quantity-queries-for-css\/","url_meta":{"origin":374775,"position":5},"title":"Quantity Queries for CSS","date":"March 4, 2015","format":false,"excerpt":"Heydon Pickering with some clever CSS selectors like: li:nth-last-child(n+6), li:nth-last-child(n+6) ~ li { \/* Selects all list items if there are 6 or more *\/ } Similar to Matt Mastracci's article where he focuses on styles for groups of specific numbers.","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/374775"}],"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\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=374775"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/374775\/revisions"}],"predecessor-version":[{"id":375202,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/374775\/revisions\/375202"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/294740"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=374775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=374775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=374775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}