「css零碎」使用技巧

1. 使用尽量使用padding代替margin
因为BFC问题, margin上下有可能会重叠

2. position:fixed降级问题

当我们使用position:fixed的时候, 如果父元素使用了transform, fixed就会降级为absolute
不过其实如果度元素高度和fixed元素高度一样的时候, 他们的表现效果没有发生改变, 如果存在滚动情况的话就在父元素加上overflow-y:auto

3. 首行缩进

文字部分的使用尽量用rem单位

text-indent: 2em

4. 尽量使用代码复用, 例如mixin

好的代码编写很明显的一点就是代码复用性强, 有复用性强例如写成好多个class, 然后在一个div里面放好多个class其实是不好的, 一样是笨重
解决方案是在scss中改用@mixin方案代替

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

5. 1px方案

使用伪类+transform来解决, 不知道有没有效果, 我没有用过, 但说是可以用我就记录, 很精致👍

.min-device-pixel-ratio(@scale2, @scale3) {
  @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
    transform: @scale2;
  }
  @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
    transform: @scale3;
  }
}

.border-1px(@color: #DDD, @radius: 2PX, @style: solid) {
  &::before {
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    border: 1PX @style @color;
    border-radius: @radius;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
      width: 200%;
      height: 200%;
      border-radius: @radius * 2;
      transform: scale(.5);
    }
    @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
      width: 300%;
      height: 300%;
      border-radius: @radius * 3;
      transform: scale(.33);
    }
  }
}

.border-top-1px(@color: #DDD, @style: solid) {
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-top: 1Px @style @color;
    transform-origin: 0 0;
    .min-device-pixel-ratio(scaleY(.5), scaleY(.33));
  }
}

6. 内联首屏关键css

这是css性能优化的一部分, 首次绘制, 重要内容可以通过背景块给用户一个预期, 类似淘宝一样

7. 两端对齐

类似:

div {
    width: 100px;
    text-align: justify;
    text-align-last:justify
}
div:after{
    content: '';
    display: inline-block;
    width: 100%;
}

---

文章参考自：https://juejin.im/post/5cb45a06f265da03474df54e