前端页面开发规范（完善中）
一、页面结构规范
所有页面统一采用以下结构，不允许随意调整层级。
<body>
<header id="header">
...
</header>
<main>
<section class="banner">
...
</section>
<section class="about">
...
</section>
<section class="products">
...
</section>
<section class="section-faq">
...
</section>
</main>
<footer id="footer">
...
</footer>
</body>
规范要求
-
页面主体内容必须放置在
<main>标签内。 -
每个业务模块统一使用
<section>标签进行划分。 -
header、main、footer为固定页面结构，不允许省略 -
body直接子元素不允许出现多个同级
main元素。 -
每个页面应保持清晰、统一的结构，方便维护及 SEO 优化。
二、内容管理规范
2.1 内容记录管理
为避免后台内容碎片化，统一遵循以下原则：
-
如果页面内容不需要拥有独立 URL，原则上禁止新增内容记录。
-
优先使用扩展字段的形式维护内容
仅当内容需要或将来有可能： 独立详情页 / 独立 URL /被搜索引擎收录时，才允许新增内容记录。
2.2 FAQ 管理规范
FAQ 内容统一采用扩展字段管理。
规范要求
-
扩展字段名称统一为：FAQ
-
默认情况下，FAQ 不得新增内容记录。
-
只有 FAQ 需要拥有独立详情页时，才允许建立内容记录。
三、CSS 命名规范
3.1 颜色变量命名
统一使用以下 CSS 变量命名：
| 名称 | 用途 |
|---|---|
--primary-color |
网站主色 |
--secondary-color |
品牌辅助色 |
--accent-color |
强调色（CTA、按钮、价格、Label 等） |
--danger-color |
警告色、危险提示 |
3.2 页面区块命名
所有页面模块统一采用：
section-功能名称
例如：
section-about / section-products / section-services / section-project /section-contact /section-related /section-news / section-faq
特殊规定
FAQ 区域统一命名为：section-faq
3.3 区块公共元素命名
页面区块标签
统一使用：
<span class="section-label"></span>
用于区块顶部的小标题。
页面徽标
统一使用：
<span class="section-badge"></span>
用于标签、徽章等视觉元素。
3.4 标题命名规范
区块主标题统一使用：
<h2 class="section-title"></h2>
区块副标题统一使用：
<h3 class="section-sbu-title"></h3>
或
<h4 class="section-sbu-title"></h4>
注：内容型标题（如新闻标题、产品标题、FAQ 标题等）属于业务内容，不使用
section-title或section-sbu-title。
3.5 Banner 标题规范
Banner 标题需要局部强调时，统一使用：
<h1>
High <em>Quality</em> Products
</h1>
禁止使用：
<span>
<strong>
<b>
等标签仅用于文字变色。
四、系统组件规范
widget-header 使用规范
.widget-header 为系统公共组件。
由于以下组件均依赖该 Class：
-
Accordion
-
Collapse
-
TOC
-
Sidebar
-
其它公共组件
因此：
禁止在 .widget-header 上直接设置以下样式：
-
color
-
font-size
-
font-weight
-
line-height
-
background
-
border
-
padding
-
margin
所有业务样式必须声明在对应业务 Class 上，例如：
.widget-faq-header{
background: var(--primary-color);
}
.widget-product-header{
color:#333;
}
不得直接修改：
.widget-header{
...
}
五、CSS 编写原则
优先使用现有工具类，不重复编写已有能力。
5.1 布局对齐
涉及布局对齐时，优先使用：justify-content-*align-items-*内置工具类，禁止为了简单对齐编写额外 CSS。
5.2 元素间距
涉及外边距、内边距时，优先使用：m-*p-*工具类，禁止仅为了调整间距新增业务样式。
5.3 文本对齐
优先使用：text-starttext-centertext-end等相应的工具类进行设置，非物殊情形一般不单独编写：text-align:center;等重复样式。
5.4 Flex 布局
涉及 Flex 行列切换时，统一使用：flex-row /flex-column /flex-lg-row /flex-lg-column等工具类class控制，非必要禁止仅为了方向切换新增 CSS样式。
5.5 间距控制
规则排版优先使用grid布局，Flex 或 Grid 布局中的元素间距统一优先使用：
gap
避免通过：margin,padding叠加实现组件间距。
六、开发原则
-
优先复用系统已有组件、工具类和公共样式，避免重复开发。
-
所有命名必须具有明确语义，禁止使用无意义或缩写命名。
-
HTML 结构应保持统一，便于维护、SEO 优化及后续扩展。
-
样式应尽量采用工具类完成，减少冗余 CSS，提高代码一致性。
-
公共组件与业务组件职责分离，公共类仅负责基础能力，业务样式必须定义在业务类中，避免影响其它模块。