January 9, 2018 Keep your CSS cool with CSScomb
For the past year, I have been using an extension called CSScomb to keep my CSS clean and consistent based on my own taste.
CSScomb is a formatter for CSS that can be installed as an extension on most popular text editors, including Sublime Text, Atom, and VS Code. It allows you to stop worrying about how your CSS looks and focus on the code. In this post, I will go over how to install and set up CSScomb.
Note: I use VS Code on macOS. However, these same principles apply to other text editors.
Installing CSScomb is very easy. See below.
Create a custom config file
You can create a custom config on CSScomb’s own generator here. The generator will show you 24 different CSS examples, ask you to pick which formatting you prefer out of the available options, and spit out a chunk of key-value pairs.
Once you’ve run through the generator, copy and paste the key-value pairs into your text editor and save them in a file named
Use a config file
Place your custom config file (or my example config) in
~/.vscode/. By default,
.vscode will be hidden. One quick way to find it is to type
~/.vscode/ in Spotlight search.
Now, let’s put this file to use:
- Go to Code > Preferences > Settings or press
,to open the settings window
- Paste the following key-value pair in User Settings:
your-config.csscomb.jsonwith your own config’s filename
Sto save the changes to the file
Open the command palette by navigating to View > Command Palette… or press
P. In the command palette window, type
format and click CSSComb: Format Styles.
There you have it! If you anything is unclear or you just want to say hey, shoot me a message on Twitter (@tayl_rbryant).