CSS 结构

编写易于阅读且每个人都能理解的 CSS

编写易于阅读且每个人都能理解的 CSS

开发人员在编写 CSS 时遇到的难题之一是，所需的属性可能位于类选择器中的任何一行。为了解决这个问题，我构思了一种结构来组织样式，以便您知道在哪里编写和搜索所需的属性。

我编写 CSS 代码的方式让人们认为我有某种强迫症，但事实是我有阅读障碍，所以审查代码或在类选择器中寻找某些 CSS 属性是一个巨大的挑战，所以在我职业生涯的开始阶段，我“创建”了一个有组织的结构来编写 CSS，这改变了整个体验。

该结构包括将类选择器的属性拆分成块，这样您就可以直接转到相应的块来知道在哪里查找属性。

结构

• 定位块
• 结构块
• 排版块
• 修改器块

定位块

改变页面上元素绝对定位的属性，如位置、顶部、右侧、底部、左侧。 \

结构块

修改元素的结构、形状、大小和细节的属性，如显示、弹性和网格属性、边距、填充、背景、边框...

排版块

所有内容都与一般的字体、文本和字体属性有关，例如字体、文本对齐、颜色、文本装饰、文本变换...

修改器块

CSS 属性会以任何方式改变元素或添加一些细节，导致无法放入其他块中。就我而言，我通常会添加transition、transform、box-shadow、cursor、animation等属性……