css编写

css编写简单，但是初期的结构设计，以及后期的代码维护，是一件很麻烦的事情。
css的两种类名方式

语义化类名
- 根据模块给html起名字，比如ueser-info，menu-wrap
视觉类名
- 根据视觉风格呈现的代码，比如red、big

-OOCSS（Object Oriented CSS）面向对象的css

是什么：是一种容易重新使用的css规则，简单来说，就是定义一个css样式，我们可以再html中重复使用多次
- oocss只是一种书写方法，不是框架
优点
- 强调重用（可以多次使用样式），适合大型网站开发，减少了css代码
- 清洁的htmll标记，运用有语义的类名，逻辑性强
- 可扩展类（把样式独立出来）。将更多组件放到库中
- 结构与样式分别独立
- 内容与容器分别独立
缺点
- 不适合运营于小型项目
- 每个组件最好都备写一份说明文档
- 样式(CSS)和结构(HTML)藕合太紧
实例

//css写法
.title-1{
    border-bottom:1px solid #ccc;
    font-size:16px;
    font-weight:bold;
    color:#333;
}

//OOCSS写法
.bb-c{
    border-bottom:1px solid #ccc;
}   
.f16{
    font-size:16px;
}
.bold{
    font-weight:bold;
}
.c333{
    color:#333;
}

//html
<div class="f16 bold c333 bb-c">标题</div>

整段代码的缺点在于给html增加了太多负担，因为我们要把每一个类名都加到html中

OOSASS
- OOSASS是可伸缩，面向对象的css
- 只有sass，没有css
- 通过%placeholder声明视觉对象
- 可以通过mixin创建可重复的css
- 语义化的声明在DOM中声明，视觉化类名在sass中声明，否则不可能使用css构建ui结构和框架
- 通过sass来扩展类，而不是dom
- 实例

%bb-c{
    border-bottom:1px solid #ccc;
}   
%f16{
    font-size:16px;
}
%bold{
    font-weight:bold;
}
%c333{
    color:#333;
}
%c999{
    color:#999;
}
.title-1{
    @extend %bb-c;
    @extend %f16;
    @extend %bold;
    @extend %c333;
}

//假设有类title-2
.title-2{
    @extend %f16;
    @extend %c999;
}

BEM（块、元素、修饰符）
- block是页面中独立存在的区块，每个页面都可以看作多个block组成
- element是构成块的基础，依赖于块
- modifier描述块或者元素
- 优点
  - 解决了命名空间（赋予了明明一套规则）
  - 多人协作时，不需要太多文档说明
  - 更易于维护
- 缺点
  - 名字太长
  - 代码量显得比较多
- 命名方式
  - 下划线和横线
    component-name
    component-name–modifier-name
    component-name__sub-object
    component-name__sub-object–modifier-nam
  - 驼峰
    org-ComponentName
    org-ComponentName–modifiername
    org-ComponentName-subObject
    org-ComponentName-subObject–modifiername
  - 区分块的问题
    p-页面（Page）（应用于body元素的类）,对可维护性不是那么重要的静态页面十分有用 —应该避免嵌套使用 (例: p-Homepage);
    l-布局（Layout）, 比如列（columning），包裹（wrappers）和容器（containers）等等(例: l-Masthead, l-Footer);
    c-组件（components ）(例: c-Dropdown, c-Button…);
    u-公共类（Utility classes） — 不会发生改变, 在代码的任何地方都不能重载。(例: u-textCenter, u-clearfix…);
    js-JavaScript钩子：永远不应该出现在CSS中。
    g-JavaScript钩子：全局js类，永远不应该出现在CSS中
  - 实例

<div class="c-card">
    <div class="c-card__header">
        <h2 class="c-card__title">Title text here</h3> 
    </div> 
    <div class="c-card__body">
        <p>I would like to buy:</p> <!-- Much nicer - a layout module --> 
        <ul class="l-list">
             <li class="l-list__item"> <!-- A reusable nested component --> 
                <div class="c-checkbox"> 
                    <input id="option_1" type="checkbox" name="checkbox" class="c-checkbox__input"> 
                    <label for="option_1" class="c-checkbox__label">Apples</label> 
                </div> 
            </li> 
            <li class="l-list__item"> 
                <div class="c-checkbox"> 
                    <input id="option_2" type="checkbox" name="checkbox" class="c-checkbox__input"> 
                    <label for="option_2" class="c-checkbox__label">Pears</label> 
                </div> 
            </li>
         </ul> <!-- .l-list --> 
    </div> <!-- .c-card__body -->
</div> <!-- .c-card -->

个人理解：oocss的方式更专注于解决css样式重用问题，使css文件简单化，BEM更专注于解决css命名以及结构清晰的问题。
参考https://juejin.im/post/59530afc6fb9a06bbc4ad62c?utm_source=gold_browser_extension

猜你喜欢