{"id":283900,"date":"2019-03-13T15:12:37","date_gmt":"2019-03-13T22:12:37","guid":{"rendered":"http:\/\/css-tricks.com\/?p=283900"},"modified":"2019-03-13T15:12:37","modified_gmt":"2019-03-13T22:12:37","slug":"the-benefits-of-structuring-css-around-appearance-and-layout","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-benefits-of-structuring-css-around-appearance-and-layout\/","title":{"rendered":"The Benefits of Structuring CSS Around Appearance and Layout"},"content":{"rendered":"<p>I like this point that Jonathan Snook made on Twitter and I\u2019ve been thinking about it non-stop because it describes something that\u2019s really hard about writing CSS:<\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p lang=\"en\" dir=\"ltr\">I feel like that tweet sounds either very shallow or very deep depending on how you look at it but in reality, I don&#39;t think any system, framework, or library really take this into consideration\u2014especially in the context of maintainability.<\/p>\n<p>&mdash; Snook (@snookca) <a href=\"https:\/\/twitter.com\/snookca\/status\/1100497661210357762?ref_src=twsrc%5Etfw\" rel=\"noopener\">February 26, 2019<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>In fact, I reckon this is the hardest thing about writing maintainable CSS in a large codebase. It\u2019s an enormous problem in my day-to-day work and I reckon it\u2019s what most <a href=\"https:\/\/css-tricks.com\/defining-and-dealing-with-technical-debt\/\">technical debt in CSS<\/a> eventually boils down to.<\/p>\n<p><!--more--><\/p>\n<p>Let\u2019s imagine we\u2019re styling a checkbox, for example \u2013 that checkbox probably has a position on the page, some margins, and maybe other positioning styles, too. And that checkbox might be green but turns blue when you click it. <\/p>\n<p><strong>I think we can distinguish between these two types of styles as layout and appearance.<\/strong><\/p>\n<p>But writing good CSS requires keeping those two types of styles separated. That way, the checkbox styles can be reused time and time again without having to worry about how those positioning styles (like margin, padding or width) might come back to bite you.<\/p>\n<p>At Gusto, we use Bootstrap\u2019s grid system which is great because we can write HTML like this that explicitly separates these concerns like so:<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;div class=\"row\"&gt;\r\n  &lt;div class=\"col-6\"&gt;\r\n    &lt;!-- Checkbox goes here --&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"col-6\"&gt;\r\n    &lt;!-- Another element can be placed here --&gt;\t\t\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p>Otherwise, you might end up writing styles like this, which will end up with a ton of issues if those checkbox styles are reused in the future: <\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.checkbox {\r\n  width: 40%;\r\n  margin-bottom: 60px;\r\n  \/* Other checkbox styles *\/\r\n}<\/code><\/pre>\n<p>When I see code like this, my first thought is, &#8220;Why is the width <code>40%<\/code> \u2013 and 40% of what?&#8221; All of a sudden, I can see that this checkbox class is now dependent on some other bit of code that I don\u2019t understand.<\/p>\n<p>So I\u2019ve begun to think about all CSS as fitting into one of those two buckets: appearance and layout. That\u2019s important because I believe those two types of styles should almost never be baked into one set of styles or one class. Layout on the page should be one set of styles, and appearance (like what the checkbox actually looks like) should be in another. And whether you do that with HTML or a separate CSS class is up for debate.<\/p>\n<p>The reason why this is an issue is that folks will constantly be trying to overwrite layout styles and that\u2019s when we eventually wind up with a codebase that resembles a spaghetti monster. I think this distinction is super important to writing great CSS that scales properly. What do you think? Add a comment below!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I like this point that Jonathan Snook made on Twitter and I\u2019ve been thinking about it non-stop because it describes something that\u2019s really hard about writing CSS: I feel like that tweet sounds either very shallow or very deep depending on how you look at it but in reality, I don&#39;t think any system, framework, [&hellip;]<\/p>\n","protected":false},"author":223806,"featured_media":278503,"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":"The Benefits of Structuring CSS Around Appearance and Layout","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/functional-css.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/functional-css.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/283900"}],"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=283900"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/283900\/revisions"}],"predecessor-version":[{"id":284599,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/283900\/revisions\/284599"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/278503"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=283900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=283900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=283900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}