Better Ways to Organise CSS Properties

Make your CSS easier to understand with a little more organisation

Photo by Hanson Lu on Unsplash

Have you noticed how products are arranged in a Super Market? Soaps, Shampoos and Body Lotions are arranged together. Rice, Wheat and Dhall products are always grouped together. Similarly it is important for us to write CSS by organising how properties should be written within a selector.

This article highlights how properties inside a selector should be written and not on the specificity of how selectors should be written.

Look at the below CSS class selector “card”. This selector would definitely produce a neat output in the DOM. But do you notice how the properties are written inside the selector?

Yeah! You guessed it. There is no proper order or grouping in the way the properties are written.

font-size is on the first line, font-weight comes somewhere in the middle and font-family is in the end. This is analogous to how products belonging to same category are placed at different spots in a Super Market (Soaps with Dhall items, Shampoos with Vegetables etc).

As a developer, I would want to try out multiple properties at different times. In this case, how can I make sure that all properties are grouped together?

Most of you would have this question, right?

The answer is very simple. You actually try to build it with your own flow, but you would need to place the properties at appropriate groups, so that your code will look neat and organised. This way of writing would definitely come up with practice.

At a later point of time, it will help you and your fellow developers to debug and spot properties easily.

Why should I bother - I have Chrome Inspector to debug! 😔😔

Let’s Get Started!

From the “card” selector, we understand that we would need to draw a card first(Card typically would look like a square or rectangle box). In order to draw a box, we need to know its dimensions. In CSS, dimensions are mentioned with width and height properties. So it’s better to start with width and height.

Step 1 : Write Dimension Properties

Next, along with width and height, add other box-model properties like margin, padding, border. Let’s also group border-radius with this as it corresponds to how a border should look like.

Step 2: Write Box Model Properties

Other Properties

1. outline — similar to border.
2. box-sizing
3. Group min-width and max-width after width.
4. Group min-height and max-height after height.
5. In case of before and after pseudo selectors, prefer to have content with this stack.

Now, we have the card ready with its dimensions and spacings. We will have to inform the browser to place it on the screen. Usually card’s placement is decided by position, float and display properties.

And so, even before drawing the card, it would be better if we could write how the card has to be placed in the DOM.

Which one should I write first? position or float or display?

1. Prefer to write position first, if position is absolute or fixed. In both cases, the element is moved out of the DOM flow and so it would be better to tell the browser about where we would like to place it.
2. Prefer to write float first, if the position is relative or sticky.
3. Prefer to write display first, if the display is none. In that case, the browser need not have to draw anything on the DOM.

Step 3: Write Placement Properties (Position | Float | Display)

Other Properties

1. Write top, left, bottom or right after the position property.
2. Write z-index after the position property.
3. visibility — similar to display.
4. In case of display: flex, add flex properties like flex-direction, flex-wrap, justify-content etc., after display.

Next, let’s add some presentation properties like background, box-shadow. They can be grouped together as they are responsible for adding appearances to the element.

Step 4: Write Appearance Properties (Background | Box-Shadow)

It’s time to add text-related properties. In order to write a text, we need to describe about the font which we are going to use. So, let’s write the font properties first.

After fonts, we can also add the other properties which describe the text like color, line-height, letter-spacing, text-align etc.,

Step 5: Write Font & Text Properties

Other Properties

1. Prefer to group all font properties together.
2. Prefer to group all text properties together like text-align, text-decoration, text-shadow and text-transform.
3. Prefer to group white-space, word-wrap, word-break etc., here
4. user-select

Last but one, let’s add transform, transition and animation properties to the selector.

Step 6: Write Transform & Animation Properties

Finally, we can add other properties like overflow, opacity etc., which cannot be mostly stacked under any group in the end.

Organising Properties in a Selector

If we try to organise CSS properties in the similar way under each selector, it would be easy to read through. When we need to add another property in future, we will just have to find the right location to place it. This way, we could definitely ensure our CSS file is readable and maintainable.

Thanks for reading. Hope this helps!