来源 | OSCHINA 社区

作者 | 京东科技 杨健

原文链接：https://my.oschina.net/u/4090830/blog/5629135

1. 使用缩写属性精简代码

.content{
    // 缩写前
    margin-right:16px;
    margin-top:30px;
    width:184px;
    height:32px;
    background:#FFFFFF
    margin-left:10px;
}
.content{
    //缩写后
    margin:30px 16px 0 10px;
    width:184px; 
    height:32px; 
    background:#FFFFFF
}

2. 合并选择器

.content{
  display: flex;
  .flush, 
  .include, 
  .underline{
   margin-right: 12px; 
   padding: 3px 6px; 
   border: 1px solid #a96161; 
   font-size: 12px; 
   color: #412c2c; 
   }
   .flush{ 
   color: #FFFFFF; 
   background-color: aqua; 
   }
   .include{ 
   color: #5d3e3e; 
   background-color: #657f7f; 
   }
    .underline{ 
    color: #7da938; 
    background-color: #7c6a6a; 
    }
}

3. 使用更语义化的单词命名 class

.curr{
    color:#FFFFFF;
    background:red;
}
.future{
    background:#9f6262;
}
// curr 是啥? future又是啥? ⬆️

.current-count{ 
    color:#FFFFFF; 
    background:red; 
} 
.future-count{ 
    background:#9f6262; 
}

4. 属性声明顺序

1. 定位相关，如 position、top/bottom/left/right、z-index 等

2. 盒模型相关，如 display、float、margin、width/height 等

3. 排版相关，如 font、color、line-height 等

4. 可视相关，如 background、color 等

5. 其他，如 opacity、animation 等

  /* 定位相关 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  /* 盒模型相关 */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  /* 排版相关 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
  /* 可视相关 */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  /* 其他 */
  opacity: 1;

5. 使用 & 符号引用父选择器

.first {
    .first-title {/* styles */}
    .first-title:after {/* styles */}
    .first-content {/* styles */}
}
/* 用&引用来优化代码 */
.first {
    &-title {
        /* styles */
        &:after {/* styles */}
    }
    &-content {/* styles */}
}

Sass .vs. Less？

预处理器将 CSS 从声明语言转换成一门编程语言

// Less
.mixin( @count )when( @count > 0 ){
    background-color: black;
}
.mixin( @count )when( @count <= 0 ){
    background-color: white;
}
.tag {
    .mixin(100);
}
// Scss
@function selectCount($count) {
    @if $count > 0 {
        return black;
    }
    @else {
        return white;
    }
}
.tag {
    background-color: checkCount(100);
}

 一周热点 | 2022.12.20-2022.12.26

Win 11记事本标签页功能意外曝光

Firefox 启用 “新架构”，速度成倍提升

点这里 ↓↓↓ 记得 关注✔ 标星⭐ 哦~