Organize Your CSS Like a Pro: Logical Grouping of Properties

#css #cleancode #webdev #productivity

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;
}

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);
}

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;
}

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;
}

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;
}

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.