Five steps to #KonMarie your CSS
It’s been exactly one week into my coding boot camp and roughly 5 months since I started my journey to become a professional developer. I have a confession to make. Despite my stubbornness to admit it, my codes up to this point have consistently been messy. I’ll write it down later. I’ll clean it up later. Let me just call this variable ‘a’ and name this class ‘b’. I’ll change them later. I never did. Not once.
“This is my revolution on the CSS train, 1001 lines long.” 
I have not styled that many websites. My own inexperience could be a reason why my style sheets are so long, but I reckon every front-end web developer out there must have, at some point in their career, faced a CSS file whose length might rival that of Mr Wilford’s train .
Though my style sheet are not literally 1001 lines long, some are more than half the way there. How can we declutter such a beast? I want to make a comment here that cleaning your own codes is generally encouraged by programmers; it approves readability and deployability among other reasons. The question remains how.
Marie Kondo — best-selling author on the art of decluttering homes  — insists that people tidy up based on categories rather than location. This limits the tasks we have to do to get our home organized. Imagine trying to organize a 5-bedroom house with toys and clothes all over the place.
Marie Kondo was certainly confronted with the same problem in her career as a home organizer. Her solution was to summarize 5 categories and how to deal with the items in each categories.
How to channel your inner Marie Kondo
To apply her solution to a CSS, we can think of each HTML section as a room, and the multitudes of selectors and properties being the items to tidy up. Beyond the usual indentation rules, below are the 5 steps that I have found to be useful while tidy up the metaphorical house that is my CSS.
It is useful to tackle the CSS setup snippets first. The setup snippets typically involves very general selectors like *, html, .clearfix class, etc… so it makes sense to include them at the beginning of the CSS. Their main function is to reset the default settings of various HTML elements and to ensure that they behave consistently across different web servers.
Unless your website communicates entirely in shapes and pictures, you will have text elements like <h1>, <h2>, <p>, <a>, <button>, <input>, etc… throughout the body of the HTML, and they are more often than not styled differently from one another. It could therefore be a good idea to group all fonts styling together and place them right after the setup snippets.
The advantage of group the fonts styling together is that it allows for greater accessibility; you don’t need to traverse the lengthy CSS to find the place where a font-style or font-size or color needs changing. They are all there at the beginning.
Another reason is separate the fonts styling from other properties is that they tend to be the constants in terms of styling a website. Margins paddings, and borders may need tweaking every so often but fonts need not to be changed as much. So it is good to get them out of the way first.
3. Gaps (gutters)
Gaps or gutters are the separation between the blocks in a website. They tend to be consistent for the aesthetics of the website, but the tricky thing about them is that they also can appear at odd places. A logical structure in the HTML is the first step that may save you some work further down the development road.
When styling in CSS there are 2 ways to tackle them:
- First method is to build a system of .wrapper classes that encapsulates the overall outer design of the website. The inner separations between the blocks of content may then be realized by tweaking the margins and paddings of those blocks.
- Second method is to define a CSS variable for the size of the gaps (gutters). The advantage of using a CSS variable to define the gap size is that it allows us to have systematic way to handle the margins and paddings around the blocks of content.
One of these 2 methods will suffice to tackle the gaps in a website, but we can certainly combine them and have a structure that is defined both from the outside and from the inside.
4. Order of Selectors
So far we have been talking about setting up the CSS. The bulk of the work, however, remains with styling each individual section of the HTML. To make the work more logical, it is a good practice to order the CSS selectors based on their hierarchy, which is defined by the structure of the HTML.
While the rule of specificity and the possibility to use !important mean that ordering selectors according to their hierarchy is not technically required. In practice, by ordering the selectors from general to specific (i.e. parents followed by children and grandchildren) and from top to bottom for siblings, it makes it so much easier to track what the CSS codes are doing. This is especially important if we collaborate in a team or in the case we need to revise the CSS months after deployment.
5. Group of Properties
Taking one level further, the properties within each selector may also be grouped in a logical manner that improves readability and facilitates collaboration. A poll with votes from 10,000 CSS developers  shows that 45% of them agree that properties grouped by type would be the best practice. What this means is that the properties are grouped based on their function to change colors, positioning, backgrounds, etc…
Interestingly there are also strong opinions for alphabetic grouping of properties. The justification for this choice is that it makes it easier to look up the name of a property among others.
,  Snowpiercer (TV series — 2020) developed by Josh Friedman and Graeme Manson based on Snowpiercer (2013) screenplay by Bong Joon-ho and Kelly Masterson and Le Transperceneige by Jacques Lob, Benjamin Legrand, and Jean-Marc Rochette
 Kondō, M., & Hirano, C. (2014). The life-changing magic of tidying up: The Japanese art of decluttering and organizing (First American edition.). Berkeley: Ten Speed Press.
 Chris Coyier, 2017, “Poll Results: How do you order your CSS properties?” URL: https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/