如何写出更“漂亮”的CSS代码？

时间：2023-03-18 19:05:07 科技观察

CSS（全称CascadingStyleSheets，层叠样式表）为开发者提供了一种声明式的样式语言，这是前端必备技能之一。基于网上全面的资料和简单易懂的语法，CSS非常容易学习，但其知识点广泛而分散，难以掌握。在我们日常的开发中，受限于原始代码的混乱和DDL的方式，我们往往忽略了CSS代码的质量，很容易写出乱七八糟的CSS文件。代码优化建议1.使用缩写属性来简化代码适用于：margin,padding,border,font,background等但并不是所有的情况都必须缩写，因为当一个属性的值被缩写时，所有的item都会一直setonce，有时我们不想在value中设置某些项，这时候需要开发者自己判断。2.合并选择器使用“,（逗号）”连接多个选择器来定义共同的属性，这样既可以减小css文件的大小，又可以增加可读性。为了更容易定位问题，在逗号后加了一行。3.使用更多的语义词来命名类。当命名课程时，目标是“在您不怀疑之后发展的人”4.属性声明的顺序参考：stylelint[1]的bootstrap属性顺序[1]声明放在一起，按如下顺序排列：Positioning：定位相关，如position、top/bottom/left/right、z-index等Boxmodel：盒模型相关，如display、float、margin、Width/heightetc.Typographic：排版相关，如字体，颜色，line-height等Visual：视觉相关，如背景，颜色等Misc：其他，如opacity，animation等个人建议：可以属性数量多的时候参考这5个类别进行排序和排列，顺序不需要太纠结。.declaration-order{/*定位*/position:absolute;顶部：0；右：0；底部：0；左：0；z-指数：100；/*盒子模型*/display:block;;宽度：100px；高度：100px；/*Typography*/font:normal13px"HelveticaNeue",sans-serif;行高：1.5；颜色：#333；文本对齐：居中；-颜色：#f5f5f5；边框：1px实心#e5e5e5；边界半径：3px；/*Misc*/opacity:1;}5.使用&符号来引用父选择器&是Sass和Less中提供的语法糖，用来表示对父选择器的引用，在源码中被广泛使用antd设计代码。优点：非常适合写组件样式，减少很多重复的词。缺点：从HTML类名中查找对应样式的成本增加。header{.header-title{/*styles*/}.header-title:after{/*styles*/}.header-content{/*styles*/}}/*使用&引用优化代码：point_down:*/.header{&-title{/*styles*/&:after{/*styles*/}}&-content{/*styles*/}}善用相关技术来自TheStateofCSS2020:Technology[2]调查我们可以知道目前主流CSS工具的用户数和满意率数据（样本量10000+，仅供参考），分为4个象限：评价：使用率低，满意率高。一项值得关注的技术。采用：高使用率，高满意度。安全技术可用。[Sass,BEM,PostCSS,StyledComponents]规避：使用率低，满意度低。现在最好避免的技术。待定：使用率高，满意度低。如果您正在使用这些技术，请重新评估它们。CSSMethodologyBEM:ModularNamingSpecificationBEM（Block块，Element元素，Modifier修饰符）是一种标准化的类名命名约定。计算机科学中只有两个难题：缓存失效和命名事物—PhilKarlton：raising_hand：BEM解决了什么问题？CSS没有作用域，当类同名时，会造成“样式污染”。当CSS文件很长时，不一致的命名会使结构混乱。编写重复代码BEM优点：模块化、结构化、可重用性：raising_hand：BEM规范？Block块：一个独立且有意义的实体，任何DOM元素都可以是块元素元素：块的子元素，依附于块而存在。如：列表中的某项、卡片的标题、选择器中的选择项等。Modifier修饰符：表示块或元素的外观、状态或行为。如：是否点击，是否禁用等命名约定：.block__element--modifierblockandelementusedoubleunderscores__linkelementandmodifierusedoubledashes--linkblock,element,modifier当包含多个单词时，使用中间破折号line-link不推荐元素嵌套。如果需要嵌套，则意味着要从中提取一个组件：栗子：例子【Element-UI源码】https://github.com/ElemeFE/element/blob/dev/packages/table/src/table。vueAtomicCSS:atomicCSS:raising_hand:什么是原子？原子是指不能再分解成化学反应的基本粒子。在ACSS中，每一个只有一个CSS规则且不可分割的CSS类被称为一个CSS原子。HTML的样式由多个CSS原子组成，并用HTML内联编写。优点：无需维护CSS文件，HTML内联“所见即所得”；当HTML元素被移动/删除时，它们的样式也可以相应地移动，而无需额外的更新成本。缺点：结构和风格强耦合，不利于大型项目的维护，容易产生大量重复代码。:chestnut:ExampleFlex容器

CSSpre/postprocessor为了给CSS提供更强大的功能（嵌套、变量、操作等）并使其更容易维护，Sass、Less、和手写笔诞生了。处理器。开发者可以使用这些工具提供的更方便的语法和特性进行开发，预处理器负责将代码编译成CSS，达到提供样式的目的。Sass(Scss)&LessSass:语法|Sass中文网[3]，语言特性|少中文网[4]：raising_hand：预处理器的优越性？将CSS从声明式语言转换为编程语言可嵌套的语法增加了样式文件的可读性和可维护性变量和混合可以减少许多重复的样式声明：raising_hand:Sass.vs.较少的？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@functioncheckCount($count){@if$count>0{返回黑色;}@else{返回白色；}}.tag{background-color:checkCount(100);}Sass提供命令行语法，用户在使用Dart或Ruby时，可以通过命令行解析Sass（将Sass编译成CSS）等操作，为开发者提供空间用于扩展。基于Sass良好的扩展性，Compass等Sass框架应运而生。PostCSS:raising_hand:定义？狭义的PostCSS：“AtoolfortransformingCSSwithJavaScript”，一种将CSS转换为JS代码的工具，提供将CSS代码解析为AST的能力，并向开发者暴露可以修改CSS代码的JavaScriptAPI。广义的PostCSS：基于PostCSS工具提供的API开发的一系列插件，可以对用户编写的CSS代码进行处理。这些插件也可以称为后处理器。:raising_hand:比较流行的PostCSS应用场景有哪些？autoprefixer插件：打包时自动添加浏览器前缀属性div{display:flex}//自动转换为：point_down:div{display:-webkit-box;显示：-webkit-flex；显示：-moz-box；显示：-ms-flexbox；display:flex;}通过识别和替换颜色值来切换深色/浅色模式前端站点一键支持深色模式[5]stylelint插件：CSS代码检查工具postcss-utilities[6]：用于开发提供CSSshorthand(atomization).cfx{@utilclearfix;}//相当于:point_down:.cfx:after{content:'';显示：块；clear:both;}.rounded-top{@utilborder-top-radius(4px);}//等价于:point_down:.rounded-top{border-top-left-radius:4px;border-top-right-radius:4px;}CSSinJSstyled-components/Emotion复用性高：CSS从组件层面封装，适应“组件化”的前端时代，无需维护CSS文件代码。高灵活性：使用styled-components可以轻松找到与组件关联的样式；当您移动/删除HTML元素时，它的样式也可以移动/删除。解决CSS“全局污染”的痛点：styled-components在编译时为样式生成唯一的类名，开发者再也不用担心类名重复的问题。//创建一个Title组件，它将呈现一个带样式的

标签constTitle=styled.h1`font-size:1.5em;文本对齐：居中；color:palevioletred;`;//创建一个Wrapper组件，它将渲染一个样式化的
标签并将wrapperColor属性读取为背景色constWrapper=styled.section`padding:4em;背景：${props=>props.wrapperColor||"palevioletred"};`;//像使用常规React组件一样使用Title和Wrapperrender(HelloWorld!);raising_hand:styled-components的适用场景使用React或ReactNative开发中小型项目时；或者基于组件库开发，大型项目页面，自定义样式复杂度低，元素样式不用改或者改的少综上所述，CSS是前端必备的基本功，原来有很多痛点。近年来，全球的开发者也不断提出不同的优化方案。我们在关注React、NodeJS、性能优化等前端热门话题的同时，也不要忘记写好CSS代码~