css 风格指南

[tiancheng91]

rscss

http://rscss.io/ https://github.com/airbnb/css http://codeguide.co/

属性声明

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  box-sizing: border-box;
  float: right;
  width: 100px;
  height: 100px;
  // 大小, 框边距, 盒子填充

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

项目结构

• settings: 全局变量配置
• tools: mixins
• generic:
  • normalize.css:
  • box-sizing: 默认值重制
• base: 基础样式, h1-h6
• objects: 组件对象样式定义
• components: 页面定义, header, footer
• trumps:

代码风格

类命名

• js-*: js-hook 类, 不带样
• &.-*: 变体
• _*: 工具类

css 结构

.search-form {
  > .button { /* ... */ }
  > .field { /* ... */ }
  > .label { /* ... */ }

  // variants
  &.-small { /* ... */ }
  &.-wide { /* ... */ }
}

// 组件名 完整表述意思
.search-form { 
    // 优先使用 > 标示直接child
    > .filed {
        color: #aaa;
    }
    .action {
        color: #fff;
    }

    // 多个单词时直接连接,不需要下划线等风格符
    > .firstname { }

    // 不建议直接使用tab选择
    > h3 {}
}

// 组件变体
.shop-card {
     // 基础样式
     width: 100px;

     // scss 推荐用 .shop-card.-前缀类名 作为辅助
     &.-wide {}
     // 个人喜欢 shop-card-wide 风格的
     &-wide {}

     // Element元素变体
  .  > .title {
        &-small {}
     }
     > .title.-small {}
     > .title-small {}
}

层级组件

<div class='article-link'>
  <div class='vote-box'>
    ...
  </div>
  <h3 class='title'>...</h3>
  <p class='meta'>...</p>
</div>

// 不建议在组件里覆盖内层组件样式
.article-header {
  > .vote-box > .up { /* ✗ avoid this */ }
}

// 合并多个classname为新名字, html会看起来比较清楚,
// 个人比较喜欢 search-button-red 风格的, 各有优缺点
// change
<div class='search-form'>
  <input class='input' type='text'>
  <button class='search-button -red -large'></button>
</div>

// to 
<div class='search-form'>
  <input class='input' type='text'>
  <button class='submit'></button>
</div>

// 使用extend 创建新样式
.search-form {
  > .submit {
    @extend .search-button;
    @extend .search-button.-red;
    @extend .search-button.-large;
  }
}

• 组件自身不要定义定位属性, 在外层组件里定义. ( position, float, clear, margin, width?)

• 按实际情况看是不是需要使用固定尺寸

  
  .article-list {
  & {
  @include clearfix;
  }
  
  > .article-card {
  width: 33.3%;
  float: left;
  }
  }

.article-card { & { / ... / }

.image { / ... / } .title { / ... / } .category { / ... / } }

一些常用的属性, 可以设置高优先级, 分离出去, 使用 _ 下划线开头 便于标示

._unmargin { margin: 0 !important; }
._center { text-align: center !important; }
._pull-left { float: left !important; }
._pull-right { float: right !important; }

<div class='order-graphs -slim _unmargin'>
</div>