提升你的CSS姿势
原文地址
Github 系列文章地址
CSS的学习是一个典型的低门槛，高瓶颈的过程，第一次接触CSS的时候觉得一切是如此简单，直到后面越学越发现自己一无所知，建议看看张鑫旭老师的说说CSS学习中的瓶颈。本文则是从四个方面来讨论如何编写可扩展、可维护的CSS代码：
使用合理的语义化命名
模块化
遵循命名规范
遵循单一职责原则
Use Proper Semantics:使用合理的语义化命名
在HTML与CSS中都存在着语义化标记的概念，Semantics即是单次的语义和其关联，在HTML中一个简单的示意如下：
语义化的HTML能够比较直接的表示出某个标记的功能，另一方面，Semantic CSS会更加地抽象与主观化。编写语义化地CSS代码意味着你选定的样式类名要能够简单明了的反映出结构与功能信息。另一方面，样式类命名的时候可以不用太过具体化，这样也方便你复用样式类。
在上述例子中，search类是一个Block，而Search Button则是它的一个子元素，如果你希望修改按钮的状态，那么应该添加一个类似于active的Modifier。另外你需要记住的是，未来你工作的代码库里很有可能会出现多个命名规范，你也要学会兼容并包，能够接受学习其他的一些标准。如果你希望对于BEM进行深入了解，那么可以阅读以下文章：1. Getting your head ’round BEM syntax1. BEM 1011. Intro to BEM1. OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?# 遵循单一职责原则SRP原则即只每个模块或者类只应承担软件系统中的某个单一功能，并且该职责应该完整地封装在类的内部，即对外屏蔽内部实现。而具体到CSS的领域里，SRP意味着某个代码片、类或者模块只应该做一件事。而在CSS的文件组织上，意味着像Carousels、Navigation Bar这样的组件应该有自己独立的CSS文件。/components
|- carousel
|- |- carousel.css
|- |- carousel.partial.html
|- |- carousel.js
|- nav
|- |- nav.css
|- |- nav.partial.html
|- |- nav.js
另一个常见的文件组织方式就是按照功能进行文件组织，举例而言，在上述的代码片中，所有关于Carousel的文件都应该被放到同一个文件夹中。通过这种方式可以将文件索引变得更加容易。同样地，对于常见的全局样式而言，也需要适用于独立地全局样式：/base
|- application.css
|- typography.css
|- colors.css
|- grid.css
在上述例子里，不同类型的全局样式需要分割到不同的文件中，这样的话如果你需要去更改你的颜色等等样式，那就很容易找到修改哪个文件。无论哪种文件组织方式比较顺眼，你都应该遵循统一的SRP原则。如果某个文件变得冗余臃肿，你应该考虑根据逻辑或者其他东西对内容进行切分。关于文件组织结构与CSS结构方面地深入阅读：1. Aesthetic Sass 1: Architecture and Style Organization1. Scalable and Maintainable CSS Architecture.对于每个独立的CSS类而言，都应该只包含一个功能。换言之，应该根据关注点的差异将样式切分到不同的类中，这里有个小例子：.splash {
background: # f2f2f2;
color: # fffff;
margin: 20px;
padding: 30px;
border-radius: 4px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
在上面这个例子里，我们搞错了某些关注点，splash类不仅包含了其自己的展示的样式与逻辑，还定义了部分关于其子元素的样式，因此需要切分到两个单独类中：.splash {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.splash__content {
background: # f2f2f2;
color: # fffff;
padding: 30px;
border-radius: 4px;
}
深入阅读：1. The single responsibility principle applied to CSS1. Single Responsibility.#css、bem、命名、样式#版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
