I got an email from Gary Jones about the CSS property ordering in the Core Contributor Handbooks. He says:
Currently the CCH says the CSS properties should be grouped as:
- Display
- Positioning
- Box model
- Colors and Typography
- Other
I don’t think this is prescriptive enough, and it’s certainly not easy for core contributors (or theme / plugin developers who also follow the WP standards) to go along through each property and decide which category it fits in to before having to manually move lines up and down.
As part of the Genesis 2.0 CSS reorganisation, I came across http://csscomb.com – it’s available as a plugin for most of the popular editors, but also as an online tool as well. It already comes with tests, but I also did some with multiple properties in a rule (i.e. padding using rem, then px fallback) and mis-ordered browser-prefixed properties, and it sorted them perfectly. It also keeps any whitespace between the : and value, to keep browser-prefixed values lines up, as per the CCH.
If you head to the online tool, then click on Settings, you’ll see it pops-out with a comprehensive list of CSS properties, including ones for CSS3 and prefixed properties, which WP might not have made a decision about if they don’t use them.
I think this tool can be used in one of two ways:
1) Amend the CCH so that Display comes after Positioning, so it then matches the CSScomb defaults and can be easily used by anyone online or in their editor without further set up, making it easy to automate the property ordering process.
or
2) Take the list of properties, and update it to reflect the order that WP prefers, and make this available as a list (Gist) that can be copied back into the online settings, and as an equivalent file for use in editors (Sublime Text 2 uses a JSON file), including a list of instructions for both.
Being more descriptive, by having someone else keep track of the full list of properties (including CSS4, CSS5 properties etc.), and having a tool that is available for those with and without compatible editors, means that the process can be automated, and a chunk of potential human error is removed.
I’d love to hear what the docs / CS folks have to say about it using this tool. Being able to open a .css file, select all, then hitting a keyboard shortcut to have it automagically match the WP standards has got to be worth investigating?
What do you guys think? Is this something we want to look into?