• ᴥ •つ TOP

This is my current style for the footer in the blog. I attempt to group elements based on their relevance, but there are no specific rules in place. The arrangement is largely guided by my intuition.

.footer {
  display: flex;
  flex-direction: column;
  max-width: 36rem;
  padding-top: 4rem;
  margin: 4rem auto 0;
  border-top: 1px solid #eee;
  color: $color-text;
  font-size: px2rem(14);
  align-items: center;
}

I've came to notice that there are different ways to order CSS properties. There are many, but mainly it boils down to these two: Alphabetical vs. Group.

Before I continue, I'd like point out that the CSS order has no impact on the performance of how your website operates.

Alphabetical (Alpha-order)

As the name suggests, you order properties alphabetically.

.footer {
  align-items: center;
  border-top: 1px solid #eee;
  color: $color-text;
  display: flex;
  flex-direction: column;
  font-size: px2rem(14);
  margin: 4rem auto 0;
  max-width: 36rem;
  padding-top: 4rem;
}

This may help if you have duplicated properties, and it has a low learning curve. Any new developers can adapt to this system in a second. Also, there are many tools out there that can help you sort properties alphabetically.

Personally, I am not a fan of this sorting order because I prefer not to have flex and align-items separated from each other, as well as font and color. While this method may work well with small CSS styles like atomic, I find it challenging to comprehend how it will reduce cognitive load as the codebase grows larger.

However, there are individuals who prefer using alphabetical order. Google suggests maintaining consistency with existing tooling for the sort order in the project. In the absence of a specific sort order, Google prefers using alphabetical order for declarations.

Groups - Outside-in

Outside-in is a way to order properties by importance, or rather, based on the extent to which they affect other elements.

.footer {
  /* Layout Properties */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* Box Model Properties */
  max-width: 36rem;
  margin: 4rem auto 0;
  padding-top: 4rem;

  /* Visual Properties */
  color: $color-text;
  border-top: 1px solid #eee;

  /* Typography Properties */
  font-size: px2rem(14);
  text-transform: uppercase;

  /* Misc */
  cursor: pointer;
  z-index: 1;
}

Here are the orders:

  1. Layout Properties
  2. Box Model Properties
  3. Visual Properties
  4. Typography Properties
  5. Misc

The advantage of this approach is its logical organization. Related properties are grouped together, making it easier to locate specific elements (yes, 'ctrl + f' works too). For instance, if you are examining the footer and need to check its layout, you immediately know where to find the relevant section in your CSS.

However, there is also a disadvantage. The grouping lacks a standard; everyone tends to have their own method of grouping. This can pose challenges when onboarding new team members, resulting in a higher learning curve.

Conclusion

Personally, Outside-in method makes sense to me and I intend to incorporate it into my codebase. Perhaps, it actually is quite similar to how I ordered my CSS.

I don't perceive the disadvantage portion of it as a significant issue because you can always delegate the sorting task to tools.

← prev postnext post →