---
title: "A System for Grouping & Sorting CSS Properties - Muhammad Rehan Saeed"
description: "Grouping and Sorting CSS properties can make your CSS easier to read and helps with consistency in a team environment. There is no correct answer but something is better than nothing."
canonical_url: "https://rehansaeed.com/system-for-grouping-and-sorting-css-properties/"
last_updated: "2021-04-20T10:00:00+00:00"
meta:
  author: "Muhammad Rehan Saeed"
  keywords: "CSS,CSS Classes,Standards"
  "og:description": "Grouping and Sorting CSS properties can make your CSS easier to read and helps with consistency in a team environment. There is no correct answer but something is better than nothing."
  "og:image": "https://rehansaeed.com/_og/s/o_4f31224f4919d5c8.png"
  "og:image:alt": "A System for Grouping & Sorting CSS Properties - Muhammad Rehan Saeed"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "A System for Grouping & Sorting CSS Properties"
  "twitter:image": "https://rehansaeed.com/_og/s/o_4f31224f4919d5c8.png"
  "twitter:image:alt": "A System for Grouping & Sorting CSS Properties - Muhammad Rehan Saeed"
---

> Index of every page on this site: [llms.txt](https://rehansaeed.com/llms.txt)

# [A System for Grouping & Sorting CSS Properties](https://rehansaeed.com/system-for-grouping-and-sorting-css-properties/)

Posted 20 April 2021 - **3 min read**

![CSS](https://rehansaeed.com/_ipx/f_png&s_2560x1440/images/hero/CSS-1600x900.png)

There are no hard and fast rules for code style and as I've [written about before](https://rehansaeed.com/stop-brace-wars-use-stylecop/) it can get ugly when people have various opposing opinions on the subject. In CSS, which I'm quite fond of writing, I believe the answer is mostly given to us by using [Prettier](https://prettier.io/), the opinionated code formatter. Unfortunately, Prettier does not sort CSS properties for you [and never will](https://github.com/prettier/prettier/issues/1963), so this post is one solution (**not** the correct solution because there is no correct solution).

There are automated tools like [postcss-sorting](https://github.com/hudochenkov/postcss-sorting) that can help with this but I think it'd be difficult to use in real life because there will always be exceptions to the hard coded rules.

But why even bother to group and sort CSS properties? Well, I think it makes sense for two reasons. The first is that it can make it quicker to quickly scan the CSS and find what you need. The second is that if you're working in a team environment, it can make it easier to work on CSS that has one over arching consistent style.

# Grouping CSS Properties Link to this section

I believe you can split CSS properties into a few groups:

1. Parent layout
2. Layout
3. Box Model
4. Positioning
5. Display

Here is an example of the four groups in real life:

```css
.card {
  /* Parent Layout */
  grid-area: card;

  /* Layout */
  display: grid;
  align-items: center;
  gap: 10px;
  grid-template-areas:
    "header header"
    "content content";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  justify-items: center;

  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-inline: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-block: 0;
  z-index: 10;

  /* Box Model */
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  inline-size: 100px;
  block-size: 100px;
  margin: 10px;
  padding: 10px;

  /* Display */
  background-color: red;
  border: 10px solid green;
  color: white;
  font-family: sans-serif;
  font-size: 16px;
  text-align: center;
}
```

## Parent Layout Link to this section

The parent layout is any CSS layout properties that effect or come from the parent element. This usually boils down to `grid-area` if you're using `grid-template-areas` which you [totally should](https://css-tricks.com/snippets/css/complete-guide-grid/#grid-template-areas) because it allows you to change the layout child elements without modifying the child elements CSS too much.

```css
.card {
  /* Parent Layout */
  grid-area: card;

  /* ... */
}
```

## Layout Link to this section

CSS Layout properties determine how the contents of the CSS class will be layed out. The common case is that you're using CSS Grid or FlexBox and want to group their respective properties together where they make the most sense.

I think it makes the most sense to start with the `display` property because that determines the type of layout followed by other properties in alphabetical order.

```css
.card {
    /* ... */

    /* Layout */
    display: grid;
    align-items: center;
    gap: 10px;
    grid-template-areas:
        "header header"
        "content content";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    justify-items: center;

    /* ... */
```

## Positioning Link to this section

CSS properties related to `position` come next. Similar to `display`, we put the position at the top and follow in alphabetical order. Again there is an exception to be made here with `top`, `right`, `bottom` and `left` which follow the order that `margin` and `padding` values take.

```css
.card {
    /* ... */

    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline: 0;
    inset-block: 0;
    z-index: 10;

    /* ... */
```

## Box Model Link to this section

CSS properties that affect the box model can come next. Again, I'm using alphabetical order except for `width` and `height` where it makes more sense for them to go together with `width` always being first (there are a lot of exceptions to the rules in CSS).

```css
.card {
    /* ... */

    /* Box Model */
    box-sizing: border-box;
    margin: 10px;
    padding: 10px;
    width: 100px;
    height: 100px;
    inline-size: 100px;
    block-size: 100px;

    /* ... */
```

## Display Link to this section

Finally, there are CSS display properties which affect the look and feel. This is also a kind of 'Other' category where you can place remaining properties which don't make sense in other groups.

```css
.card {
  /* ... */

  /* Display */
  background-color: red;
  border: 10px solid green;
  color: white;
  font-family: sans-serif;
  font-size: 16px;
  text-align: center;
}
```

# Final Comments Link to this section

This is just one method of grouping and ordering CSS properties that I've found useful in real life projects. There is no correct answer to this problem and I think the problem space is probably too complex to make a tool like Prettier do the work for you because there will always be exceptions to the rules.

## Web Mentions

[What's this?](https://en.wikipedia.org/wiki/Webmention)

### 0 Linked

### 0 Replies

## GitHub Comments

### 2 Comments

[Comment on GitHub](https://github.com/RehanSaeed/rehansaeed.github.io/issues/298)

[![Bielousov](https://avatars.githubusercontent.com/u/1741272?v=4)](https://github.com/Bielousov)

### [Bielousov](https://github.com/Bielousov)

19 October 2022

box model before positioning? Hmm, not sure about that…

[![RehanSaeed](https://avatars.githubusercontent.com/u/2270364?v=4)](https://github.com/RehanSaeed)

### [RehanSaeed](https://github.com/RehanSaeed)

Owner

9 December 2022

[@Bielousov](https://github.com/Bielousov) Thinking about it some more, I don't know why I did it that way around. I've updated the post with your suggestion.

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://rehansaeed.com/#website","@type":"WebSite","description":"Software Developer at Microsoft, YouTuber, Open Source Contributor and Blogger","inLanguage":"en-GB","name":"Muhammad Rehan Saeed","url":"https://rehansaeed.com/","author":{"@id":"https://rehansaeed.com/#identity"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://rehansaeed.com/?search={search_term_string}"},"query-input":"required name=search_term_string"}],"publisher":{"@id":"https://rehansaeed.com/#publisher"}},{"@id":"https://rehansaeed.com/system-for-grouping-and-sorting-css-properties/#webpage","@type":"WebPage","dateModified":"2021-04-20T10:00:00+00:00","datePublished":"2021-04-20T10:00:00+00:00","description":"Grouping and Sorting CSS properties can make your CSS easier to read and helps with consistency in a team environment. There is no correct answer but something is better than nothing.","name":"A System for Grouping & Sorting CSS Properties","url":"https://rehansaeed.com/system-for-grouping-and-sorting-css-properties/","breadcrumb":{"@id":"https://rehansaeed.com/system-for-grouping-and-sorting-css-properties/#breadcrumb"},"isPartOf":{"@id":"https://rehansaeed.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://rehansaeed.com/system-for-grouping-and-sorting-css-properties/"]}]},{"@id":"https://rehansaeed.com/#identity","@type":"Person","name":"Muhammad Rehan Saeed","url":"https://rehansaeed.com/about/","image":{"@id":"https://rehansaeed.com/#/schema/image/1"},"sameAs":["https://github.com/RehanSaeed","https://www.linkedin.com/in/muhammad-rehan-saeed","https://stackoverflow.com/users/1212017/muhammad-rehan-saeed","https://www.youtube.com/c/MuhammadRehanSaeed","https://www.twitch.tv/rehansaeeduk"]},{"@id":"https://rehansaeed.com/#publisher","@type":"Organization","logo":"https://rehansaeed.com/images/schema/Publisher-600x60.png","name":"Muhammad Rehan Saeed","url":"https://rehansaeed.com"},{"@id":"https://rehansaeed.com/system-for-grouping-and-sorting-css-properties/#article","@type":"Article","dateModified":"2021-04-20T10:00:00+00:00","datePublished":"2021-04-20T10:00:00+00:00","description":"Grouping and Sorting CSS properties can make your CSS easier to read and helps with consistency in a team environment. There is no correct answer but something is better than nothing.","headline":"A System for Grouping & Sorting CSS Properties","inLanguage":"en-GB","url":"https://rehansaeed.com/system-for-grouping-and-sorting-css-properties/","author":{"@id":"https://rehansaeed.com/#identity"},"image":[{"@type":"ImageObject","url":"https://rehansaeed.com/images/hero/CSS-1600x900.png","caption":"CSS","width":"1600","height":"900"}],"isPartOf":{"@id":"https://rehansaeed.com/system-for-grouping-and-sorting-css-properties/#webpage"},"keywords":["CSS","CSS Classes","Standards"],"mainEntityOfPage":{"@id":"https://rehansaeed.com/system-for-grouping-and-sorting-css-properties/#webpage"},"publisher":{"@id":"https://rehansaeed.com/#publisher"}},{"@id":"https://rehansaeed.com/system-for-grouping-and-sorting-css-properties/#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Blog","item":"https://rehansaeed.com/","position":1},{"@type":"ListItem","name":"A System for Grouping & Sorting CSS Properties","item":"https://rehansaeed.com/system-for-grouping-and-sorting-css-properties/","position":2}]},{"@id":"https://rehansaeed.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://rehansaeed.com/images/author/Muhammad-Rehan-Saeed/Logo-512x512.png","inLanguage":"en-GB","url":"https://rehansaeed.com/images/author/Muhammad-Rehan-Saeed/Logo-512x512.png"}]}
```

## Sitemap

See the full [sitemap](https://rehansaeed.com/sitemap.md) for all pages.