cs0116命名空间不能直接包含字段或⽅法之类的成员_css常
见样式命名规则
前⾔
也许你曾经看到过很多样式命名规则，也参考了我们制定的命名规范，但是⼤部分的具体样式还是不知道如何命名，主要思想或者标准是什么，也就是前⾯.m-panel-后⾯的应该如何命名，⼦模块与⽗模块依赖关系怎么体现，等等类似的问题。如何友好科学的解决问题，能够与最⼤程度的降低我们后期对样式的维护难度。
本⽂将带你了解⽬前前端基本的命名规则，各⾃的优劣，然后我们会给出具体的⽅案。
⼀ 指定的格式cssclass属性
驼峰式命名
类似于.mLayerTitle这样形式的，但这个仅仅是格式，不代表命名规则，和应该如何去思考⽤什么名称。
以-格式分割开
类似于.m-layer-title ，这种格式也是很常见的。同样也是只有格式，没有命名⽅式的核⼼思想的。
⼆ 样式组织思想
BEM(block+element+modify)
块级，元素，修改，它的主要设计思路是需要定义块级，对于⼦元素分别利⽤_区分，对于修饰的部分增加--实现。对于⽐较复杂的块级元素⽤-实现连接。举证如下：
site-navsite-nav_logosite-nav_loginsite-nav--activesite-nav--active
OOCSS
1. OOCSS是object-oriented CSS的缩写. 主要有两个意思:
2. 结构和设计分离
3. 容器和内容分离
4. 使⽤这种结构, 开发⼈员获得可以在不同地⽅使⽤的CSS类.
5. 通常这时候总是会有两个消息(⼀个好消息和⼀个不好的消息):
6. 好消息: 通过复⽤来减少代码量(DRY原则)
7. 不好的消息: 维护⾮常困难(复杂). 当你修改某⼀个具体的元素的样式的时候, ⼤部分情况下, 除了修改CSS本⾝(因为多数的CSS类是通
⽤的), 你还不得不添加更多的标记类(markup).
8. 另外, OOCSS本⾝并不提供具体的规则, ⽽是抽象的建议, 所以这种⽅法在⽣产中的最终结果会有所不同.
9. 事实上, OOCSS的想法启发了其他⼈创建⾃⼰的, 更具体的代码结构化⽅式.
10. 具体的延伸就是我们将全局样式，布局、间距、模块样式区分开来，并辅以科学准确约定的⽅式。
SMACSS 可扩展和模块化结构的 CSS
SMACSS是可扩展和模块化结构CSS的简称. 该⽅法的主要⽬标是减少代码量并简化代码维护.
Jonathan Snook把它归纳为5个部分:
1. 基本规则(Base rules): 为⽹址的主要元素设置样式, 如body, input, button, ul, ol等. 在这⼀步中, 我们主要使⽤HTML标签和属性选
择器, 在特殊情况下, 使⽤CSS类(如: 如果您有JavaScript-Style选择);
2. 布局规则(Layout rules): 主要是些全局元素, 顶部, 页脚, 边栏等模块的⼤⼩. Jonathan建议使⽤ID选择器, 因为这些模块不太可能在同
⼀个页⾯上出现多次. 然⽽, 本⽂作者认为这是个很不好的习惯(每当ID出现在样式⽂中, 感觉世界顿时变得灰暗, 有⼀股莫名的哀伤). 3. 模块规则(Modules rules): 模块(类似于卡⽚布局)可以在⼀个页⾯中使⽤多次. 对于模块CSS类, 不建议使⽤ID和tag选择器(这是为了
⽅便重⽤以及上下⽂独⽴).
4. 状态规则(State rules): 在这⼀步中, 规定了模块的各种状态以及⽹站的基础部分. 这是唯⼀允许使⽤"!important"的地⽅.
5. 主题规则(Theme rules): 设计您可能需要更换的样式.
6. 我们推荐为属于某个组的CSS类定义命名空间, 并为JavaScript中使⽤的CSS类使⽤单独的命名空间.
Atomic CSS 原⼦ CSS
Atomic CSS是CSS架构的⼀种⽅法, 它的好处是写出基于视觉功能的⼩的, 单⽤途CSS类.这种类通常也被称为原⼦类。
使⽤Atomic CSS, 为每个可重⽤的属性创建单独的CSS类. 例如, margin-top: 1px; 就可以创建⼀个类似于mt-1的CSS类, 或者width: 200px; 对应的CSS类为w-200.这样设计可以最⼤程度的统⼀页⾯的共⽤样式，便于管理，尤其在你采⽤了预处理器之后，可以使⽤继承，拓展等⽅式快速使⽤某常⽤代码段或者样式模块，最⼤程度的减少css代码数量。
存在的缺点:
CSS类名是属性名称的描述, ⽽不是元素的⾃然语义. 这种想象很容易使⼈在开发过程中变得迷茫. 开发本⾝也⼗分容易复杂化.
直接在HTML中进⾏显⽰设置.
由于这些短板的存在, 这种做法遭到了⼤量的批评. 然⽽, 这种做法对于⼤型项⽬来说是有⼀定效果的.
此外, Atomic CSS在各种框架中被⽤于校正元素样式以及某些层(layers)的其他⽅法.
MCSS 多层 CSS
MCSS指的是多层CSS(Multilayer CSS). 这种样式写法建议将样式分成多个部分, 每个部分称为层(layers).
第0层或基础(Zero layer or foundation), 负责重置浏览器样式的代码(如: reset.css或者normalize.css);
基层(Base layer), 包括可重⽤元素的样式: buttons, input, hints等等.
项⽬层(Project layer), 包括单独的模块和"上下⽂" - 根据⽤户端浏览器或⽤于浏览的设备, ⽤户权限等对元素的样式进⾏调整.
装饰层(Cosmetic layer), 使⽤OOCSS风格来书写样式, 对元素外观做微⼩的调整. 建议仅留下影响外观的风格, ⽽不能破坏⽹站的布局(例如颜⾊和⾮关键缩进等).
层与层之间的交互层次是⾮常重要的:
在基层(Base layer)中定义中性的样式, 并且不影响其它层.
基层(Base layer)中的元素只能影响基层的CSS类.
项⽬层(Project layer)中的元素可以影响基层和项⽬层.
装饰层(Cosmetic layer)是以描述性OOCSS类("atomic"类)的形式进⾏设计, 不会影响其他CSS代码, ⽽是在标记中有选择的使⽤.
AMCSS 属性模块 CSS
AMCSS是"属性模块CSS"的缩写.
先让我们来看⼀个例⼦:
Button
如果这样写CSS类的链, 是有点复杂的, 所以让我们通过属性来为这些CSS类分组. 分组后就变成下⾯这样了:
Button
为了避免属性名称冲突, 好的⽅式是为属性加上命名空间. 然后, 我们的button代码就变成这样了:
Button
如果您使⽤了验证器去检查你的代码, 并且它(验证器)不喜欢类似于am-button这样的属性名称, 你可以把属性的命名空间(am-)换成data-.
例如: data-button.
使⽤⼀个不是那么常⽤的选择器"~="(IE7以上都⽀持), 它类似于CSS类属性: 所有属性值包含指定的单
词(以空格分开)的元素都会被选中. 所
以, 选择器[class ~= "link"][class~= "button"]相对于选择器a.link.button. 这种选择器(选择⽅式)同样适⽤于属性.
因此, CSS代码就可以这样写:
/* CSS类选择器 */.button { ... }.button--large { ... }.button--blue { ... }/* CSS属性选择器 */[am-button] { ... }[am-button ~= "large"] { ... }[am-button ~= "blue"] { ... }如果您认为这段代码⼗分的不寻常, 可以尝试使⽤较为温和的AMCSS 形式:
Button
FUN
FUN代表的是"Flat hierarchy of selectors, Utility styles, Name-spaced components."
每个名称前⾯的字母都代表着⼀定的原则:
F, 选择器的扁平的层次结构: 建议使⽤CSS类选择元素(items), 避免不必要的级联, 杜绝使⽤id.
U, 实⽤(功能)样式: ⿎励创建原⼦(atomic)样式来解决典型的修正(微调)任务, 例如: w100表⽰width: 100%; 或者fr表⽰float: right;
N, 名称分割组件: Ben建议添加命名空间来指定特定模块元素的样式. 这种⽅法将避免类的中重叠.
⼀些开发⼈员注意到, 使⽤这种原则来编写CSS代码是⾮常⽅便和容易维护的; 在某种程度上, 作者汲取了SMACSS的精华, 以简单并且简洁的⽅式阐述了这⼀技术.
这种⽅式对项⽬和代码结构施加了很多的要求, 它仅仅建⽴了记录选择器的⾸选形式以及它们在标记中的使⽤⽅式. 但在⼩型项⽬中, 这些规则⾜以帮助构建⾼质量的CSS代码.
结论
这些样式的的设计思想中没有完全符合实际需求的，项⽬实践中建议根据⾃⼰的业务以及成员需求，选择合适的样式明明规则，可以是上⾯⼀种，也可以是其中⼏种混合的结果，最终⽬的都是让你的样式便于维护⽽已。
这⾥，个⼈建议的是⽤SMAC+Atomic，并且综合归结到了基本的css代码规范中。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。