使用class选择器按模块命名可精准控制样式，避免冲突。例如.header-nav与.footer-info分别定义头部和底部样式，结合BEM规范如btn--primary与sidebar__btn提升可读性，确保模块化与可维护性。
在CSS中，当同一个HTML标签需要在不同模块中显示不同样式时，推荐使用class选择器来区分。通过为不同模块的元素设置不同的类名，可以精准控制每个模块的外观，避免样式冲突，同时提升代码可维护性。
使用class选择器按模块命名
为不同模块中的相同标签添加具有语义的class名称，是解决该问题最直接有效的方式。类名应体现模块功能或区域含义，便于理解和维护。
示例：比如页面中有两个
标签，分别用于“头部导航”和“底部版权信息”，虽然都是div，但样式完全不同：
对应CSS：
.header-nav {
background-color: #333;
padding: 10px;
}
.header-nav a {
color: white;
margin-right: 15px;
}
.footer-info {
background-color: #f0f0f0;
text-align: center;
padding: 20px;
color: #666;
}
采用BEM等命名规范提高可读性
当项目复杂时，建议使用如BEM（Block Element Modifier）命名方法，让类名更清晰表达结构关系。
例如：一个搜索模块和一个侧边栏都包含按钮，可通过如下方式区分：
CSS样式独立定义：
.btn {
padding: 10px 20px;
border: none;
color: white;
}
.btn--primary {
background-color: blue;
}
.sidebar__btn {
background-color: gray;
font-size: 12px;
padding: 5px;
}
避免过度依赖标签选择器
仅用标签选择器（如div、p、a）会导致样式无法区分上下文，容易造成全局污染。始终结合class使用，才能实现模块化布局。
比如多个链接样式不同：
导航链接 帮助链接
.nav-link {
color: #007bff;
text-decoration: none;
}
.help-link {
color: #6c757d;
font-size: 14px;
}
基本上就这些。用class区分不同模块的样式，是前端开发中最基础也最关键的实践之一，结构清晰，维护方便。
