首页 > 代码库 > CSS程序思想

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

CSS程序思想