gap<\/code><\/a> and that developers have an appetite these days to use CSS Flexbox and Grid on nearly everything at both a macro and micro level.<\/p>\n","protected":false},"excerpt":{"rendered":"Say you’ve got a <Card \/> component. It’s highly likely it shouldn’t be butted right up against any other components with no spacing around it. That’s true for… pretty much every component. So, how do you handle component spacing in a design system? Do you apply spacing using margin directly on the <Card \/>? Perhaps […]<\/p>\n","protected":false},"author":3,"featured_media":362229,"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":[844,1396,586],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/component-layout-example.png?fit=1709%2C1048&ssl=1","jetpack-related-posts":[{"id":306134,"url":"https:\/\/css-tricks.com\/building-a-scalable-css-architecture-with-bem-and-utility-classes\/","url_meta":{"origin":362044,"position":0},"title":"Building a Scalable CSS Architecture With BEM and Utility Classes","date":"April 21, 2020","format":false,"excerpt":"Maintaining a large-scale CSS project is hard. Over the years, we've witnessed different approaches aimed at easing the process of writing scalable CSS. In the end, we all try to meet the following two goals: Efficiency: we want to reduce the time spent thinking about how things should be done\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/website-sketch.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305764,"url":"https:\/\/css-tricks.com\/max-stoibers-strong-opinion-about-margins\/","url_meta":{"origin":362044,"position":1},"title":"Max Stoiber’s Strong Opinion About Margins","date":"March 31, 2020","format":false,"excerpt":"Going with that title instead of the classic developer clickbait version Max used. ;) We should ban margin from our components. Don't use margin?! This thing I've been doing my entire career and don't have any particular problems with?! Well, that's not exactly Max's point. The point is that any\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/margins.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303923,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-calc-in-css\/","url_meta":{"origin":362044,"position":2},"title":"A Complete Guide to calc() in CSS","date":"March 17, 2020","format":false,"excerpt":"CSS has a special calc() function for doing basic math. In this guide, let's cover just about everything there is to know about this very useful function. Here's an example: .main-content { \/* Subtract 80px from 100vh *\/ height: calc(100vh - 80px); } In this guide, let's cover just about\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/calc-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":268217,"url":"https:\/\/css-tricks.com\/theming-with-variables-globals-and-locals\/","url_meta":{"origin":362044,"position":3},"title":"Theming With Variables: Globals and Locals","date":"March 16, 2018","format":false,"excerpt":"Setting CSS variables to theme a design system can be tricky: if they are too scoped, the system will lose consistency. If they are too global, you lose granularity. Maybe we can fix both issues. I\u2019d like to try to boil design system variables down to two types: Global and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/css-varaibles.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":338270,"url":"https:\/\/css-tricks.com\/building-a-settings-component\/","url_meta":{"origin":362044,"position":4},"title":"Building a Settings Component","date":"April 14, 2021","format":false,"excerpt":"This is a tremendous CSS-focused tutorial from Adam Argyle. I really like the \"just for gap\" concept here. Grid is extremely powerful, but you don't have to use all its abilities every time you reach for it. Here, Adam reaches for it for very light reasons like using it as\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/h6LZhScslprBcFol4gGp.png?fit=1200%2C845&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":282893,"url":"https:\/\/css-tricks.com\/responsive-designs-and-css-custom-properties-defining-variables-and-breakpoints\/","url_meta":{"origin":362044,"position":5},"title":"Responsive Designs and CSS Custom Properties: Defining Variables and Breakpoints","date":"February 25, 2019","format":false,"excerpt":"CSS custom properties (a.k.a. CSS variables) are becoming more and more popular. They finally reached decent browser support and are slowly making their way into various production environments. The popularity of custom properties shouldn\u2019t come as a surprise, because they can be really helpful in numerous use cases, including managing\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/website-states.jpg?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\/362044"}],"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=362044"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/362044\/revisions"}],"predecessor-version":[{"id":362767,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/362044\/revisions\/362767"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/362229"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=362044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=362044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=362044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}