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 hereh3> 
    div> 
    <div class="c-card__body">
        <p>I would like to buy:p>  
        <ul class="l-list">
             <li class="l-list__item">  
                <div class="c-checkbox"> 
                    <input id="option_1" type="checkbox" name="checkbox" class="c-checkbox__input"> 
                    <label for="option_1" class="c-checkbox__label">Appleslabel> 
                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">Pearslabel> 
                div> 
            li>
         ul>  
    div> 
div> 

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