Research CSS organization standards, tools, and best practices; and provide routes of implementation for documentation and linting

[possumbilities]

Problem

We need some documented guidelines for how our CSS is crafted so that we can:

• have predictable and documented best practices for all contributors to follow
• possibly lint most or all of those best practices to aide with more organized code.

Description

Continued from a comment here:

• https://github.com/creativecommons/creativecommons.org-prototype/pull/19#discussion_r1184042143

@possumbilities

Ordering the lines is a much more complex sub-project I haven't tackled just yet because the order of the property:value pair declarations in a style rule is the order (generally) they are applied/executed, which means there are situations where certain properties need to be set before others for varied reasons: cross-browser quirks, flash of un-styled content bugs, performance, and even feature fallbacks. This makes CSS particularly powerful, but also (at times) annoyingly resistant to easy alphabetizing of properties on the whole or other simple line order procedures. There's also "folk" conventions of what things should be together and what order they should be in for "readability and modification based on what they do", like putting height and width together in the order because they are so heavily tied together, often changed together, calculated together at render, and so on. With that much variation I haven't devoted time to a sensible documented "guideline" for our CSS here just yet.

I want there to be reasonable guidelines for CSS file org, but haven't applied much yet because I want to get most everything in there, and also find some pre-existing standards/guides/etc. we could point to, or fallback on. Ordering property:value pairs in CSS is like alphabetizing lines in a programming function, a better read order may break expected outcomes of function, and I want a sound through-line to lean on for what we do, before I start trying to do something so I can more easily document it, and even lint it if possible. Which is why for the time being I've just split them into two groups only, but do plan to do more org in this area :)

The above quote is mostly to do with us needing some level of guidelines for how we organize and/or order our CSS.

At best CSS style rules have grown over time to make their terminology in conflict with how they tend to be considered.

In CSS we have

• Rules
• Properties
• Values

In general, where possible in code we would want property:value pairs to be ordered in an organized fashion, likely alphabetical. However, CSS rules, particularly in current featureset, are actually closer to scoped-ish functions in most programming languages, and property:value pairs are similar to executable lines in a function.

Which makes this in CSS:

article {
--var-color: blue;

width: 40px;
height: 100vh;

font-family: Arial;
text-decoration: none;

}

similar to the following pseudo programming code:

function article {
var color = blue;

this.dimension.width = calc.byUnit(40, "px");
this.dimension.height = calc(window.rendered.height);

this.font.family = "Arial";
this.text.decoration = "none";

}

Since there are situations where the line order can matter in a CSS rule, the same as in a standard programming function situation, merely alphabetizing the lines within the rule doesn't necessarily result in stable expected outcomes.

Therefore, we could do with documenting various approaches we could build from, borrow from, or adopt.

Alternatives

Additional context

Implementation

• [x] I would be interested in implementing this feature.