hywlss
← Back to posts
3 min read

CSS Convention

A guide to the CSS convention I use

Front-EndHTML/CSS

This is the CSS convention I learned while doing web publishing at a previous company. I used to follow it from memory, but I figured writing it down once would help—both for explaining it to teammates and for sharing it with people who are just getting started.

These days more friends without a CS background are getting into development, so I hope this also helps people who are just starting on the web. This is very subjective, so please treat it as one practical approach rather than the definitive answer.

The table below lists each property and its description. When writing CSS, write the properties in the order shown from top to bottom.


PropertyDescription
display

Defines how an element is rendered, so it belongs at the top of the declaration.


e.g. block, inline-block, flex


  • Flex-related properties (align, justify) only take effect when display: flex is set, so place them right after display.
opacity, visibility

Controls the visibility of an element.


e.g. opacity: 0; visibility: hidden;

overflow

Defines how content that overflows its element is handled.


e.g. hidden, scroll, auto

position

Defines how an element is positioned on the page.


e.g. relative, absolute, fixed


  • top, right, bottom, and left only take effect when position is set, so place them right after position.
float

Specifies that an element should be taken out of normal flow and placed along the left or right side of its container.


e.g. right, left, unset

width, height

Defines the size of an element.


  • Write width and height first, then any max-* and min-* variants.
margin

Defines the outer spacing of an element.


  • Write in clockwise order from top.

e.g. top → right → bottom → left

padding

Defines the inner spacing of an element.


  • Write in clockwise order from top.

e.g. top → right → bottom → left

border

Defines the border of an element.


  • If you use border-radius or border-color, place them right after border.
background

Defines the background of an element.


  • If you use background-color or background-image, place them right after background.
font, text, line, color

Defines the typography of an element.


  • I personally write font-family, font-size, font-weight in that order.

  • Write font properties first, then text, line, and color.

e.g. font-size: 14px; text-align: center; line-height: 14px; color: black;


  • For anything else, I order them alphabetically or by whatever feels most important.
transformApplies effects such as rotation, scaling, skewing, and translation.
transitionDefines the duration of the element's animation.

That should be enough to follow the convention in practice.

In short:

Think of it as writing styles in order of importance to the element's structure, working from the outside in.

I might come back and revise this later.


Compared to writing CSS without any rules, a convention noticeably improves both writing speed and maintenance.

For example, when you need to change a CSS property on an element, you can tell at a glance where the property you want should live. And because styles are applied from the outside in, you can almost visualize the result just by reading the CSS. Anyway, it's felt smoother since I adopted this.

Even tedious publishing work gets easier with a convention like this.