CSS格式化

CSS 格式化

是什么：将 CSS 代码按规范排版，提高可读性和维护性。

为什么：让样式规则结构清晰，便于查找和修改。

特点：

• 选择器与声明块分开
• 属性缩进对齐
• 相关规则分组排列

---

Python 示例

python

# 未格式化的 CSS
        css = ".container{width:100%;margin:0 auto;}.header{color:#333;font-size:16px;font-weight:bold;}"

        # 格式化后的 CSS
        formatted_css = """
        .container {
            width: 100%;
            margin: 0 auto;
        }

        .header {
            color: #333;
            font-size: 16px;
            font-weight: bold;
        }
        """

        print(formatted_css)

复杂 CSS 格式化：

css

/* 主要页面布局 */
        .page-container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background-color: #f5f5f5;
        }

        /* 导航栏样式 */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }

        .navbar .logo {
            float: left;
            padding: 15px 20px;
            font-size: 20px;
            font-weight: 700;
            color: #1890ff;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .navbar {
                height: 50px;
            }

            .navbar .logo {
                padding: 12px 15px;
                font-size: 18px;
            }
        }

---

格式化规则

• 每行一个属性：便于阅读和修改
• 缩进一致：声明块内统一缩进（2或4空格）
• 选择器单独成行：多个选择器也换行排列
• 相关规则分组：相同组件的样式放在一起
• 注释分隔：用注释标识样式区块

工具推荐：

• CSSO - CSS 压缩和格式化
• Prettier - 多语言代码格式化
• 在线工具：cssformatter.com

一句话总结：CSS 格式化通过规范的缩进和分组，让样式表层次分明，极大提升了前端开发效率和代码可维护性。