【css】高效地写样式

日常工作中,多人合作模式下如果能统一规范风格,很有利于提高代码可读性与可维护性;记录一下用过的

命名

结合 中划线 和 双下划线, -表示特定意义模块,__表示下面的子模块

/* 新闻版块 */
.news-borad {
    .board__abstract {/* 摘要 */
        .indicator__content {/* 摘要 内容 */
          margin: 20px 0;
        }
        .indicator__title {/* 摘要 标题*/
          margin-bottom: 13px;
        }
        /* ... */
    }
}

选择器使用

选择器嵌套应尽量少于 3 级,提高代码 可读性与可维护性

/* bad❌ */
.page .header .login #username input {}

/* good✅*/
.page input {}
  • 尽量简洁,不要使用嵌套过多过于复杂的选择器。
  • 通配符和属性选择器效率最低,需要匹配的元素最多,尽量避免使用。
/* 通配符 */
*.warning {color:red;}
*#maincontent {border: 1px solid blue;}

/* 属性选择器:包含 "example" 的链接 */
a[href*="example"] {
  background-color: green;
}
  • 避免使用 CSS Expression(为了确保有效性,CSS 表达式会进行频繁的求值,耗能大。在很多团队也中它也是被禁用的)
  • 日常小规范的积累,才能有效控制代码质量

考虑性能的属性选择

这些是计算量较大的属性

box-shadows
border-radius
transparency
transform(恰当使用,也可提高效率)
CSS filters

需要避免页面元素的重绘重排

  • 使用 transform 替代 top,left等属性的转换
  • 使用 visibility 替换 display: none ,因为前者只会引起重绘,后者会引发回流(改变了布局)
  • 不要把节点的属性值放在一个循环里当成循环里的变量。(获取属性值的时候,会引起重新计算)
  • 不要使用 table 布局,可能很小的一个小改动会造成整个的重新布局
  • 动画实现的时机选择,可以选择使用 requestAnimationFrame

变量使用,函数使用(scss)

$@mixin@include;其中变量的使用,既方便统一批量修改,也有利于后期扩展主题切换的需求,具体可参考Vue项目中Scss实现主题切换
像这些定义mixins的文件,文件名头可以加上下划线,这样后面就不会被编译成单独的css文件了

/* 引用全局变量 */
.main__container {
   box-sizing: border-box;
   border: 1px solid $--color-card-grey;
   background: $--color-white;
}
/* 居中 */
@mixin center {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.box {
  @include center;
}

公共样式,常用的搭配,提出来用

/*输入提示文字placeholder*/
.ph-t {
    font-size: 13px;
    color: #B3B7C8;
    cursor: default;
}
/* 清除浮动 */
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

目前的项目里,甚至连常用的margin,font-size等高频属性,也提取出来了,个人感觉用起来还是比较方便

.ml-20 {
    margin-left: 20px;
}
.fs-16 {
    font-size: 16px;
}

最近看到一个css框架,感觉还不错,哇哦!

  • Tailwind CSS 官网

Tailwind CSS 是一个功能类优先的 CSS 框架,它集成了诸如 flex, pt-4, text-centerrotate-90 这样的的类,它们能直接在脚本标记语言中组合起来,构建出任何设计

  • 如何评价CSS框架TailwindCSS?-知乎

你可能感兴趣的:(【css】高效地写样式)