CSS Coding Conventions

Why make the effort of sorting at all? For one thing, you will avoid accidentally duplicating properties, such as padding in the following example. I have seen this done way too often.

.note {
	position: absolute;
	z-index: 2;
	height: 50%;
	padding: 2em;
	color: black;
	background-color: white;
	font-family: cursive;
	line-height: 1.8;
	padding: 1em; }

However, the biggest advantage is when it comes to debugging code. Studying code and looking for individual properties is time-consuming and mentally taxing. You know after a single glance that the following code does not include a width because you know exactly where it should be if it was there. In the above code you would look twice to be sure and you still might have missed it.

.note {
	background-color: white;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
	color: black;
	font-family: cursive;
	font-size: 90%;
	height: 50%;
	line-height: 1.8;
	max-width: 50ch;
	padding: 2em;
	position: absolute;
	z-index: 2; }

One of only a few people I have found who agree with sorting CSS properties alphabetically is Eric Bailey and he makes some very good additional points:

Alphabetical is easy enough to pick up and have an organization repeat as a convention without having to invest too much time on upskilling an entire team on CSS theory.

Or:

The last thing I want to do is set my client up to fail. It's difficult to recommend any approach that I don't think the organization has the ability to maintain after the engagement ends, even if I personally think the approach is better.

This is a controversial one! If you're familiar with Bootstrap then you'll be familiar with the exact opposite of semantically named classes. My opinion is that about 95% of Bootstrap classes are bad.

For example: never use .h1 or .title, use <h1>; never use .address, use <address>; never use .btn, use <button>; never use .pos-absolute, call it something that indicates why it is positioned absolutely, such as .hover-widget; never use .h-100, why is it 100 high? Call it that and avoid absolute units.

<div class="grid">
	<h2 class="fontSize20 mid-grey">Web Developer</h2>
	...
</div>

.grid-layout {
	display: grid; }

.fontSize20 {
	font-size: 20px; }
 
.mid-grey {
	color: #555; }

<section class="hero">
	<h2>Web Developer</h2>
	...
</section>

section.hero {
	display: grid; }

.hero > h2 {
	font-size: 1.25em;
	color: #555; }

In fact, if you do this right, you will hardly even need classes anyway. For example, look at the source code for this page.

footer {
	background-color: black;
	color: white;
	font-size: 0.9em;
	padding: 1em; }

aside {
	background-color: black;
	color: white;
	padding: 1em; }

aside,
footer {
	background-color: black;
	color: white;
	padding: 1em; }

footer {
	font-size: 0.9em; }

.no-borders {
	border-style: none !important; /* !important used for utility class */ }

.ui-button {
	color: inherit !important; /* !important needed to override PF theme.css */ }

h1, h2, h3, h4, h5, h6 {
	font-family: Arial, sans-serif; }

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: Arial, sans-serif; }

However, with the introduction of :is() and :where() we might not want to strictly keep this rule:

:where(h1, h2, h3) {
	font-weight: 400; }

Having said that, sometimes you just need some common sense:

:where(
::-webkit-calendar-picker-indicator,
::-webkit-clear-button,
::-webkit-inner-spin-button, 
::-webkit-outer-spin-button) {
	color: hotpink; }

.modal {
	position: absolute;
	top: 10px; right: 10px; bottom: 10px; left: 10px; }

.modal {
	bottom: 10px;
	left: 10px;
	position: absolute;
	right: 10px;
	top: 10px; }

body {
	color: dimgrey;
	font-family: "Palatino Linotype", serif;
}

code  {
	font-family: "Courier New", monospace;
}

h1 {
	font-size: 2.3em;
	font-weight: 400;
}

summary {
	cursor: pointer;
}

@media (prefers-reduced-motion) {
	:root {
		--transition: 0;
	}
}

body {
	color: dimgrey;
	font-family: "Palatino Linotype", serif; }

code  {
	font-family: "Courier New", monospace; }

h1 {
	font-size: 2.3em;
	font-weight: 400; }

summary {
	cursor: pointer; }

@media (prefers-reduced-motion) {
	:root {
		--transition: 0; }
}

.note {
	background: white; /* background is short-hand for 
		background-image,
		background-position-x,
		background-position-y,
		background-size,
		background-repeat-x,
		background-repeat-y,
		background-attachment,
		background-origin,
		background-clip and
		background-color! */
	border: 1px solid; /* This sets border-color to initial, not to mention border-image. */ }

.note.error {
	background: #f001;
	border: 1px solid red; }

.note {
	background-color: white;
		/* Leave border-color as default */
	border-style: solid;
	border-width: 1px; }

.error {
		/* Could add !important because this is a utility class */
	background-color: #f001;
	border-color: red; }