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

CSS程序思想

2024-08-07 10:18:37   223人阅读

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程序思想


联系
我们