DEV Community

Cover image for Organize Your CSS Like a Pro: Logical Grouping of Properties
Tomas Stveracek
Tomas Stveracek

Posted on • Updated on

Organize Your CSS Like a Pro: Logical Grouping of Properties

Writing clean and well-organized CSS is important, especially for bigger projects. One way to achieve this is by grouping CSS properties in a logical way. In this article, I will show you how to organize your CSS using Logical Grouping, where positioning comes first. This will make your code easier to read and maintain.

Why Logical Grouping?

When writing CSS, we often add properties in a random order. But grouping them logically helps in these ways:

  • Readability: It’s easier to understand what each class does.
  • Consistency: Using the same order makes it easier to work with a team.
  • Maintenance: You can quickly find and update properties. Let’s first look at a bad example of CSS without logical grouping.

Bad Example: Unorganized CSS

.card {
    font-size: 16px;
    border: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    width: 300px;
    height: 400px;
    position: relative;
    line-height: 1.5;
    border-radius: 10px;
    padding: 20px;
    color: #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}
Enter fullscreen mode Exit fullscreen mode

In this bad example, the properties are in a random order, which makes it harder to follow. There’s no clear structure, and it takes more time to find specific properties like position or background-color.
Now, let’s see how to fix this with Logical Grouping.

Four Main Groups

1. Positioning
These properties control how the element is positioned relative to other elements. Examples: position, top, right, bottom, left, and z-index.
2. Box Model
These properties control the layout, size, and spacing of elements. Examples: display, width, padding, and margin.
3. Typography and Text
These properties control the font, text size, and alignment. Examples: font-size, line-height, and text-align.
4. Visual Appearance
These properties control how an element looks. Examples: background-color, color, border, box-shadow, and transition.

Example: Flexbox Layout for a Card

Here’s how the card layout looks when we use logical grouping:

.card {
    /* Positioning */
    position: relative;
    z-index: 1;

    /* Box Model */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 300px;
    height: 400px;
    padding: 20px;

    /* Typography */
    font-size: 16px;
    line-height: 1.5;

    /* Visual Appearance */
    background-color: #fff;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    /* Miscellaneous */
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

Enter fullscreen mode Exit fullscreen mode

In this good example, the properties are grouped in a clear way, making the code easier to follow and maintain.

Note: The comments in the CSS are only for explanation. Remove them in your actual code.

More Examples for Common Components

Responsive Image

.responsive-image {
    /* Positioning */
    position: relative;

    /* Box Model */
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    aspect-ratio: 16 / 9;

    /* Visual Appearance */
    background-color: #f0f0f0;
    border-radius: 8px;
    object-fit: cover;

    /* Miscellaneous */
    transition: transform 0.3s ease;
}
Enter fullscreen mode Exit fullscreen mode

Button

.button-primary {
    /* Positioning */
    position: relative;

    /* Box Model */
    display: inline-block;
    padding: 10px 20px;

    /* Typography */
    font-size: 16px;
    text-align: center;

    /* Visual Appearance */
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;

    /* Miscellaneous */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-primary:hover {
    background-color: #0056b3;
}
Enter fullscreen mode Exit fullscreen mode

Navigation Bar (Fixed)

.navbar {
    /* Positioning */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    /* Box Model */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    width: 100%;
    height: 60px;

    /* Typography */
    font-size: 18px;

    /* Visual Appearance */
    background-color: #333;
    color: white;
    border-bottom: 2px solid #555;
}
Enter fullscreen mode Exit fullscreen mode

Here, positioning is defined first, followed by the box model, typography, and visual appearance.

Conclusion

Using Logical Grouping for your CSS properties helps you write clean and easy-to-maintain code. Placing positioning properties first makes it clearer how elements interact with each other on the page. Whether you work alone or in a team, this method will improve your CSS.
Try this approach in your next project and see how it helps!

References:
This article was inspired by Vinodan, N. (2020) 'Better ways to organise CSS properties' and my personal experience with frontend development practices.

Top comments (2)

Collapse
 
suruaino profile image
Suru

Thanks, really insightful.👍

Collapse
 
tomasdevs profile image
Tomas Stveracek

You are welcome. 👍 It's not the only way, but I've tried this css organization and I always get better at it.