[分享]css模块化代码

现在在前端开发中，CSS模块化已经成为了一种流行的开发方式，这种模块化能够让开发者更加高效、灵活地开发项目。下面我们就来看看CSS模块化的一些实现方式。1. OOCSS(ObjectOriented ...

现在在前端开发中，CSS模块化已经成为了一种流行的开发方式，这种模块化能够让开发者更加高效、灵活地开发项目。下面我们就来看看CSS模块化的一些实现方式。

1. OOCSS(Object-Oriented CSS)

.button {
display: inline-block;
font-weight: bold;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
background-color: #dfdfdf;
border: 1px solid #ccc;
border-radius: 4px;
text-shadow: 0 1px rgba(255, 255, 255, 0.75);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.25), 0 1px rgba(0, 0, 0, 0.1);
}

OOCSS 是一种以面向对象编程(OOP)为基础的 CSS 样式框架，它注重组件的复用和拓展，将页面中的每个组件都抽象为某种类别或对象，然后共同使用样式规则来定义相同的风格。这使得每个组件拥有自己的类，而CSS文件则可以读得更容易，且更加人性化。

2. BEM(Block-Element-Modifier)

.button--active {
background-color: #0070c9;
border-color: #005ea3;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 1px rgba(0, 0, 0, 0.15);
}

BEM 将开发的元素分为块(block)、元素(element)、修饰符(modifier)三种类型，每个部分都对应具体的功能，充分体现了模块化的思想。其中块(block)是指页面视觉上独立的部分，元素(element)是指块的组成部分，而修饰符(modifier)则是关于块或元素的的状态或变化，加了修饰符的元素或块要重新定义样式。

3. SMACSS(Scalable and Modular Architecture for CSS)

.btn {
display: inline-block;
font-weight: bold;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
}
.btn-primary {
background-color: #428bca;
border-color: #357ebd;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 1px rgba(0, 0, 0, 0.15);
}

SMACSS是一种CSS代码组织规范，它强调了CSS的可扩展性和可重用性，即CSS模块化，同时提供了明确的指导方针，使开发人员能够更加有效地构建、管理和组织 CSS 代码。在 SMACSS 中使用不同的规则分类样式，比如基础样式、布局样式、模块样式等，使代码组织更加清晰，同时也更加灵活。

河南,驻马店,正阳县