css常见样式命名规则 _css

前言

也许你曾经看到过很多样式命名规则，也参考了我们制定的命名规范，但是大部分的具体样式还是不知道如何命名，主要思想或者标准是什么，也就是前面.m-panel-后面的应该如何命名，子模块与父模块依赖关系怎么体现，等等类似的问题。如何友好科学的解决问题，能够与最大程度的降低我们后期对样式的维护难度。
本文将带你了解目前前端基本的命名规则，各自的优劣，然后我们会给出具体的方案。

一指定的格式
驼峰式命名
类似于.mLayerTitle这样形式的，但这个仅仅是格式，不代表命名规则，和应该如何去思考用什么名称。
以-格式分割开
类似于.m-layer-title ,这种格式也是很常见的。同样也是只有格式，没有命名方式的核心思想的。
二样式组织思想
BEM（block+element+modify）
块级，元素，修改，它的主要设计思路是需要定义块级，对于子元素分别利用_区分，对于修饰的部分增加--实现。对于比较复杂的块级元素用-实现连接。举证如下：
site-navsite-nav_logosite-nav_loginsite-nav--activesite-nav--activeOOcss

文章插图

OOCSS是object-oriented CSS的缩写. 主要有两个意思:
结构和设计分离
容器和内容分离
使用这种结构, 开发人员获得可以在不同地方使用的CSS类.
通常这时候总是会有两个消息(一个好消息和一个不好的消息):
好消息: 通过复用来减少代码量(DRY原则)
不好的消息: 维护非常困难(复杂). 当你修改某一个具体的元素的样式的时候, 大部分情况下, 除了修改CSS本身(因为多数的CSS类是通用的), 你还不得不添加更多的标记类(markup).
另外, OOCSS本身并不提供具体的规则, 而是抽象的建议, 所以这种方法在生产中的最终结果会有所不同.
事实上, OOCSS的想法启发了其他人创建自己的, 更具体的代码结构化方式.
具体的延伸就是我们将全局样式，布局、间距、模块样式区分开来，并辅以科学准确约定的方式。

SmacSS 可扩展和模块化结构的 CSS

文章插图

SMACSS是可扩展和模块化结构CSS的简称. 该方法的主要目标是减少代码量并简化代码维护.
Jonathan Snook把它归纳为5个部分:

基本规则(Base rules): 为网址的主要元素设置样式, 如body, input, button, ul, ol等. 在这一步中, 我们主要使用html标签和属性选择器, 在特殊情况下, 使用CSS类(如: 如果您有JAVAScript-Style选择);
布局规则(Layout rules): 主要是些全局元素, 顶部, 页脚, 边栏等模块的大小. Jonathan建议使用ID选择器, 因为这些模块不太可能在同一个页面上出现多次. 然而, 本文作者认为这是个很不好的习惯(每当ID出现在样式文中, 感觉世界顿时变得灰暗, 有一股莫名的哀伤).
模块规则(Modules rules): 模块(类似于卡片布局)可以在一个页面中使用多次. 对于模块CSS类, 不建议使用ID和tag选择器(这是为了方便重用以及上下文独立).
状态规则(State rules): 在这一步中, 规定了模块的各种状态以及网站的基础部分. 这是唯一允许使用"!important"的地方.
主题规则(Theme rules): 设计您可能需要更换的样式.
我们推荐为属于某个组的CSS类定义命名空间, 并为JavaScript中使用的CSS类使用单独的命名空间.

Atomic CSS 原子 CSS