SMACSS

官网:https://haomo-tech.com

作者:胡小根

邮箱:hxg@haomo-studio.com

1 概述

css方法论中,有三个著名的方法论:

1.1 OOCSS

其主要的两个原则是:

  • Separate structure and skin(分离结构和主题)
  • Separate container and content(分离容器和内容)

1.2 SMACSS

其主要原则有3条:

  • Categorizing CSS Rules(为css分类)
  • Naming Rules(命名规则)
  • Minimizing the Depth of Applicability(最小化适配深度)

2 分类

2.1 Base-基础

示例:

body, form {
    margin: 0;
    padding: 0; 
}
a{
    color: #039;
}
a:hover {
    color: #03F;
}
  • 不应该包含类和id
  • 不应该使用!important
  • 尽量采用CSS Reset框架,推荐使用Normalize.css. Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上

2.2 Layout-布局

示例:

#header, #article, #footer {
    width: 960px;
    margin: auto;
}
#article {
    border: solid #CCC;
    border-width: 1px 0 0;
}

2.3 Module-模块

示例:

.module .title {
    padding: 5px;
}
.module .article {
    padding: 5px;
}
  • 避免使用元素选择器(例如.module span),因为更为复杂的结构,会导致元素选择器产生严重的影响

  • 当相同的元素,在页面的其他地方偶然出现时,或者对某类元素有不同种表现时,应该采用子类,例如:bootstrap的btn-primary, btn-info

2.4 State-状态响应规则

示例:

.is-hidden
.is-collapsed

/* default state for nav items */
.nav > li {
   float: left;
}
/* alternate state for nav items on small screens */
@media screen and (max-width: 400px) {
    .nav > li { float: none; }
}
  • 要注意:state和subclass module有些类似。区别在于:subclass module从页面载入时就应该是渲染完毕的,而state是在交互之后切换渲染样式的;state的实现,通常需要javascript辅助才行
  • 有三类状态相应:js、伪类、媒体查询
  • 状态规则通常是独立的,并且应用到单个class选择器上
  • 非到万不得已,不要使用!important. 只有极其复杂的系统,才会使用它。(就好比程序员使用一大堆全局变量一样)
  • state规则的命名,通常应该涵盖模块的名字,例如:.is-tab-active, .is-menu-collapsed
  • 当使用动画时,坚持的原则是:用css来描述状态,用js来控制行为。

2.5 Theme-主题

示例:

/* in module-name.css */
.mod {
    border: 1px solid;
}
/* in theme.css */
.mod {
    border-color: blue;
}
  • 主题涵盖的字体大小,通常在3-6种。超过6种字体大小的,就不用考虑了,会让网站很难维护。越少越好。

3 技巧

3.1 如何解决100%父宽度,减去固定宽度的布局?

解决方案:https://stackoverflow.com/questions/651317/div-width-100-minus-fixed-amount-of-pixels

3.2 如何在浮动宽度内,均匀分布固定大小的模块?

解决方案:

参考

results matching ""

    No results matching ""