CSS程序思想

浏览数：41 / 时间：2015年06月09日

CSS的设计思想，比如：CSS预处理器、CSS对像（OOCSS）、SMACSS、Atomic设计和OrganicCSS等

一、CSS预处理器最重要的功能：

1.连接：通过 @import 来引入.css文件；网站很小时，仅用作引入重置文件与基本通用模块（如%btn{}的定义）

2.扩展：定义 %placeholder+@extend；阅读：http://krasimirtsonev.com/blog/article/SASS-mixins-extends-and-placeholders-differences-use-cases

3.配置：$变量：变量值；存放颜色、网格宽度等，便于后期修改

4.混合：@mixin 名称($参数:默认值,$参数2:默认值2){}，再通过 @include 名称(参数值) 使用。关键在于使用参数功能，而非具体的值；

注：不只关注所编写的 .scss 、.less 文件，还要关注生成的 .css 文件。

二、BEM：命名方式太复杂，暂不考虑；

B：block; 块级

E：element; 元素

M：modifier; 修饰

三、OOCSS（CSS对象）：

1. 以对象思维，提取网页中组件的通用样式，单独定义，后面直接引入使用，便于维护。如按钮基本样式。

2. 配合：%placeholder+@extend；

3. 使用框架限制太大，但可以吸收部分好用的，组成自己的小微框架。

四、SMACSS（可伸缩与模块化CSS体系）： http://smacss.com/ https://github.com/jonathanpath/SASS-SMACSS

1.结构：

基本(base)：用于一个简单的选择器的基本样式，如clearfix

布局(Layout):   定义网格
  模块(Module): 一群元素相结合在一起形成的一个模块，比如说header和sidebar，不定义尺寸，只定义相互关系。
状态(State):   元素的不同状态。如隐藏、按住，扩大等规则定义给对象
皮肤(Skin): 更多的样式

五、Atomic Design（原子设计概念）：不使用

六、OrganicCSS（分为了原子、分子、细胞器、更抽象）：不使用

@include 与 @extend 比较：

	调用对象	CSS编译结果	定义	调用
@include	@mixin定义的函数模块（可设置变量、参数、默认值）	css相同样式不会合并	@mixin 名称($参数:默认值,$参数2:默认值2){}	@include 名称(参数, 参数2);
@extend	.class 定义的属性模块 %placeholders 定义的属性模块	引用.class编译出的css可能不是想要的样式；引用%placeholder编译出的css相同样式会合并；	.class{} %placeholder{}	@extend .class; @extend %placeholder;

结论：

对有参数的，使用@mixin定义函数使用；使用不当，会产生很多重复代码，没有参数的，就不要使用@mixin

对仅属性的，使用%placeholder定义使用；

@mixins与%placeholders的结合:

实例：一个简单的百分比网格系统：测试可用

开始------------------------------------------------------

$columns: 12;
$gutter: 2em;

%grid {
    box-sizing: border-box;
    display: inline-block;
    padding: {
        left:$gutter / 2;
        right:$gutter / 2;
    }
}

@mixin grid($width: 1){
    @extend %grid;
    width: percentage($width);
}

@for $column from 1 through $columns {
    .grid-#{$column} {
        @include grid(1 / $column);
    }
}

结束------------------------------------------------------

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS程序思想