{"id":2308,"date":"2012-03-25T19:09:50","date_gmt":"2012-03-25T19:09:50","guid":{"rendered":"http:\/\/sunpig.com\/mt-entry-2308.html"},"modified":"2012-03-27T13:27:46","modified_gmt":"2012-03-27T13:27:46","slug":"outdenting-properties-for-debug-css","status":"publish","type":"post","link":"https:\/\/sunpig.com\/martin\/2012\/03\/25\/outdenting-properties-for-debug-css\/","title":{"rendered":"Outdenting properties for debug CSS"},"content":{"rendered":"<p>Whenever I&#8217;m tinkering with CSS for experimental or debugging purposes, I usually end up adding a ton of properties to help me figure out how things fit together: weird background colours, borders, alternate fonts, etc. I don&#8217;t want to leave these properties in place when I put the CSS live, though. To mark a CSS property as a temporary\/debug property, I <em>outdent<\/em> it, putting it at column 0 in the file:<\/p>\n<pre class=\"code\"><code class=\"css\" data-language=\"css\">.monkey{\n    position:absolute;\n    height:200px;\n    width:300px;\n    top:20px;\n    left:20px;\n    background:url(\/images\/monkey.jpg) no-repeat;\nborder:2px solid green;\n    z-index:10;\n}<\/code><\/pre>\n<p>If you diff your code and review your changes before you commit to your version control system <em>(you do use a VCS, don&#8217;t you?)<\/em>, it&#8217;s often easy enough to spot a debug property, and fix it before you actually check it in. But sometimes the changes are subtle, and they slip through anyway. By outdenting properties, they remain visually obvious in your code even <em>after<\/em> accidentally pushing them to production.<\/p>\n<p>Sometimes adding a property isn&#8217;t the right debugging technique. Sometimes you want to override a property instead &mdash; and set yourself a reminder to change it back when you&#8217;re done. Because <em>later<\/em> property values overrides earlier ones, this technique works just as well:<\/p>\n<pre class=\"code\"><code class=\"css\" data-language=\"css\">.fez{\n    position:absolute;\n    height:200px;\n    width:300px;\n    top:20px;\ntop:100px;\n    left:20px;\n    background:url(\/images\/fez.jpg) no-repeat;\n    z-index:10;\n}<\/code><\/pre>\n<p>You can do the same by commenting out the original property, of course, but I find the outdenting technique faster to clean up afterwards.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Whenever I&#8217;m tinkering with CSS for experimental or debugging purposes, I usually end up adding a ton of properties to help me figure out how things fit together: weird background colours, borders, alternate fonts, etc. I don&#8217;t want to leave these properties in place when I put the CSS live, though. To mark a CSS &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/sunpig.com\/martin\/2012\/03\/25\/outdenting-properties-for-debug-css\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Outdenting properties for debug CSS&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-2308","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/posts\/2308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/comments?post=2308"}],"version-history":[{"count":0,"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/posts\/2308\/revisions"}],"wp:attachment":[{"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/media?parent=2308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/categories?post=2308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/tags?post=2308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}