{"id":283562,"date":"2019-03-06T08:51:38","date_gmt":"2019-03-06T15:51:38","guid":{"rendered":"http:\/\/css-tricks.com\/?p=283562"},"modified":"2019-03-06T08:51:38","modified_gmt":"2019-03-06T15:51:38","slug":"refactoring-tunnels","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/refactoring-tunnels\/","title":{"rendered":"Refactoring Tunnels"},"content":{"rendered":"

We\u2019ve been writing a lot about refactoring CSS lately, from how to take a slow and methodical approach<\/a> to getting some quick wins<\/a>. As a result, I\u2019ve been reading a ton about this topic and somehow stumbled upon this post by Harry Roberts about refactoring and how to mitigate the potential risks that come with it:<\/p>\n

Refactoring can be scary. On a sufficiently large or legacy application, there can be so much fundamentally wrong with the codebase that many refactoring tasks will run very deep throughout the whole project. This puts a lot of pressure on developers, especially considering that this is their chance to “get it right this time”. This can feel debilitating: “Where do I start?” “How long is this going to take?” “How will I know if I\u2019m doing the right thing?”<\/p><\/blockquote>\n

<\/p>\n

Harry then comes up with this metaphor of a refactoring tunnel where it\u2019s really easy to find yourself stuck in the middle of a refactor and without any way out of it. He argues that we should focus on small, manageable pieces instead of trying to tackle everything at once:<\/p>\n

\n

Resist the temptation to refactor anything that runs right the way throughout the project. Instead, identify smaller and more manageable tasks: tasks that have a much smaller surface area, and therefore a much shorter Refactoring Tunnel.<\/p>\n

These tasks can still aim toward a larger and more total goal but can be realised in much safer and shorter timeframes. Want to move all of your classes from BEM to BEM(IT)? Sure, but maybe just implement it on the nav first.<\/p>\n<\/blockquote>\n

This way feels considerably slower, for sure, but there\u2019s so much less risk involved.<\/p>\n","protected":false},"excerpt":{"rendered":"

We\u2019ve been writing a lot about refactoring CSS lately, from how to take a slow and methodical approach to getting some quick wins. As a result, I\u2019ve been reading a ton about this topic and somehow stumbled upon this post by Harry Roberts about refactoring and how to mitigate the potential risks that come with […]<\/p>\n","protected":false},"author":223806,"featured_media":283688,"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":[17],"tags":[1347],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/tunnel.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":16809,"url":"https:\/\/css-tricks.com\/refactoring-14000-lines-of-css\/","url_meta":{"origin":283562,"position":0},"title":"Refactoring >14,000 lines of CSS","date":"April 17, 2012","format":false,"excerpt":"Eugene Fedorenko talks about how Beanstalk refactored the whole app to use SASS. I'm sure a lot of folks are in this situation right now. You want to use SASS, but you have a big app and it's a big move. Short answer: yes. The only thing I'd suggest they\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":264446,"url":"https:\/\/css-tricks.com\/refactoring-way-design-system\/","url_meta":{"origin":283562,"position":1},"title":"Refactoring Your Way to a Design System","date":"December 26, 2017","format":false,"excerpt":"Mina Markham on refactoring a large and complex codebase into an agile design system, slowly over time: If you\u2019re not lucky enough to be able to start a new design system from scratch, you can start small and work on a single feature or component. With each new project comes\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":285067,"url":"https:\/\/css-tricks.com\/technical-debt-is-like-tetris\/","url_meta":{"origin":283562,"position":2},"title":"Technical Debt is Like Tetris","date":"March 21, 2019","format":false,"excerpt":"Here\u2019s a wonderful post by Eric Higgins all about refactoring and technical debt. He compares giant refactoring projects to being similar to Tetris: Similar to running a business, Tetris gets harder the longer you play. Pieces move faster and it becomes harder to keep up. Similar to running a business,\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/tetris.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":281890,"url":"https:\/\/css-tricks.com\/the-slow-and-steady-refactor\/","url_meta":{"origin":283562,"position":3},"title":"The Slow and Steady Refactor","date":"January 28, 2019","format":false,"excerpt":"Over the past week or so, I\u2019ve been reading Refactoring by Martin Fowler and it\u2019s all about how to make sweeping changes to a large codebase in a way that doesn\u2019t cause everything to break. I bring this up because there\u2019s a lot of really good notes in this book\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/AA80A672-C7B5-46BC-A99E-4CEC5AD53F13.png?fit=1008%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":270523,"url":"https:\/\/css-tricks.com\/turn-sublime-text-3-into-a-javascript-ide\/","url_meta":{"origin":283562,"position":4},"title":"Turn Sublime Text 3 into a JavaScript IDE","date":"May 11, 2018","format":false,"excerpt":"Sublime Text is one of the most popular editors for web development and software development in general. It\u2019s very smooth and fast compared to other editors (being written in C++ helps that speed). Sublime also has tons of plugins you can find through Package Control. But it\u2019s only a text\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/sublime-text-logo.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":285255,"url":"https:\/\/css-tricks.com\/powers-of-two\/","url_meta":{"origin":283562,"position":5},"title":"Powers of Two","date":"March 28, 2019","format":false,"excerpt":"Refactoring is one of those words that evokes fear in the eyes of many folks, from developers to product owners and everyone in between. It may as well be a four-letter word in many ways. It's also something that we talk about quite a bit around here because, like books\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/code-stripes.png?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\/283562"}],"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=283562"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/283562\/revisions"}],"predecessor-version":[{"id":284184,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/283562\/revisions\/284184"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/283688"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=283562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=283562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=283562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}