MCSS

Go to navigation

简介

多层 CSS 组织方法是你构造 CSS 的指导手册.

核心方法的原则基于BEM和OOCSS的想法.MCSS 是由Odnoklassniki.ru(全球十大顶级社交网络)的开发团队发明的,并且推荐其他开发者作为自己和团队的基本方法.

无论是一个超过60个开发者参与的有很多内部服务的大型项目,还是中小型的项目.它都能胜任,它的可扩展性给了开发者选择规则的严格程度.

文档还在持续改进,和一些从属工具一起,比如前端文档引擎Source. 原始的文档是用俄语写的,不是所有的内容都被翻译了,但是即将来临的更新会翻译所有的内容并且主要项目语言会变成英文.

有问题就在Github 的 Issues 或者下面的评论框留言, 不要犹豫.

主要原则

MCSS 的理论是非常灵活的并且不需要强制使用特定的编码风格, 文件系统组织或者特定的工具才能工作.最主要的就是分割规则到不同的块. CSS 模块(和其中的组建) 被分割成不同的层, 每个层都有自己的规则去利用和交互别的层.

样式存放规则

所有的特定模块的样式必须被放在独立的部分或者不同的 css 文件中:

/* Module name
-------------------------------------------------- */
.module { }

.module_list { }
  .module_list.__modifier { }
/* /Module name */

层叠的修饰选择器也要被放在靠近父级选择器的地方:

/* Module name
-------------------------------------------------- */
.module { }

.module_list { }
    .module_list .other-module { }
/* /Module name */

唯一的例外是 上下文层

/* Module name
-------------------------------------------------- */
.module { }

.module_list { }
    .touch .module_list { }
    .ie9 .module_list { }
/* /Module name */

这部分文档会被一到单独的文档模块并且被更精确的描述(俄文版的已经有了)

第0层或地基

地基包含了重置和无关紧要的可变的样式,描述了主要的基本布局并且应用与所有页面.

基础样式就像所有的重置一样,都在最顶端的单独文件或者 common CSS 文件头部:

模块交互结构

样式链接顺序

每一个层的样式必须被页面以正确的顺序被链接来保持在不同的模块/层的选择器中的正确的关系:

0_layer_foundation
	reset.css

1_layer_base
	base_modules.css

2_layer_project
	project_modules.css

cosmetic.css

第1层 - 基础

第一层 - 是一个网站框架, 界面的核心部分.它是基于可重用的和抽象的构造之上的.

表单
按钮
导航块
其它

基础层样式必须尽量和设计师的样式指导相整合.因为第一层的模块意味着要贯穿整个网站的界面,它们必须在不修改的情况下和其他界面显得和谐.

开始在你的项目中使用 MCSS, 第一件事你应该做的 - 是创建一系列可复用的标准.

你可以很容易的使用流行的框架比如Bootstrap, 960gs, inuit.css 或其它框架来作为第一层的一部分.

规则

第一层基础规则 - 所有的存在都应该是抽象的,包括它们的名字和标记容器.

类名不应该在界面的任何地方看上去”不协调”.
模块应该有默认的样式,但是也可以根据不同的项目模块和任务被容易的修改.

第一层的样式可以被同一层的其他模块或者第二层层叠修改.因为一个规则:相关的样式只出现在一个地方.

基础样式应该从第二层模块中分割出来并且保持项目层样式的独立性

标准表单:

.input-field { }
    .input-field_text { }

标准表单和标准按钮交互 - 从第一层层叠样式:

.input-field { }
    .input-field .button { }

项目模块和和标准交互在第二层:

.project-module { }
    .project-module .input-field { }

第二层从第一层修改是被禁止的! 在这个例子中, 不同的层混合了, 造成了混乱:

    .input-field .project-module { }

基础样式是正确的被链接的在地址之后,优先于第二层,来支持底层的选择器权重优先.

优势

重用性和受到好评的第一层模块允许节省时间在支持流行结构,减少维护多个相似的模块.

重用性也会影响 css 文件的最终尺寸和页面加载时间.

有了完善的基础允许容易创建界面,大多数标准元素的组合.

标准的设计例子可以在项目之间重用,促进了布局和后端的开发者的沟通.

第2层 - 项目

第二层包含单独的,项目模块,增进页面结构:

注册表单
登录块
购物车
其它

规则

建议使用尽可能多的唯一的 css 类在第二层;即使当前的设计不需要样式,更好的实践是分配唯一的 css 类.这样的方法使得每个分开的层块能被更好的访问到,允许更容易的纠正样式,而不影响 html 结构

每个模块应该尽量的独立 - 独立于界面组建, 组建只和基础层交互.

使用第一层的结构在项目模块里, 我们需要分配另一个 css 类在 html 里:

<header class="toolbar">
    <a href="/" class="toolbar_logo"></a>
    <menu class="toolbar_dropdown_ul umenu">
        <li class="umenu_li"></li>
        <li class="umenu_li"></li>
    </menu>
</header>

下面的例子是第二层的模块.toolbar,它使用第一层的标准.umenu.来修改项目需要的标准, CSS 层叠样式被使用:

/* Toolbar
-------------------------------------------------- */
.toolbar { }

.toolbar_dropdown_ul { }
    .toolbar_dropdown_ul .umenu_li { }
/* /Toolbar */

项目层样式只能被其他项目层的模块层叠修改

这是对的:

.project-module .other-project-module { }

这是错的:

.base-module .project-module { }

###优势模块的分离使得修改它们的样式更容易,不必冒着影响其他界面部分的风险.当团队合作时,每个小组成员可以开发单独的分隔的层, 不会和其他开发者冲突.

每个模块的样式可以只被应用于他们需要的页面.

当网站的功能不需要时,很容易放弃不必要的样式 - 所需要做的就是扔掉一个模块和相应的样式.

第三层 - 门面层

第三层由简单轻微的影响样式组成:

超链接颜色
低层次的OOCSS - 两个属性的CSS类 (.font-size_XL, .margin-t_L)
全局修饰

这一层在一些情形中可以不存在, 但是在大型项目中, 这一层允许解决重复的样式问题并且在罕见的没有项目层的情况下,更加’DRY’

规则

第三层样式应该被组织成保持层安全,当被丢弃时.损失应该是最小的,比如颜色内边距等等.

允许使用一些简单的OOCSS 类,在没有项目层的情况下:

<div class="font-size_XL margin-t_L color_red"></div>

装饰层样式不能被其他层的层叠样式修改,除了上下文选择器

装饰层样式被放在 CSS 的尾部.不推荐使用 !important

优势

样式对网站布局没有大的影响,帮助处理重复代码的问题并且减少生产小项目和基础模块的生产.

简单选择器允许快速处理少数情况, 当我们需要应用一些属性到没有项目模块时.

上下文

这层包含了高层的上下文和媒体规则,用来改变未来的不同上下文的标准样式:

.ie8, .ie9 - 浏览器
.触摸
.已登录
媒体查询

上下文层在样式位置上是个例外 这一层的样式分布在所有的层中,可以根据上下文层叠修饰:

/* Module name
-------------------------------------------------- */
.module { }

.module_list { }
    .touch .module_list { }
    .ie9 .module_list { }

@media screen and (max-width: 1000px) {
    .module { }
    }
/* /Module name */

现实中的例子

你可以在这里检出 MCSS 实战demo.在下面的例子中,所有的层都被储存在一个CSS 文件, 但是它们可以被分割在单独的文件(块)中:

在第二个demo, 你会看到 MCSS 如何和 Bootstrap 一起工作, 作为第一层(基础)层.

本站也是基于 MCSS 理论来设计的, 快看看源码.

Here you can find more complex example of MCSS methodology usage with video recording of development process.

缩写字典

为了避免大型的 CSS 选择器名字, 我们建议使用缩写字典:

a - link (<a> tag)
ac - action
add - additional
aft - after
aux - auxillary

b - body | bottom
bg - background
brd - border
btn - button

cat - catalog | category
cl - clear
cnt - content | container
cnts - contents
col - column

dec - decorate
def - default
del - delete
descr - description
dm - delim
dyn - dynamic

e - error
el - element
ext - external

f - footer
fr - friend
ft - font

gen - general

h - header
hl - highlight
hv - hover
hld - holder

i - item
ic - icon
img - image
ir - input radio
is - input submit
it - input text
itx - textarea


l - left | label
lbl - label
lk - link
lr - layer
lst - list

mod - module | modifier

n - name
ntf - notification
num - number

opt - options
ovr - overlay

ph - placeholder
pht - photo
priv - privacy

r - right
rfr - refresh

scr - screen | scroll
sel - select
sett - settings
sm - small
spr - sprite

t - title | t
tx - text

w - wrapper

在未来, 字典会被移到单独的模块.