如何写出更“优雅”的CSS代码?

更新日期: 2022-12-21阅读: 671标签: 样式

css(全称Cascading Style Sheets,层叠样式表)为开发人员提供声明式的样式语言,是前端必备的技能之一。基于互联网上全面的资料和简单易懂的语法,CSS非常易于学习,但其知识点广泛且分散,很难做到精通。在我们日常开发中,受限于原代码混乱、DDL将近等问题,常常忽视了CSS代码的质量,很容易写出杂乱无章的CSS文件。


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

适用于:margin、padding、border、font、background 等

但并非所有情况下都必须缩写,因为当一个属性的值缩写时,总是会将所有项都设置一遍,而有时候我们不希望设置值里的某些项,这时候需要开发者自行判断。

.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、合并选择器

使用 "," 连接多个选择器定义公用属性,不仅能增加可读性,还能减小 css 文件大小。

.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 等

建议:在属性数量较多时可以参考这 5 个类别归类排列。

/* 定位相关 */
  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、使用 & 符号引用父选择器

& 是 Sass 和 Less 中提供的语法糖,用于表示对父选择器的引用

优点:非常适合用于编写组件的样式,减少了很多重复单词

缺点:从 html 的 class name 中寻找对应样式的成本增加

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

6、Sass .vs. Less?

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

可嵌套的语法增加了样式文件的可读性和可维护性
变量与混合特性能够减少很多重复的样式声明

Less 更像 CSS,易于上手,能够从 CSS 平滑过渡;Sass 的缩进语法接受度因人而异,Sass3.0 中提出了兼容 CSS 的 Scss,用户可以选择使用 Sass 或 Scss。

当项目 CSS 中需要涉及复杂逻辑时,Sass/Scss 更适合,Sass 提供了更强大、更接近编程语言的 @function、@if/@else、@while 等语法;当项目的样式复杂度不高时,选 Sass 或 Less 都可以。 (下面是一个 Less 和 Scss 语法对比例子)

// 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);
}


总结

综上,CSS作为一门前端必备的基础技能,具有许多原生的痛点。近年来,全球的开发者也在源源不断地提出不同的优化方案,我们在日常关注react、NodeJS、性能优化等热门前端话题的时候,也不要忘了好好写CSS代码呀~

链接: https://fly63.com/article/detial/12268

css样式大全,完整的Css样式大全(整理)

CSS样式被称为为“层叠样式表”,是一种网页制作做不可或缺的技术,是用于装饰网页,达到设计效果的一种样式语言。

css 分割线样式_css实现文章分割线的多种方法总结

这篇文章整理css如何实现文章分割线的多种方式,分割线在页面中可以起到美化作用,那么就来看看使用css实现分割线样式的多种方法:单个标签实现分隔线、巧用背景色实现分隔线、inline-block实现分隔线、浮动实现分隔线、利用字符实现分隔线

原生js获取、添加、修改_非行间css样式

在html中样式分为:浏览器默认样式,引用样式(link外部样式文件,stle标签定义样式)、行间样式(及节点style属性定义的样式)。这篇文章主要讲解使用原生js获取、添加非行间css样式。

css常用样式整理_css属性大全

css常用样式有哪些?这篇文章整理如下内容:字体属性(font)、 常用字体 (font-family)、背景属性 (background)、区块属性 (Block)、方框属性 (Box)、边框属性 (Border)、列表属性 (List-style)、定位属性 (Position)、CSS文字属性

CSS层叠样式表

层叠样式表,用来表现HTML或者XML等文件样式的计算机语言。网页表现与内容分离的样式设计语言,能够对网页中对象排版进行像素级精确控制,几乎支持所有字体字号

如何用自己喜欢的 CSS 风格重置网站的样式

许多前端开发人员都在用 Normalize 为他们的网站设计样式。一些人喜欢在 Normalize.css 中添加一些自己偏好的样式,我也一样。在本文中,我会与你分享我自己的 CSS reset 项目(除了 Normalize.css 之外我还使用它们)。

css单行截断和多行截断问题

多行截断有好几种方法,可以直接使用float方法,方便自定义样式及监听事件,并且兼容性好,是暂时最完美的解决方案。就是略复杂,不过网上有可以直接拿来用哦~

引入CSS样式的三种方式

行内式:该语法中style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。内嵌式<style>标记一般位于<head>标记中的<title>标记之后,也可以把它放在HTML文档的任何地方。

整理一些少用但又实用的 CSS 样式

什么是偏门,就是有些片段很少使用,时间久了就记不起来,但用的时候又要去找,所以这里为大家整理一些少用但又实用的 CSS 样式,input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色

vue用v-html加载渲染,里面的内容样式不生效

需要输出富文本的内容,需要设置里面的图片样式最大宽度100%。可是设置img 100%后没反应,看F12检查元素也没加上去。解决方法有2个:coped属性导致css仅对当前组件生效

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!