Kelly Sutton has written a post called Deletability and I’ve been thinking about it all day and how his ideas relate to writing CSS:
By working with code, we see that modularity and deletability are closely related. Properly modularized code is easy to delete.
Writing deletable code is writing good code.
Apparently, this is a common approach to writing software although I’ve never heard of this concept when taken to the front-end side of things. But! I think it should be a goal for us to have in mind when we’re naming classes or building complex layouts. And after mulling over this idea all day I think that questions like “can I throw this code away easily?” should be a measuring stick for whether we’re doing a good job at writing CSS.
For example, a while back I was working on a project where the style of one checkbox element impacted the styling of another, completely unrelated checkbox. The code for each was splintered across multiple files and directories so designers on the team would constantly push back and forth, undoing each other’s work in a mad attempt to solve their own problem without thinking about the much larger problems of inheritance and CSS design. They’d notice an issue in their own part of the app, change the CSS and move on with their lives. And I’m not trying to be a jerk here – some applications have tens of thousands of lines of CSS and apps can be devilishly complex so it’s no wonder that they didn’t see this problem coming up.
But if the original design of those checkboxes had been built with the concept of deletability in mind I think we’d have avoided this problem altogether. The
font-size, color and background-color properties would’ve been isolated in the correct files. And so looking at one file we’d be able to see all of the code for this one specific element. In other words, the system would have made itself clear to us in an instant.
If in the future, we can begin to ditch large portions of our codebase without impacting unrelated components, then we deserve to raise a glass to ourselves for being so gosh darn smart this whole time.
Source: CSS Tricks Deletability