{"id":201,"date":"2008-04-11T04:45:25","date_gmt":"2008-04-11T11:45:25","guid":{"rendered":"http:\/\/css-tricks.com\/indent-css-changes-you-are-unsure-about\/"},"modified":"2008-04-11T04:45:27","modified_gmt":"2008-04-11T11:45:27","slug":"indent-css-changes-you-are-unsure-about","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/indent-css-changes-you-are-unsure-about\/","title":{"rendered":"Indent CSS Changes You Are Unsure About"},"content":{"rendered":"

Sometimes the simplest little things can save you major headaches later. The kind of headache I am talking about here is when you make a change to a CSS file only to find out days later that it broke something on a part of your website you didn’t notice at the time. It could be very obvious. You remember exactly what you did and can jump back in there and fix it. But what if you made a lot of changes that day, or you just simply can’t remember?<\/p>\n

When I do tinkering in my CSS files, I like to leave some indication behind of what I changed. Sometimes this could mean a large-scale system like subversion, or making a full site backup before you start making changes. If you don’t feel like what you are about to do warrants that large of a step (I hope you are backing anyway though!), there are some “littler” techniques you might try to keep track of those changes.<\/p>\n

As you have guessed from the title of this article, one of those little techniques is simply indenting new or changed lines in your CSS. For example:<\/p>\n

#sidebar ul li a {\r\n     display: block;\r\n     background-color: #ccc;\r\n          border-bottom: 1px solid #999;\r\n     margin: 3px 0 3px 0;\r\n          padding: 3px;\r\n}<\/code><\/pre>\n
In this example you might be trying to spice up how the links look in your sidebar. To see how it looks, you give each of them a bit of padding and a bottom border to help separate them and let them breathe a bit visually. You save your changes, go look at your site, and bellissimo<\/em>! It’s beautiful! You go about your merry way until 3 days later you get an email:<\/p>\n
“Hey Chris, you should take a look at your contact page, something is borked =P”
\n-Love, Mom<\/em><\/p>\n
Uh oh. Looks like when you made that last round of changes, you forgot to look everywhere<\/strong> on your site to make sure everything went as planned. Now something is borked… but exactly was the change that caused the problem? That’s where your indented lines come in. A quick glance down through your CSS file should reveal all of your last changes, and you can spot the problem lines. <\/p>\n
Extending the idea<\/h3>\n
Just indenting is a very simple solution to this problem and has some obvious problems. For example, is the indented line brand new, or was something just changed in that line? If it was changed, what was it changed from? At what point do you “un-indent” the line?<\/p>\n
The answers to those questions are up to you. Simply the indenting might be enough for you. If your CSS file is humungous, you don’t trust yourself to be able to remember what you did, or are just one of those “better safe than sorry<\/a>” types, you might want to extend this idea a little deeper:<\/p>\n
#sidebar ul li a {\r\n     display: block;\r\n     background-color: #ccc;\r\n          border-bottom: 1px solid #999; \/* ADDED Apr. 9, 2008 *\/\r\n     margin: 3px 0 3px 0;\r\n          padding: 3px;  \/* CHANGED Feb. 14, 2008 (Prev. 1px) *\/\r\n}<\/code><\/pre>\n
So what do you all think? How do you handle this?<\/p>\n","protected":false},"excerpt":{"rendered":"
Sometimes the simplest little things can save you major headaches later. The kind of headache I am talking about here is when you make a change to a CSS file only to find out days later that it broke something on a part of your website you didn’t notice at the time. It could be […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","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":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":303619,"url":"https:\/\/css-tricks.com\/blame-the-implementation-not-the-technique\/","url_meta":{"origin":201,"position":0},"title":"Blame the implementation, not the technique","date":"February 17, 2020","format":false,"excerpt":"I'm not sure we've gotten much better at this since Tim Kadlec wrote this in 2012: Stop me if you\u2019ve heard this one before.\u201cResponsive design is bad for performance.\u201d\u201cUser agent detection is bad. Don\u2019t segment the web.\u201d\u201cHybrid apps don\u2019t work as well as native apps.\u201d\u201cCSS preprocessors shouldn\u2019t be used because\u2026","rel":"","context":"In "Link"","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":[]},{"id":360490,"url":"https:\/\/css-tricks.com\/can-css-prevent-tooltips-from-overflowing\/","url_meta":{"origin":201,"position":1},"title":"What Would it Take to Prevent CSS Tooltips From Overflowing?","date":"January 11, 2022","format":false,"excerpt":"Say you have an elements with CSS tooltips and you're going to position those tooltips such that it opens up next to the element on hover (or probably better: when clicked\/tapped). Next to it where? Above it? What if the element is already really close to the top of the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/Directionally-aware.png?fit=816%2C616&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":348288,"url":"https:\/\/css-tricks.com\/we-had-90-unused-css-because-everybody-was-afraid-to-touch-the-old-stuff\/","url_meta":{"origin":201,"position":2},"title":"“We had 90% unused CSS because everybody was afraid to touch the old stuff”","date":"August 18, 2021","format":false,"excerpt":"Over at the JS Party podcast: [Kend C. Dodds]: [...] ask anybody who\u2019s done regular, old CSS and they\u2019ll tell you that \u201cI don\u2019t know if it\u2019s okay for me to change this, so I\u2019m gonna duplicate it.\u201d And now we\u2019ve got \u2013 at PayPal (this is not made up)\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/unused-css.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":362578,"url":"https:\/\/css-tricks.com\/thierry-koblentz-atomic-css\/","url_meta":{"origin":201,"position":3},"title":"The Making of Atomic CSS: An Interview With Thierry Koblentz","date":"February 3, 2022","format":false,"excerpt":"I interviewed Thierry Koblentz, creator of Atomic CSS, to understand the history and background that led to making of the popular CSS framework. Thierry, now retired, has vast experience writing CSS at large scale and has previously worked as a front-end engineer at Yahoo!. Thierry is widely credited with bringing\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/atomic-css-pieces.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":300577,"url":"https:\/\/css-tricks.com\/clips-from-my-dev-ama\/","url_meta":{"origin":201,"position":4},"title":"Clips from my DEV AMA","date":"December 20, 2019","format":false,"excerpt":"I recently did an AMA over on DEV. Just taking the opportunity to port over some answers here like a good indiewebber. If you were starting out as a front end dev in 2020, what would you say is the first thing you would learn and why? You need to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/cool-chris-glasses.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":201,"position":5},"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 "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/201"}],"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=201"}],"version-history":[{"count":0,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/201\/revisions"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}