Css模块方案 |怎么用css样式为网页做竖杠

前端开发人员在编写CSS时，通常都会遇到以下问题：

1.全局污染：某个样式可能会影响到其他元素的样式，从而导致整个页面的样式混乱。
2.可维护性差：因为CSS是全局的，所以当需要修改某个样式时，可能会涉及到多个页面和组件，增加了维护的难度。

为了解决这些问题，CSS模块化方案应运而生。

目前比较流行的CSS模块化方案有以下几种：

1.BEM：块（Block）、元素（Element）、修饰符（Modifier）。BEM将样式封装在特定的块和元素中，修饰符用于修改块和元素的外观和行为。
2.SMCC：Scalable and Modular CSS（可扩展和模块化的CSS）。SMCC将样式分解成小块，并通过在项目中定义不同的模块来组合这些块。这些模块可以随项目发展而扩展。
3.Atomic CSS：原子CSS。Atomic CSS通过在样式类中定义单一的样式属性来实现样式的可复用性和可扩展性。

CSS模块化方案有许多优点，包括：

1.可维护性好：CSS代码更清晰、有序，更容易维护。
2.可重用性高：样式代码可复用，减少了开发时间和代码量。
3.解决了全局污染的问题：CSS代码不会影响其他元素的样式。

综上所述，CSS模块化方案是一种更好的CSS编写和管理方式。选择合适的方案可以提高代码的可维护性和可重用性，同时也使得开发更加高效。