如何编写可维护的CSS声明
为什么CSS声明的顺序很重要? 让我们先介绍一下基础知识.
CSS声明由一个或一组选择器和一个声明块组成. 在声明块内部,有带有属性和值的声明.
这些声明的顺序乍一看似乎不重要, 但定义一个秩序确实有一些优势. 一个明显的优势是一致性,这在大型团队中尤为重要. 有些开发人员随机编写声明,有些按字母顺序编写,有些按类型分组. 分组被认为是一个很好的选择,因为首先编写与定位相关的声明是有意义的,因为可以从流中删除一些元素. 浏览器首先对其进行消化, 开发人员可以很容易地读取块,知道元素的位置. 就像Bootstrap创建者一样 Mark Otto, CSS开发人员 我发现以下的风格顺序很容易保持:
- Positioning
- Box model
- Typographic
- Visual
下面是一个一般的例子:
.{宣言
/*定位*/
位置:绝对的;
top: 0;
right: 0;
bottom: 0;
left: 0;
z - index: 100;
/* Box-model */
显示:块;
浮:正确;
宽度:100 px;
身高:100 px;
/*排版*/
font: Arial, sans-serif;
行高:1.5;
颜色:# 333;
text-align:中心;
/*视觉*/
background - color: # fff;
边框:1px实线#eee;
border - radius: 5 px;
}
对于使用CSS预处理器的开发人员,最佳实践是编写 @extend
规则至上 @include
第二个规则. 这样做的原因是你能马上意识到那些样式被插入到选择器中, 你可以很容易地在它下面覆盖它们.
贡献者
Bojan Janjanin
自由CSS开发员
Bojan是一名拥有开发技能和超过15年专业经验的高级网页设计师,涵盖了广泛的项目, tools, 和技术. Bojan专注于创建可用的、以用户为中心的web和移动解决方案. Bojan真正的亮点是通过UX的镜头制作UI设计.
Show More