I’ve chosen the following style for coding CSS (I use VS Code editor):
.selectorID
{
property
property
.
.
,
property
}
Using the period in front of the selector name is a mnemonic I’ve chosen. It helps me remember what the term is a CSS selector when I encounter it. The curly brackets are part of the syntax. Each property is on a separate line.
At first, I created the selector/properties groups in the order I planned to use them in my HTML, but that protocol breaks down quickly. Now that numbers of groups have grown, I find I’d like to be able to scan the code alphabetically.
I’ve looked around for tools that would a) sort the code I’ve already written, and b) automatically insert new groups where they belong alphabetically.
I haven’t found anything. These seems like it would be an important housekeeping standard in use universally, but I have no experience except my personal, hobbyist use.
UPDATE:
After some more searching, I ran into the terms ‘rules’ and ‘properties’. In understand ‘rules’ to mean what I described as selector/properties groups above. That would mean that ‘rules’ start with selectorIDs I create and 'properties are the reserve words and their attributes that follow selectorIDs.
I found there are extensions that will organize properties. I’m not looking for this, but may want to do this later. I want to sort the ‘rules’ without changing the properties and qualifiers contained within the curly brackets.
Does any such tool exist? If not, what are ‘best practices’ that I should adopt?
A period is syntax for selecting a class. You should just stick to totally standard “style” and do it the way everyone else does it. You want your code to be easily readable by anyone else. (And syntactically correct of course)
Hi there. There are several tools available for sorting CSS code. Online tools like CSS Comb, Prettier, and CleanCSS help organize properties efficiently. In VS Code, extensions like Prettier and CSS Comb can format and sort CSS automatically. Command-line tools such as Stylelint and PostCSS Sorting allow for more advanced customization. If you’re using Tailwind CSS, it has a built-in sorting mechanism. These tools help maintain clean and structured CSS, improving readability and consistency.
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
For a tool to automate the selector order without a high probability of it breaking the styles, the CSS would have to be authored using very strict rules that can be enforced automatically. It can not know through static analysis what the correct order of the selectors are. The combination of cascade, selector specificity, inherited properties, and so on, makes it almost impossible. It can not know the intent of the authored CSS.
You could maybe use the @layer rule and code comments to denote rules that should be automatically grouped by a build system. But it still can’t order the rules inside the @layer rules.
The order and the type of selector used matters, it is up to the author to make sure they are applied in the correct order using the correct specificity. Or you can avoid the cascade and specificity and use utility classes for everything (e.g. Tailwind).
Thank you for pointing out @layer. I haven’t found a reason to use it yet, but that may be down to my inexperience.
As for automating sorting, here’s an idea that might work with stipulations stated:
Suppose the user uses a discipline in creating CSS code using VS Code wherein all selectors are preceded by a period followed by a chosen selector word or phrase with no blank spaces and followed selector qualifiers. Ex
.some-selector-without-spaces > div or other text
{
property: qualifer;
property: qualifer;
.
.
.
property: qualifer;
}
Code such as the example might be parsed to create (for lack of a better term) an array. All of the selector up to the first blank space would be treated as the sort key and all after the first blank space would be treated as a string associated with the key. For example:
In the example, “.some-selector-without-spaces” would be the sort key.
The parsing algorithm would have to insert the <br> if there is no indentifying character inserted by VS Code at the end of each line.
Such an array or string created by the parsing algorithm could then be sorted; after sorting all strings, results could then be re-formatted to appear in the same syntactical and presentation form as the original. Of course, comments would have to be incorporated within the curly brackets along with properties and qualifiers, or the parsing algorithm could be programmed to recognize them as VS Code does and deal with them in a prescribed manner, placing their content in the ‘array’ then re-formatting them for presentation after sorting.
That’s a lot of word salad, but I hope the idea is understandable. The idea might pre-suppose too many things that are not possible wrt to CSS coding that I don’t know about, but the basic concept is what I offer for consideration.
