Customizing Group Commenting
If you want to enhance your coding experience, consider tweaking the sort-order.js file in the CSScomb package.
- To begin, with Sublime Text running, go to
Preferences > Browse Packages…
; This action will unveil the Packages directory.
- In the Packages folder, locate
CSScomb/node_modules/csscomb/lib/options/sort-order.js
.
To ensure a safety net, make a duplicate of this file before making any modifications. I saved my copy under the name of sort-order-original.js.
Make a replica of this file in an alternate location for future reference if needed. I relocated my duplicate up one level into a fresh folder named ../originals/options/sort-order.js
.
Note: It's advisable to move it rather than simply rename it within the same directory to avoid unintentional activation by the module.- Open
sort-order.js in Sublime Text to start editing.
Examine this comparison for the required amendments.
Refer to this comparison for the necessary alterations. (This recent version introduces new logic to prevent repetitive group comments when utilizing CSScomb multiple times.)- If you are content with the changes, meticulously substitute the entire contents of
sort-order.js with the revised code. Feel free to adapt them further to align with your preferences. Save.
Note: Essentially, these adjustments involve expanding each sorted object with an extra property that accommodates a CSS comment as specified by you in your User Settings. The upcoming step explains where to introduce the comments.
- You're now set to include comments based on groups. In Sublime Text, navigate to
Preferences > Package Settings > CSScomb > Settings – User
. If you haven't configured your personal settings yet, replicate the content from Settings – Default to Settings – User to get started.
- In the user settings document, search for the
"sort-order" attribute. It comprises either a list of property names or nested arrays of property names. By default, CSScomb creates a blank line between nested array groups, but we've adjusted the file accordingly.
- You can optionally insert a comment as the first entry in any nested array. The
sort-order.js file will recognize this and display it at the beginning of the group. If no comment is specified, a default empty line will appear instead.
Sample User Settings:
"sort-order": [
[
"/* LAYOUT */",
"position",
"z-index",
"top",
"right",
"bottom",
"left"
],
[
"/* DISPLAY */",
"display",
…
"flex-align"
],
[
"/* TYPOGRAPHY */",
"font",
…
"line-height"
],
[
…
]
]
Prior to CSScomb Execution:
.selector {
font-family: Arial;
line-height: 1;
position: relative;
display: block;
background-color: red;
}
After CSScomb Processing:
.selector {
/* LAYOUT */
position: relative;
/* DISPLAY */
display: block;
/* TYPOGRAPHY */
font-family: Arial;
line-height: 1;
background-color: red;
}