CSS - BEM和原子CSS

BEM是一种CSS命名规范，增强页面代码可读性、可维护性

.weui-article {}
.weui-article__h1 {}
.weui-article__p {}
.weui-article__p_in-box {}

-：短横杠，连接多个单词的连接符

__：双下划线，表示连接的子元素

_：单下划线，表示所指元素的不同状态

（注意命名的层级最多不要超过两层）

 

原子CSS，通过类名定义一系列样式，减少代码重复写

.flex {
　　display: flex;
}
.flex1 {
    flex: 1;
}
.mt-10 {
    margin-top: 10px;
}
.text-center {
    align: center;
}
.text-orange {
    color: orange;
}
.text-sm {
    font-size: 12px;
}
.text-lg {
    font-size: 18px;
}