【前端项目规范】之common.css此文章为“项目代码模版”中的内容前端项目规范包含了：项目命名规范项目架构规范

pc端

/* Module clearfix & float
-------------------------------------------------- */
.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

.f-l {
  float: left;
}

.f-r {
  float: right;
}

/* Module padding
-------------------------------------------------- */
.p-10 {
  padding: 10px;
}

.p-x-10 {
  padding: 0 10px;
}

.p-y-10 {
  padding: 10px 0;
}

.p-t-10 {
  padding-top: 10px;
}

.p-r-10 {
  padding-right: 10px;
}

.p-b-10 {
  padding-bottom: 10px;
}

.p-l-10 {
  padding-left: 10px;
}

/* Module margin
-------------------------------------------------- */
.m-t-1-back {
  margin-top: -1px;
}

.m-l-1-back {
  margin-left: -1px;
}

.m-10 {
  margin: 10px;
}

.m-x-10 {
  margin: 0 10px;
}

.m-y-10 {
  margin: 10px 0;
}

.m-t-10 {
  margin-top: 10px;
}

.m-r-10 {
  margin-right: 10px;
}

.m-b-10 {
  margin-bottom: 10px;
}

.m-l-10 {
  margin-left: 10px;
}

/* Module text-align
-------------------------------------------------- */
.t-a-l {
  text-align: left;
}

.t-a-c {
  text-align: center;
}

.t-a-r {
  text-align: right;
}

/* Module vertical-align
-------------------------------------------------- */
.v-a-t {
  vertical-align: top;
}

.v-a-m {
  vertical-align: middle;
}

.v-a-b {
  vertical-align: bottom;
}

/* Module line-height
-------------------------------------------------- */
.l-h-min {
  line-height: 1;
}

.l-h-max {
  line-height: 2;
}

.l-h-half {
  line-height: 1.5;
}

/* Module font-size
-------------------------------------------------- */
.f-s-0 {
  font-size: 0;
}

.f-s-12 {
  font-size: 12px;
}

.f-s-14 {
  font-size: 14px;
}

.f-s-16 {
  font-size: 16px;
}

.f-s-18 {
  font-size: 18px;
}

.f-s-20 {
  font-size: 20px;
}

/* Module color
-------------------------------------------------- */
.c-red {
  color: @colorRed;
}

.c-green {
  color: @colorGreen;
}

.c-blue {
  color: @colorBlue;
}

.c-yellow {
  color: @colorYellow;
}

.c-orange {
  color: @colorOrange;
}

.c-black {
  color: @colorBlack;
}

.c-gray-deep {
  color: @colorGrayDeep;
}

.c-gray {
  color: @colorGray;
}

.c-gray-light {
  color: @colorGrayLight;
}

.c-gray-c {
  color: @colorGrayC;
}

.c-gray-d {
  color: @colorGrayD;
}

.c-gray-e {
  color: @colorGrayE;
}

.c-gray-f {
  color: @colorGrayF;
}

.c-white {
  color: @colorWhite;
}

/* Module background
-------------------------------------------------- */
.b-red {
  background: @colorRed;
}

.b-green {
  background: @colorGreen;
}

.b-blue {
  background: @colorBlue;
}

.b-yellow {
  background: @colorYellow;
}

.b-orange {
  background: @colorOrange;
}

.b-black {
  background: @colorBlack;
}

.b-gray-deep {
  background: @colorGrayDeep;
}

.b-gray {
  background: @colorGray;
}

.b-gray-light {
  background: @colorGrayLight;
}

.b-gray-c {
  background: @colorGrayC;
}

.b-gray-d {
  background: @colorGrayD;
}

.b-gray-e {
  background: @colorGrayE;
}

.b-gray-f {
  background: @colorGrayF;
}

.b-white {
  background: @colorWhite;
}

/* Module border
-------------------------------------------------- */
.border {
  border: @border;
}

.border-t {
  border-top: @border;
}

.border-r {
  border-right: @border;
}

.border-b {
  border-bottom: @border;
}

.border-l {
  border-left: @border;
}

/* Module radius
-------------------------------------------------- */
.radius-min {
  border-radius: 2px;
}

.radius-max {
  border-radius: 4px;
}

.radius-half {
  border-radius: 1000px;
}

/* Module scroll
-------------------------------------------------- */
.scroll-y {
  overflow-x: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    overflow: hidden;
  }
  &::-webkit-scrollbar-track {
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1);
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(194, 194, 194, 1);
  }
  &::-webkit-scrollbar-thumb:window-inactive {
    background-color: rgba(194, 194, 194, 0.7);
  }
}

/* Module others
-------------------------------------------------- */
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: top;
}

.bold {
  font-weight: bold;
}

.break-all {
  word-break: break-all;
}

微信小程序

page,
view,
text,
navigator,
image,
icon,
swiper,
block,
scroll-view,
canvas,
form,
label,
button,
input,
textarea,
checkbox,
radio,
switch,
picker,
picker-view,
slider,
movable-view,
video,
audio,
progress,
map,
contact-button {
  box-sizing: border-box;
}

page {
  --colorBlue: #409eff;
  --colorBlue-20: #409eff20;
  --colorBlue-10: #409eff10;
  --colorGreen: #52c41a;
  --colorRed: #f5222d;
  --colorRed-90: #f5222d90;
  --colorOrange: #ff6400;
  --colorOrange-10: #ff640010;
  --colorYellow: #f5a84e;
  --colorBlack: #000;
  --colorGrayDeep: #333;
  --colorGray: #666;
  --colorGrayLight: #999;
  --colorGrayC: #ccc;
  --colorGrayD: #d9d9d9;
  --colorGrayE: #e5e5e5;
  --colorGrayF: #f5f5f5;
  --colorWhite: #fff;
  
  --border: 1px solid #d9d9d9;
}

.iconfont {
  color: var(--colorGray);
}

.iconfont::before {
  display: block;
}

/* Module width & height
-------------------------------------------------- */
.w-100 {
  width: 100%;
}

.w-auto {
  width: auto;
}

.h-100 {
  height: 100%;
}

.h-auto {
  height: auto;
}

/* Module clearfix & float
-------------------------------------------------- */
.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

.f-l {
  float: left;
}

.f-r {
  float: right;
}

/* Module display
-------------------------------------------------- */
.d-block {
  display: block;
}

.d-inline-block {
  display: inline-block;
}

.d-inline {
  display: inline;
}

.d-none {
  display: none;
}

/* Module flex
-------------------------------------------------- */
.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-row {
  /* 排列-打横 */
  flex-direction: row;
}

.flex-column {
  /* 排列-打竖 */
  flex-direction: column;
}

.flex-wrap {
  /* 排列-允许换行 */
  flex-wrap: wrap;
}

.flex-x-start {
  /* 水平-居首 */
  justify-content: flex-start;
}

.flex-x-center {
  /* 水平-局中 */
  justify-content: center;
}

.flex-x-end {
  /* 水平-居尾 */
  justify-content: flex-end;
}

.flex-x-between {
  /* 水平-均匀排列-各元素两侧（0）间距 */
  justify-content: space-between;
}

.flex-x-around {
  /* 水平-均匀排列-各元素两侧（相同）间距 */
  justify-content: space-around;
}

.flex-x-evenly {
  /* 水平-均匀排列-各元素两侧（等比）间距 */
  justify-content: space-evenly;
}

.flex-y-start {
  /* 垂直-居首 */
  align-items: flex-start;
}

.flex-y-center {
  /* 垂直-居中 */
  align-items: center;
}

.flex-y-end {
  /* 垂直-居尾 */
  align-items: flex-end;
}

.flex-between-center {
  /* 水平-均匀排列-各元素两侧（0）间距 + 垂直（居中） */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-center {
  /* 水平+垂直（居中） */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Module padding
-------------------------------------------------- */
.p-8 {
  padding: 16rpx;
}

.p-x-8 {
  padding-left: 16rpx;
  padding-right: 16rpx;
}

.p-y-8 {
  padding-top: 16rpx;
  padding-bottom: 16rpx;
}

.p-t-8 {
  padding-top: 16rpx;
}

.p-r-8 {
  padding-right: 16rpx;
}

.p-b-8 {
  padding-bottom: 16rpx;
}

.p-l-8 {
  padding-left: 16rpx;
}

.p-16 {
  padding: 32rpx;
}

.p-x-16 {
  padding-left: 32rpx;
  padding-right: 32rpx;
}

.p-y-16 {
  padding-top: 32rpx;
  padding-bottom: 32rpx;
}

.p-t-16 {
  padding-top: 32rpx;
}

.p-r-16 {
  padding-right: 32rpx;
}

.p-b-16 {
  padding-bottom: 32rpx;
}

.p-l-16 {
  padding-left: 32rpx;
}

/* Module margin
-------------------------------------------------- */
.m-t-1-back {
  margin-top: -1px;
}

.m-l-1-back {
  margin-left: -1px;
}

.m-8 {
  margin: 16rpx;
}

.m-x-8 {
  margin-left: 16rpx;
  margin-right: 16rpx;
}

.m-y-8 {
  margin-top: 16rpx;
  margin-bottom: 16rpx;
}

.m-t-8 {
  margin-top: 16rpx;
}

.m-r-8 {
  margin-right: 16rpx;
}

.m-b-8 {
  margin-bottom: 16rpx;
}

.m-l-8 {
  margin-left: 16rpx;
}

.m-16 {
  margin: 32rpx;
}

.m-x-16 {
  margin-left: 32rpx;
  margin-right: 32rpx;
}

.m-y-16 {
  margin-top: 32rpx;
  margin-bottom: 32rpx;
}

.m-t-16 {
  margin-top: 32rpx;
}

.m-r-16 {
  margin-right: 32rpx;
}

.m-b-16 {
  margin-bottom: 32rpx;
}

.m-l-16 {
  margin-left: 32rpx;
}

/* Module text-align
-------------------------------------------------- */
.t-a-l {
  text-align: left;
}

.t-a-c {
  text-align: center;
}

.t-a-r {
  text-align: right;
}

/* Module vertical-align
-------------------------------------------------- */
.v-a-t {
  vertical-align: top;
}

.v-a-m {
  vertical-align: middle;
}

.v-a-b {
  vertical-align: bottom;
}

/* Module line-height
-------------------------------------------------- */
.l-h-min {
  line-height: 1;
}

.l-h-max {
  line-height: 2;
}

.l-h-half {
  line-height: 1.5;
}

/* Module font
-------------------------------------------------- */
.f-s-0 {
  font-size: 0;
}

.f-s-12 {
  font-size: 24rpx;
}

.f-s-14 {
  font-size: 28rpx;
}

.f-s-16 {
  font-size: 32rpx;
}

.f-s-18 {
  font-size: 36rpx;
}

.f-s-20 {
  font-size: 40rpx;
}

/* Module color
-------------------------------------------------- */
.c-red {
  color: var(--colorRed);
}

.c-green {
  color: var(--colorGreen);
}

.c-blue {
  color: var(--colorBlue);
}

.c-orange {
  color: var(--colorOrange);
}

.c-yellow {
  color: var(--colorYellow);
}

.c-black {
  color: var(--colorBlack);
}

.c-gray-deep {
  color: var(--colorGrayDeep);
}

.c-gray {
  color: var(--colorGray);
}

.c-gray-light {
  color: var(--colorGrayLight);
}

.c-gray-c {
  color: var(--colorGrayC);
}

.c-gray-d {
  color: var(--colorGrayD);
}

.c-gray-e {
  color: var(--colorGrayE);
}

.c-gray-f {
  color: var(--colorGrayF);
}

.c-white {
  color: var(--colorWhite);
}

/* Module background
-------------------------------------------------- */
.b-red {
  background: var(--colorRed);
}

.b-green {
  background: var(--colorGreen);
}

.c-blue {
  background: var(--colorBlue);
}

.b-orange {
  background: var(--colorOrange);
}

.b-yellow {
  background: var(--colorYellow);
}

.b-black {
  background: var(--colorBlack);
}

.b-gray-deep {
  background: var(--colorGrayDeep);
}

.b-gray {
  background: var(--colorGray);
}

.b-gray-light {
  background: var(--colorGrayLight);
}

.b-gray-c {
  background: var(--colorGrayC);
}

.b-gray-d {
  background: var(--colorGrayD);
}

.b-gray-e {
  background: var(--colorGrayE);
}

.b-gray-f {
  background: var(--colorGrayF);
}

.b-white {
  background: var(--colorWhite);
}

/* Module border
-------------------------------------------------- */
.border {
  border: var(--border);
}

.border-t{
  border-top: var(--border);
}

.border-r {
  border-right: var(--border);
}

.border-b{
  border-bottom: var(--border);
}

.border-l {
  border-left: var(--border);
}

/* Module radius
-------------------------------------------------- */
.radius-min {
  border-radius: 8rpx;
}

.radius-max {
  border-radius: 16rpx;
}

.radius-half {
  border-radius: 1000rpx;
}

/* Module others
-------------------------------------------------- */
.bold {
  font-weight: bold;
}