CSS程序思想

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);
    }
}

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