如何写出更优雅的CSS代码？

news2024/10/7 16:18:09

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

代码优化建议

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

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

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

2. 合并选择器

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

为了更易于定位问题，逗号后换行。

3. 使用更语义化的单词命名class

   命名的时候以“在你之后开发的人不会产生疑惑”为目标

4. 属性声明顺序

   Reference：Bootstrap property order for Stylelint[1]

   选择器中属性数量较多时，将相关的属性声明放在一起，并按以下顺序排列：

  1.  Positioning：定位相关，如position、top/bottom/left/right、z-index等
  2.  Box model：盒模型相关，如display、float、margin、width/height等
  3.  Typographic：排版相关，如font、color、line-height等
  4.  Visual：可视相关，如background、color等
  5.  Misc：其他，如opacity、animation等

个人建议：在属性数量较多时可以参考这5个类别归类排列，至于顺序没必要太过纠结。

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  /* Misc */
  opacity: 1;
}

 5. 使用&符号引用父选择器

&是Sass和Less中提供的语法糖，用于表示对父选择器的引用，antd design的源码  里应用广泛

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

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

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

善用相关技术

从The State of CSS 2020: 技术[2]调研中我们可以得知当前主流CSS工具的用户数量与满意率数据（样本数量1万+，仅用于参考），其中分为了4个象限：

  • 评估: 使用率较低，满意度较高。值得关注的技术。
  • 采用: 使用率高，满意度高。可采用安全技术。【Sass、BEM、PostCSS、Styled Components】
  • 规避: 使用率低，满意度低。目前最好避免使用的技术。
  • 待定: 使用率高，满意度低。如果您正在使用这些技术，请重新评估它们。

CSS方法论

BEM：模块化命名规范

BEM（Block块、Element元素、Modifier修饰符）是一种规范化的类名命名约定。

There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton

🙋 BEM 解决了什么问题？

  • CSS没有作用域，class同名时会造成“样式污染”
  • CSS文件较长时，不统一的命名使得结构比较混乱
  • 不规范的命名使得样式难以定位到对应的HTML元素，不同开发者进行开发时容易写出重复的代码

BEM的优势：模块化、结构化、可重用性

🙋 BEM 规范？

Block块： 一个独立且有意义的实体，任何DOM元素都可以是块Element元素：块的子元素，依附于块存在。如：列表中的某一项、卡片的标题、选择器中的选择项等Modifier修饰符： 表示块或元素的外观、状态或行为。如：是否点击、是否禁用等命名规范：

.block__element--modifier

block 和 element 用双下划线__链接

element 和 modifier 用双中划线--链接

block、element、modifier 包含多个单词时，用一个中划线-链接

不推荐element嵌套，如果需要嵌套则说明该从中抽一个组件出来了

🌰例子

【Element-UI源码】https://github.com/ElemeFE/element/blob/dev/packages/table/src/table.vue

Atomic CSS：原子化CSS

🙋什么是原子化？

 原子（atom），是指化学反应不可再分的基本微粒

在ACSS中，将每个仅有单一CSS规则的、不可再拆分的CSS类称为CSS原子。HTML的样式由多个CSS原子组合而成，以内联的形式写在HTML中。

  • 优势：无需维护CSS文件，在HTML中内联“所见即所得”；移动/删除HTML元素时，其样式也能随之移动，无需额外的更新成本。
  • 缺点：结构和样式强耦合，不利于大型项目维护，容易产生很多重复代码。

🌰例子

<!--- 使用ACSS语法创建一个子元素水平垂直居中的容器 --->
<div class="D(f) Jc(c) Ac(c) ">Flex容器</div>
<!--- 原子化CSS思想的代码 --->
<div className="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-8 ant-col-lg-6 gutter-row"></div>

CSS预/后处理器

为了给CSS提供更强大的功能（嵌套、变量、运算等）、使其更易于维护，诞生了Sass、Less、Stylus等CSS预处理器。开发者可以使用这些工具提供的更便捷的语法和特性进行开发，预处理器则负责将代码编译为CSS，从而达到提供样式的目的。

Sass (Scss) & Less

Sass: 语法 | Sass 中文网[3]、语言特性 | Less 中文网[4]

🙋预处理器的优越性？

   将CSS从声明语言转换成一门编程语言

   可嵌套的语法增加了样式文件的可读性和可维护性

   变量与混合特性能够减少很多重复的样式声明

🙋Sass .vs. Less？

  • 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 checkCount($count) {
    @if $count > 0 {
        return black;
    }
    @else {
        return white;
    }
}
.tag {
    background-color: checkCount(100);
}

Sass提供了命令行语法，当用户使用Dart或Ruby时可以通过命令行来对Sass进行解析（将Sass编译为CSS）等操作，为开发者提供了扩展空间。基于Sass良好的可扩展性，诞生了诸如Compass等Sass框架。

PostCSS

🙋定义？

狭义的PostCSS：“A tool for transforming CSS with JavaScript”，将CSS转换为JS代码的工具，提供了将CSS代码解析为AST的能力，并向开发者暴露出能够修改CSS代码的JavaScript API。

广义的PostCSS：基于PostCSS工具提供的API开发出的一系列插件，能够对用户编写的CSS代码进行处理，这些插件也可以称之为后处理器。

🙋有什么较为流行的PostCSS应用场景？

  • autoprefixer插件：打包时自动添加浏览器前缀属性
div { display: flex }
// 自动转换为👇
div{
  display : -webkit-box;
  display : -webkit-flex;
  display : -moz-box;
  display : -ms-flexbox;
  display : flex;
}
  • 通过颜色值的识别与替换来切换深/浅色模式 前端站点一键支持暗色模式[5]
  • stylelint插件：CSS代码检查工具
  • postcss-utilities[6]：为开发者提供CSS简写方式（原子化）
.cfx {
    @util clearfix;
}
// 等价于👇
.cfx:after {
    content: '';
    display: block;
    clear: both;
}
.rounded-top {
    @util border-top-radius(4px);
}
// 等价于👇
.rounded-top {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

CSS in JS

styled-components /Emotion

  • 高可复用性：从组件的层面对 CSS 进行封装，适应“组件化”的前端时代，代码中不再需要维护CSS文件。
  • 高灵活性：使用 styled-components 能够很轻松地找到某个组件关联的样式；移动/删除HTML元素时，其样式也能随之移动/删除。
  • 解决了CSS“全局污染”的痛点：styled-components在编译时为样式生成唯一的class name，开发者不必再担心 class name 重复。
// 创建一个 Title 组件,它将渲染一个附加了样式的 <h1> 标签
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;
// 创建一个 Wrapper 组件,它将渲染一个附加了样式的 <section> 标签，并读取wrapperColor属性作为背景色
const Wrapper = styled.section`
  padding: 4em;
  background: ${props => props.wrapperColor || "palevioletred"};
`;
// 就像使用常规 React 组件一样使用 Title 和 Wrapper
render(
  <Wrapper wrapperColor="red">
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

🙋styled-components的适用场景

  • 使用React或React Native进行开发时
  • 中小型项目；或基于组件库开发、自定义样式复杂度不高的大型项目
  • 页面中元素样式无需变化或变化较少时

总结

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/953760.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

阿里云上linux服务器安装tomcat及vuepress2搭建博客部署

阿里云上linux服务器安装tomcat及vuepress2搭建博客部署

一、准备材料 2年前白嫖了试用期的服务器玩了一阵子&#xff0c;到期了&#xff0c;重新购买一个服务器&#xff0c;再次记录一下过程&#xff0c;有需要的可以参考 配置参数&#xff1a;1核2G 贷款1M 阿里云服务器、MobaXterm、jdk1.8、tomcat8.5.78 安装参数&#xff1a…
阅读更多...
HP惠普星15青春版/惠普小欧笔记本电脑15s-du1008tx原装出厂Win11系统

HP惠普星15青春版/惠普小欧笔记本电脑15s-du1008tx原装出厂Win11系统

适用型号&#xff1a;15s-du1007tx、15s-du1008tx、15s-du1009tx、15s-du1010tx、15s-du1011tx、15s-du1012tx、15s-du1013tx 自带所有驱动、出厂主题壁纸LOGO、Office办公软件、惠普电脑管家等预装程序 所需要工具&#xff1a;32G或以上的U盘 文件格式&#xff1a;ISO 文件大…
阅读更多...
JS返回NodeList和HTMLCollection详解

JS返回NodeList和HTMLCollection详解

HTML DOM 集合 (Collection) 概述 HTML DOM 集合 (Collection) 是一组 HTML 元素&#xff0c;这些元素可以通过 JavaScript 代码进行访问和操作。HTML DOM 集合通常由一个或多个 HTML 元素组成&#xff0c;并提供了访问和操作这些元素的方法。HTML DOM 集合在 JavaScript 中非常…
阅读更多...
加速通导融合，中国在精准定位领域脱颖而出

加速通导融合，中国在精准定位领域脱颖而出

近日&#xff0c;上海正式发布“5G揽海”行动计划&#xff0c;旨在构建陆海空天一体化海洋网络&#xff0c;加快建设基于“北斗5G”的超高精定位网的海洋新型基础设施&#xff0c;赋能数字经济时代下航运的高质量发展。 这是中国数字经济蓬勃发展下的一个小缩影。今年以来&…
阅读更多...
【LeetCode算法系列题解】第26~30题

【LeetCode算法系列题解】第26~30题

CONTENTS LeetCode 26. 删除有序数组中的重复项&#xff08;简单&#xff09;LeetCode 27. 移除元素&#xff08;简单&#xff09;LeetCode 28. 找出字符串中第一个匹配项的下标&#xff08;简单&#xff09;LeetCode 29. 两数相除&#xff08;中等&#xff09;LeetCode 30. 串…
阅读更多...
骨传导耳机危害是什么？是否会影响听力？

骨传导耳机危害是什么？是否会影响听力？

如果说正确的使用骨传导耳机是没有危害的&#xff0c;他也并不会像其他人说的会影响听力&#xff0c;相反骨传导耳机比其他类型的耳机更能保护听力。 首先骨传导耳机的传声原理很独特&#xff0c;借用人体骨骼来进行传声&#xff0c;首先骨传导振子带动颅骨震动&#xff0c;将…
阅读更多...
如何将两个pdf合并成一个？pdf合并技巧分享

如何将两个pdf合并成一个？pdf合并技巧分享

在日常工作过程当中&#xff0c;我们经常需要处理一些文件&#xff0c;而文件的处理往往是琐碎的&#xff0c;想要提高工作效率&#xff0c;需要选择一些合适的方法&#xff0c;并掌握一定的技巧&#xff0c;那么&#xff0c;如何将两个pdf合并成一个?pdf合并技巧有哪些呢?接…
阅读更多...
virtualbox centos 使用NAT模式上网

virtualbox centos 使用NAT模式上网

新安装了centos7之后&#xff0c;发现无法yum&#xff0c;无法ping外网。ping 外网域名无法ping通。 virtualbox的nat 网卡已经打开了。 需要手动打开centos7的网卡&#xff08;centos7.9&#xff09; 可以通过 ip addr 命令查看网卡地址 1: lo: <LOOPBACK,UP,LOWER_UP>…
阅读更多...
现货白银趋势分析指标

现货白银趋势分析指标

在一众分析现货白银市场趋势的技术指标中&#xff0c;ADX以它的独特优势&#xff0c;赢得了一众粉丝的支持。它能够反映市场趋势的强度&#xff0c;这是投资者需要知道的重要信息。了解趋势的强度&#xff0c;能够让交易者对自己所采取的交易策略更有信心。毕竟做现货白银交易&…
阅读更多...
移动硬盘数据怎么加密？移动硬盘加密软件怎么选？

移动硬盘数据怎么加密？移动硬盘加密软件怎么选？

移动硬盘是一种比较常见的移动储存设备&#xff0c;可以帮助我们储存很多重要数据。那么移动硬盘中的重要数据该怎么加密呢&#xff1f;下面我们就来了解一下。 ​移动硬盘加密方法 移动硬盘的加密方法一般分为两种&#xff0c;一种是硬件加密&#xff0c;另一种则是软件加密。…
阅读更多...
Compose学习 - 环境配置及compose、kotlin插件、gradle、AndroidStudio版本对应关系

Compose学习 - 环境配置及compose、kotlin插件、gradle、AndroidStudio版本对应关系

最近学习Compose&#xff0c;一开始学习的Compose版本是1.1.1&#xff0c;学习的过程中发现&#xff0c; LazyHorizontalGrid这个方法只有在1.2.0以后版本才支持。 想着既然要升级&#xff0c;直接用最新的好了。后面按照官网建议&#xff0c;下载了最新的AndroidStudio&#…
阅读更多...
[Spring Boot] 开发时可以运行，但Maven打包后，无法运行

[Spring Boot] 开发时可以运行，但Maven打包后，无法运行

问题&#xff1a;开发过程中一切正常&#xff0c;但在打包后&#xff0c;使用java -jar运行jar包时报错 Exception in thread "main" java.lang.UnsupportedClassVersionError: org/springframework/boot/loader/JarLauncher has been compiled by a more recent ver…
阅读更多...
AIGC生成3D模型探索与实践

AIGC生成3D模型探索与实践

本文将以AIGC生成3D模型探索与实践为主题&#xff0c;结合电商平台的应用需求&#xff0c;探讨如何利用AIGC技术实现3D模型的个性化生成、大规模生产和快速推广&#xff0c;以及其对于电商行业的推动作用。 背景 随着电商平台的兴起&#xff0c;3D模型已经成为展示商品的重要手…
阅读更多...
JVM垃圾回收算法和CMS垃圾收集器

JVM垃圾回收算法和CMS垃圾收集器

目录 判断一个对象是否死亡&#xff1f; 1、引用计数法 2、可达性分析算法 三色标记 垃圾收集算法 1、分代收集理论 2、垃圾回收算法 标记-清除 标记-复制 标记-整理 CMS&#xff08;Concurrent Mark Sweep&#xff09;收集器 CMS垃圾收集器步骤 CMS垃圾收集器优…
阅读更多...
C语言每日一练----Day(13)

C语言每日一练----Day(13)

本专栏为c语言练习专栏&#xff0c;适合刚刚学完c语言的初学者。本专栏每天会不定时更新&#xff0c;通过每天练习&#xff0c;进一步对c语言的重难点知识进行更深入的学习。 今日练习题关键字&#xff1a;数字颠倒 单词倒排 &#x1f493;博主csdn个人主页&#xff1a;小小uni…
阅读更多...
git 代码提交有错误，要回退到指定的分支

git 代码提交有错误，要回退到指定的分支

第一步&#xff0c;找到要回退到的版本号 第二步&#xff0c;切换到要回退的分支&#xff0c;执行 git reset --hard xxx第三步&#xff0c;提交 git push -f
阅读更多...
STM32--RTC实时时钟

STM32--RTC实时时钟

文章目录 Unix时间戳时间戳转换BKPRTC简介RTC框图硬件电路RTC的注意事项RTC时钟实验工程 Unix时间戳 Unix 时间戳是从1970年1月1日&#xff08;UTC/GMT的午夜&#xff09;开始所经过的秒数&#xff0c;不考虑闰秒。 时间戳存储在一个秒计数器中&#xff0c;秒计数器为32位/64…
阅读更多...
【大数据毕设】基于Hadoop的招聘网站可视化的设计与实现(一)

【大数据毕设】基于Hadoop的招聘网站可视化的设计与实现(一)

博主介绍&#xff1a;✌全网粉丝6W,csdn特邀作者、博客专家、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于大数据技术领域和毕业项目实战✌ &#x1f345;文末获取项目联系&#x1f345; 基于Hadoop的招聘网站可视化的设计与实现 摘要&#…
阅读更多...
gitHooks使用教程

gitHooks使用教程

1. 安装所需依赖 npm install eslint prettier husky lint-staged --save-dev 2.初始化 husky npx husky-init && npm install 这将创建一个 .husky/ 目录&#xff0c;并且在其中包含一个示例的 pre-commit 文件。 3.设置 pre-commit 钩子 npx husky add .husky/…
阅读更多...
正规黄金代理的三大要素

正规黄金代理的三大要素

对于现货黄金投资来说&#xff0c;寻找一个正规的黄金代理是十分重要的问题。在目前的现货黄金投资市场中&#xff0c;现货黄金代理的数量很多&#xff0c;他们都致力于耕耘现货黄金投资市场。当越来越多的专业人士加入到现货黄金投资的市场中当中时&#xff0c;这个市场将会越…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023