1、oocss
oocss的核心是将样式表设计为可利用，可维护和可扩展的模块，具体而言oocss具有以下几个特点：
原则一： 界面与结构分离： 将样式表从HTML文件中分离出来，并通过类名来关联HTML元素和样式规则，从而使得样式可以独立于文档内容存在，有助于提高代码的重用性并简化维护过程。
原则二： 抽象共同点：将可复用的样式转化为类（类别）的形式，并将共同点抽象到类的上层，从而降低代码重复度，使得代码更加清晰、简洁。
原则三： 继承与格式化：通过继承（拓展）已有的样式类来避免重复编写样式代码，从而提高编写效率。同时通过使用格式化占位符来避免冗余的代码。
原则四： 容错与可拓展：通过设计模块的结构和规范来最小化错误和异常，并且使其易于扩展和升级，以适应日益变化的需求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OOCSS</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="button">Click Me</div>
</body>
</html>
/* button 模块 scss文件 */
.button {
display: inline-block;
width: 120px;
height: 36px;
line-height: 36px;
text-align: center;
font-size: 14px;
color: #fff;
background-color: #3a3b3c;
border-radius: 6px;
cursor: pointer;
}
/* 使用拓展占位符来创建类别 */
.button-primary {
@extend .button;
background-color: #4267b2;
}
.button-danger {
@extend .button;
background-color: #dc3545;
}
如果遇到需要可变的样式，那么就需要用两个类进行叠加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OOCSS</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="button button-primary">Click Me</div>
</body>
</html>
/* button 模块 scss文件 */
.button {
display: inline-block;
width: 120px;
height: 36px;
line-height: 36px;
text-align: center;
font-size: 14px;
color: #fff;
background-color: #3a3b3c;
border-radius: 6px;
cursor: pointer;
}
/* 使用拓展占位符来创建类别 */
.button-primary {
background-color: #4267b2;
}
.button-danger {
background-color: #dc3545;
}
2、css的BEM
BEM(块， 元素， 修饰符)是一种命名约定，用于帮助开发人员快速，可维护地编写可重复使用和模块化的CSS类
- 块：是一个独立的可重复使用组件，如菜单、标题等。
- 元素：是块内部的部分，由块名称和元素名称以双下划线（__）连接。例如，菜单的元素可以是菜单项。
- 修饰符：用于修改块或元素的状态或行为，由块名称或元素名称及其修饰符以连字符（ - ）连接。例如，菜单可以有活动状态的修饰符。
使用BEM命名约定使得CSS类具有可预测性和可重用性，减少了样式表之间的冲突和复杂性，并使得更容易理解和修改
当然这些规则可以在团队中进行重新定义连接符
<body>
<div class="menu__tab--style1">tab1</div>
<div class="menu__tab--style1">tab2</div>
<div class="menu__tab--style1">tab3</div>
<div class="menu__tab--style1">tab4</div>
</body>
3、css的设计模式
SMACSS
特点：易维护，易利用，可扩展
核心：将 CSS 代码分解为如下五个不同的分类
- Base -- 针对页面元素的基本样式定义，如字体、背景色、主要颜色等。这些规则应该是最少的且尽可能通用的
- Layout -- 针对版面布局，如头部、尾部、侧边栏、主体区域等。这些规则通常应用于页面上的大型区域，例如网格、列和各个主要部分
- Module -- 针对可复用的组件，如按钮、搜索框、导航栏等。这些规则仅仅将样式应用于相关的 HTML 的类，这些类仅用于特定的 DOM 所需的HTML结构
- State -- 针对当某个状态发生时，元素的样式发生变化，如常见的 hover、active 和 disabled 状态。这些规则描述了元素被改变时的所有样式
- Theme -- 针对主题和外观的规则，覆盖了前面四个部分的样式。通常适合在元素或模块层的次级模块中实现
命名规范： .l-header, .is-hidden, .theme-nav
以目前的框架vue来开发项目，base相当于是normalize, 而Layout则会写在layout模块组件中，而Module则会写在常规模块中
