My Custom CSS Reset

前言

每当我开始一个新项目时，首要的任务就是处理 CSS 语言中的那些边边角角的问题。为了解决这些问题，通常会使用自定义的一组基础样式。

My CSS Reset

持续更新…

/*
  Custom CSS Reset
*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html, body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
#root, #__next {
  isolation: isolate;
}

@mixin flex($f_d: column, $j_c: normal, $a_i: normal) {
  display: flex;
  flex-direction: $f_d;
  justify-content: $j_c;
  align-items: $a_i;
}

@mixin w_h($w: auto, $h: auto) {
  @if $w != auto {
    width: #{$w}px;
  } @else {
    width: auto;
  }
  @if $h != auto {
    height: #{$h}px;
  } @else {
    height: auto;
  }
}

@mixin font($s: 24, $c: #444, $l: 24, $f: 400) {
  font-size: #{$s}px;
  color: #{$c};
  line-height: #{$l}px;
  font-weight: #{$f};
}