编写干净且组织良好的 css 很重要，尤其是对于较大的项目。实现此目的的一种方法是以逻辑方式对 css 属性进行分组。在本文中，我将向您展示如何使用逻辑分组来组织 css，其中定位是第一位的。这将使您的代码更易于阅读和维护。

为什么要进行逻辑分组？

在编写 css 时，我们经常以随机顺序添加属性。但按逻辑对它们进行分组有以下几方面的帮助：

• 可读性：更容易理解每​​个类的作用。
• 一致性：使用相同的顺序可以更轻松地与团队合作。
• 维护：您可以快速查找和更新属性。 我们先来看一个没有逻辑分组的 css 糟糕例子。

坏例子：无组织的 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;
}

在这个糟糕的例子中，属性是随机顺序的，这使得它更难遵循。没有清晰的结构，并且需要更多时间来查找特定属性，例如 position 或 background-color.
现在，让我们看看如何使用逻辑分组来解决这个问题。

四大主要群体

1。定位
这些属性控制元素相对于其他元素的定位方式。 示例： 位置、顶部、右侧、底部、左侧和 z 索引。
2.盒子模型
这些属性控制元素的布局、大小和间距。 示例： 显示、宽度、内边距和边距。
3.版式和文字
这些属性控制字体、文本大小和对齐方式。 示例： 字体大小、行高和文本对齐。
4.视觉外观
这些属性控制元素的外观。 示例：背景颜色、颜色、边框、框阴影和过渡。

示例：卡片的 flexbox 布局

以下是我们使用逻辑分组时卡片布局的外观：

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

在这个很好的示例中，属性以清晰的方式分组，使代码更易于遵循和维护。

注意：css中的注释仅用于解释。在您的实际代码中删除它们。

常见组件的更多示例

响应式图像

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

导航栏（固定）

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

在这里，首先定义定位，然后是盒子模型、排版和视觉外观。

立即学习“前端免费学习笔记（深入）”；

结论

对 css 属性使用逻辑分组可以帮助您编写干净且易于维护的代码。首先放置定位属性可以更清楚地显示元素如何在页面上相互交互。无论您单独工作还是团队合作，此方法都会提高您的 css。
在您的下一个项目中尝试这种方法，看看它有什么帮助！

参考文献：
本文的灵感来自 vinodan, n. (2020)“组织 css 属性的更好方法”以及我个人在前端开发实践方面的经验。