花卉网 — 您身边的花草养护与盆景制作专家!关注花草乐让生活,温暖如花。

如何治理你的 CSS 代码?

时间:2021-10-04 19:01编辑:admin来源:可以赌足球的app当前位置:主页 > 可以赌足球的app多肉植物 > 仙人掌科 >
本文摘要:上一文我们从技术细节的角度分析了 CSS 结构的相关内容。本文我们提升一下思考维度,从组织治理的角度探讨如何治理好项目中的 CSS 代码。 接下来我们先解决 CSS 原生语法未能很好实现的模块化和作用域的问题,然后再对代码结构举行优化,提升代码的复用率。如何组织样式文件只管 CSS 提供了 import 下令支持文件引用,但由于其存在一些问题(好比影响浏览器并行下载、加载顺序庞杂等)导致使用率极低。

可以赌足球的app

上一文我们从技术细节的角度分析了 CSS 结构的相关内容。本文我们提升一下思考维度,从组织治理的角度探讨如何治理好项目中的 CSS 代码。

接下来我们先解决 CSS 原生语法未能很好实现的模块化和作用域的问题,然后再对代码结构举行优化,提升代码的复用率。如何组织样式文件只管 CSS 提供了 import 下令支持文件引用,但由于其存在一些问题(好比影响浏览器并行下载、加载顺序庞杂等)导致使用率极低。更常见的做法是通过预处置惩罚器或编译工具插件来引入样式文件,因此本课时的讨论将不局限于以 .css 为后缀的样式文件。

治理样式文件的目的就是为了让开发人员更利便地维护代码。详细来说就是将样式文件举行分类,把相关的文件放在一起。让工程师在修改样式的时候更容易找到对应的样式文件,在建立样式文件的时候更容易找到对应的目录。下面我们来看看热门的开源项目都是怎么来治理样式文件的。

开源项目中的样式文件我们先来看看著名的 UI 相关的开源项目是怎么治理样式文件的。以 Bootstrap 4.4 为例,项目样式代码结构,可以看出项目使用的是 Sass 预处置惩罚器。

该目录包罗了 5 个目录、组件样式文件和一些全局样式。再来分析下目录及内容:forms/,表单组件相关样式;helpers/,公共样式,包罗定位、清除等;mixins/,可以明白为生成最终样式的函数;utilities/,媒体查询相关样式;vendor/,依赖的外部第三方样式。

根目录存放了组件样式文件和目录,其他样式文件放在差别的目录中。目录中的文件分类清晰,但目录结构相对于大多数实际项目而言过于简朴(只有样式文件)。我们再来看一个更切合大多数情况的开源项目 ant-design 4.2,该项目接纳 Less 预处置惩罚器,主要源码放在 /components 目录下:从目录名称上不难推测,各个组件代码通过文件夹区分,点击其中的 alert 文件夹检察也确实如此,组件相关的代码、测试代码、demo 示例、样式文件、形貌文档都在内里。至于全局样式和公共样式则在 /components/style 目录下:其中包罗 4 个目录:color/,颜色相关的变量与函数;core/,全局样式,根标签样式、字体样式等;mixins/,样式生成函数;themes/,主题相关的样式变量。

将组件代码及相关样式放在一起,开发的时候修改会很利便。但在组件目录 /comnponents 下设置 style 目录存放全局和公共样式,在逻辑上就有些说不通了,这些“样式”文件并不是一个单独的“组件”。

再看 style 目录内部结构,相对于设置单独的 color 目录来治理样式中的颜色,更推荐像 Bootstrap 一样设立专门的目录或文件来治理变量。最厥后看看依赖 Vue.js 实现的热门 UI 库 element 2.13.1 的目录结构。项目根路径下的 packages 目录按组件划分目录来存放其源码,但和 ant-design 差别的是,组件样式文件并没有和组件代码放在一起。下图是 /packages 目录下的部门内容。

element 将样式文件统一放入了 /packages/theme-chalk 目录下,目录部门内容:其中包罗 4 个目录:common/,一些全局样式和公共变量;date-picker/,日期组件相关样式;fonts/,字体文件;mixins/,样式生成函数及相关变量。和 antd 有同样的问题,把样式当成“组件”看待,组件同级目录设立了 theme-chalk 目录存放样式文件。theme-chalk 目录下的全局样式 reset.scss 与组件样式同级,这也有些欠妥。这种为了将样式打包成模块,在独立项目中直接嵌入另一个独立项目(可以简朴明白为一个项目不要有多个 package.json 文件)并不推荐,更切合 Git 使用规范的做法,即是以子模块的方式引用进项目。

而且将组件样式和源码分散这种方式开发的时候也不利便,经常需要跨多层目录查找和修改样式。样式文件治理模式除了开源项目之外,Sass Guidelines 曾经提出过一个用来划分样式文件目录结构的 7-1 模式也很有参考意义。这种模式建议将目录结构划分为 7 个目录和 1 个文件,这 1 个文件是样式的入口文件,它会将项目所用到的所有样式都引入进来,一般命名为 main.scss。

剩下的 7 个目录及作用如下:base/,模板代码,好比默认标签样式重置;components/,组件相关样式;layout/,结构相关,包罗头部、尾部、导航栏、侧边栏等;pages/,页面相关样式;themes/,主题样式,纵然有的项目没有多个主题,也可以举行预留;abstracts/,其他样式文件生成的依赖函数及 mixin,不能直接生成 css 样式;vendors/,第三方样式文件。由于这个划分模式是专门针对使用 Sass 项目提出的,从样式文件名称看出还留有 jQuery 时代的影子,为了越发切合单页应用的项目结构,我们可以稍作优化。

main.scss 文件存在意义不大,页面样式、组件样式、结构样式都可以在页面和组件中引用,全局样式也可以在根组件中引用。而且每次添加、修改样式文件都需要在 main.scss 文件中同步,这种过分中心化的设置方式也不利便。layout 目录也可以去除,因为像 footer、header 这些结构相关的样式,放入对应的组件中来引用会更好,至于不能被组件化的“_grid”样式存在性也不大。

因为对于页面结构,既可以通过下面先容的方法来拆分玉成局样式,也可以依赖第三方 UI 库来实现。所以说这个目录可以去除。themes/ 目录也可以去除,究竟大部门前端项目是不需要设置主题的,纵然有主题也可以新建一个样式文件来治理样式变量。vendors/ 目录可以凭据需求添加。

可以赌足球的app

因为将外部样式复制到项目中的情况比力少,更多的是通过 npm 来安装引入 UI 库或者通过 webpack 插件来写入对应的 cdn 地址。所以优化后的目录结构如下所示:src/||– abstracts/| |– _variables.scss | |– _functions.scss | |– _mixins.scss | |– _placeholders.scss||– base/| |– _reset.scss | |– _typography.scss | … ||– components/| |– _buttons.scss | |– _carousel.scss | |– _cover.scss | |– _dropdown.scss | |- header/| |- header.tsx| |- header.sass| |- footer/| |- footer.tsx| |- footer.sass| … ||– pages/| |– _home.scss | |– _contact.scss | … |这只是推荐的一种目录结构,详细使用可以凭据实际情况举行调整。

好比我在项目的 src 目录下建立了模块目录,根据模块来拆分路由以及页面、组件,所以每个模块目录下都市有 pages/ 目录和 components/ 目录。如何制止样式冲突由于 CSS 的规则是全局的,任何一个样式规则,都对整个页面有效,所以如果差池选择器的命名加以管控会很容易发生冲突。手动命名最简朴有效的命名治理方式就是制定一些命名规则,好比 OOCSS、BEM、AMCSS,其中推荐比力常用的 BEM。这里简朴增补一下 BEM 相关知识,熟悉 BEM 的可以直接跳过。

BEM 是 Block、Element、Modifier 三个单词的缩写,Block 代表独立的功效组件,Element 代表功效组件的一个组成部门,Modifier 对应状态信息。从命名可以看到 Element 和 Modifier 是可选的,各个单词通过双横线(也可以用双下划线)毗连(双横线虽然能和单词的连字符举行区分,但确实有些冗余,可以思量直接用下划线取代)。

BEM 的命名方式具有语义,很容易明白,很是适用于组件样式类。工具命名通过命名规范来制止冲突的方式虽然是好的,但这种规范约束也不能绝对保证样式名的唯一性,而且也没有有效的校验工具来保证命名正确无冲突。所以,智慧的开发者想到了通过插件将原命名转化成不重复的随机命名,从基础上制止命名冲突。

可以赌足球的app

比力著名的解决方案就是 CSS Modules。下面是一段 css 样式代码:/* style.css */.className { color: green;}借助 css Modules 插件,可以将 css 以 JSON 工具的形式引用和使用。复制import styles from "./style.css";// import { className } from "./style.css";element.innerHTML = '<div class="' + styles.className + '">';编译之后的代码,样式类名被转化成了随机名称:复制<div class="_3zyde4l1yATCOkgn-DBWEL"></div><style>._3zyde4l1yATCOkgn-DBWEL { color: green;}</style>但这种命名方式带来了一个问题,那就是如果想在引用组件的同时,笼罩它的样式会变得难题,因为编译后的样式名是随机。

例如,在上面的示例代码中,如果想在另一个组件中笼罩 className 样式就很难题,而在手动命名情况下则可以直接重新界说 className 样式举行笼罩。如何高效复用样式如果你有一些项目开发履历,一定发现了某些样式会经常被重复使用,好比:display:inline-blockclear:bothposition:relative......这违背了 DRY(Don't Repeat Yourself)原则,完全可以通过设置为全局公共样式来淘汰重复界说。哪些样式规则可以设置为全局公共样式呢?首先是具有枚举值的属性,除了上面提到的,还包罗 cursor:pointer、float:left 等。

其次是那些特定数值的样式属性值,好比 margin: 0、left: 0、height: 100%。最后是设计规范所使用的属性,好比设计稿中划定的几种颜色。样式根据小粒度拆分之后命名规范也很重要,合理的命名规范可以制止公共样式重复界说,开发时利便快速引用。

前面提到的语义化命名方式 BEM 显然不太适合。首先全局样式是基于样式属性和值的,是无语义的;其次对于这种复用率很高的样式应该只管保证命名简短利便影象,所以推荐使用更简短、更利便影象的命名规则。好比我们团队所使用的就是“属性名首字母 + 横线 + 属性值首字母”的方式举行命名。

举个例子,好比对于 display:inline-block 的样式属性值,它的属性为“display”缩写为“d”,值为“inline-block”,缩写为“ib”,通过短横线毗连起来就可以命名成“d-ib”;同样,如果工程师想设置一个 float:left 的样式,也很容易想到使用“f-l”的样式名。那会不会泛起重复界说呢?这个问题很好解决,根据字母序升序界说样式类就可以了。延伸:值得关注的 CSS in JavaScript我们都知道 Web 尺度提倡结构、样式、行为分散(划分对应 HTML、CSS、JavaScript 三种语言),但 React.js 的一泛起就开始颠覆了这个原则。

先是通过 JSX 将 HTML 代码嵌入进 JavaScript 组件,然后又通过 CSS in JavaScript 的方式将 CSS 代码也嵌入进 JavaScript 组件。这种“all in JavaScript”的方式确实有悖 Web 尺度。但这种编写方式和日益盛行的组件化观点很是契合,具有“高内聚”的特性,所以未来尺度有所改变也未尝不行能。

这也正是我们需要关注 CSS in JavaScript 技术的原因。相对于使用预处置惩罚语言编写样式,CSS in JavaScript 具有两个不那么显着的优势:可以通过随机命名解决作用域问题,但命名规则和 CSS Modules 都可以解决这个问题;样式可以使用 JavaScript 语言特性,好比函数、循环,实现元素差别的样式效果可以通过新建差别样式类,修改元素样式类来实现。

我们以 styled-compoents 为例举行说明,下面是示例代码,第一段是源代码:// 源代码const Button = styled.button` background: transparent; border-radius: 3px; border: 2px solid palevioletred; color: palevioletred; margin: 0.5em 1em; padding: 0.25em 1em; ${props => props.primary && css` background: palevioletred; color: white; `}`;const Container = styled.div` text-align: center;`render( <Container> <Button>Normal Button</Button> <Button primary>Primary Button</Button> </Container>);第二段是编译后生成的:复制<!--HTML 代码--><div class="sc-fzXfNJ ciXJHl"> <button class="sc-fzXfNl hvaMnE">Normal Button</button> <button class="sc-fzXfNl kiyAbM">Primary Button</button></div>/*CSS 代码*/.ciXJHl{ text-align: center;}.hvaMnE{ color: palevioletred; background: transparent; border-radius: 3px; border-width: 2px; border-style: solid; border-color: palevioletred; border-image: initial; margin: 0.5em 1em; padding: 0.25em 1em;}.kiyAbM{ color: white; border-radius: 3px; border-width: 2px; border-style: solid; border-color: palevioletred; border-image: initial; margin: 0.5em 1em; padding: 0.25em 1em; background: palevioletred;}对比以上两段代码很容易发现,在编译后的样式代码中有许多重复的样式规则。这并不友好,不仅增加了编写样式的庞大度和代码量,连编译后也增加了冗余代码。

styled-components 只是 CSS in JavaScript 的一种解决方案,其他解决方案另有许多,有兴趣的同学可以点击这里查阅 GitHub 上的资料学习,上面收录了现有的 CSS in JavaScript 解决方案。总结:对于样式文件的治理,推荐使用 7-1 模式简化后的目录结构,包罗 pages/、components/、abastracts/、base/ 4 个目录。对于样式命名,可以接纳 BEM 来命名组件、面向属性的方式来命名公共样式。

最后留一道思考题:说说你在项目中是如何治理样式代码的?。


本文关键词:如何,治理,你的,CSS,代码,上,一文,可以赌足球的app,我们,从

本文来源:可以赌足球的app-www.shenzhenruici.cn

上一篇:学习宝1V1语音解题:搭建移动版云端虚拟课堂

下一篇:没有了

养花知识本月排行

养花知识精选