中国首届CSS开发者大会

看了首届CSS开发者大会中各位大牛总结的PPT，还是有一些没有理解，但是先把它记下来，好在之后慢慢的去理解。
hax：贺师俊 百姓网前端工程师
什么是css框架？ (framework)

css框架是预先准备好的软件框架，旨在允许使用层叠样式表更加简单，更加符合标准的网页设计。
更多的功能框架还带有更多的功能过和附加的基于Javascript的功能，但大多数都是面上设计的，并且不显眼。

总结一下： 预先准备好的软件框架，允许更简单，更符合标准的网页设计，当然基于javascript的功能，面向设计和不显眼。

包括：  重置样式表格， 网格，特别是响应式网页设计，web排版
在sprites或iconfonts中的图标集
造型为工具提示，按钮，表单元素
部分图形用户界面，如手风琴，标签，幻灯片或则Modal

比如 bootstrap例子

<div class="container">
    <h1>Search</h1>
    <label>Example for a simple search form.</label>
    <!-- Search form with input field and button -->
    <form class="well form-search">
        <input type="text" class="input-medium search-query">
        <button type="submit" class="btn btn-primary">Search</button>
    </form>
    <h2>Results</h2>
    <!-- Table with alternating cell background color and outer frame -->
    <table class="table table-striped table-bordered">
        ...
    </table>
</div>

OOCSS
Object Oriented CSS / 面向对象的CSS
理解oocss第一篇文章
理解oocss第二篇文章
理解oocss第三篇文章

OOCSS原则：
分离结构和皮肤；分离容器和内容；

案例：
传统写法

#button {
    width: 200px;
    height: 50px;
    padding: 10px;
    border: solid 1px #ccc;
    background: linear-gradient(#ccc, #222);
    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
    }
#box {
    width: 400px;
    overflow: hidden;
    border: solid 1px #ccc;
    background: linear-gradient(#ccc, #222);
    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
    }
#widget {
    width: 500px;
    min-height: 200px;
    overflow: auto;
    border: solid 1px #ccc;
    background: linear-gradient(#ccc, #222);
}

OOCSS写法

.button {
    width: 200px;
    height: 50px;
}
.box {
    width: 400px;
    overflow: hidden;
}
.widget {
    width: 500px;
    min-height: 200px;
    erflow: auto;
}
.skin {
    border: solid 1px #ccc;
    background: linear-gradient(#ccc, #222);
    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

SCSS
SCSS介绍
SCSS文章

分类CSS规则：
基地（仅限元素选择器）
布局（ID选择器+布局类）
模块（仅类选择器+后代选择器）
状态（类选择器）
主题（覆盖下面的规则）

最小化深度结构案例：

body.article > #main > #content > #intro > p > b {}
=> 
.article #intro b{}

好的写法
1 增加语义并减少对特定HTML的依赖

<nav class="l-inline">
    <h1>Primary Navigation</h1>
    <ul>
        <li>About Us
            <ul class="l-stacked">
                <li>Team</li>
                <li>Location</li>
            </ul>
        </li>
    </ul>
</nav>

.l-inline li { 
    display: inline-block;
}
.l-stacked li {
    display: block;
}

2 从CSS中解耦HTML

.box, .box h2, .box ul, .box p{} =>
.box, .box .hd, .box .bd {}=>
.box, .box-hd, .box-bd{}

ACSS
Atomic CSS / 原子CSS
理解ACSS
理解ACSS文章
写法如下：

.mt-20 {
    margin-top: 20px;
}
.fl {
    float: left;
}

简单说说ACSS起源：

传统需求写法：

<div class="media">
    <a href="http://twitter.com/thierrykoblentz" class="img">
        <img src="thierry.jpg" alt="me" width="40" />
    </a>
    <div class="bd">
        @thierrykoblentz 14 minutes ago
    </div>
</div>

.media .img {
    float: left;
    margin-right: 10px;
}

新的需求： 在另一侧显示图像

 <a href="http://twitter.com/thierrykoblentz" class="imgExt">

 .media .imgExt {
     float: right;
     margin-left: 10px;
 }

又一个新的需求： 当该魔窟啊位于页面的右侧栏内时，使文本变小

.media {
    margin: 10px;
}
.media,
.bd {
    overflow: hidden;
    _overflow: visible;
    zoom: 1;
}
.media .img {
    float: left;
    margin-right: 10px;
}
.media .img img {
    display: block;
}
.media .imgExt {
    float: right;
    margin-left: 10px;
}
#rightRail .bd {
    font-size: smaller;
}

ACSS写法：

 <div class="Bfc M-10">
     <a href="http://twitter.com/thierrykoblentz" class="Fl-start Mend-10">
         <img src="thierry.jpg" alt="me" width="40" />
     </a>
     <div class="Bfc Fz-s">
         @thierrykoblentz 14 minutes ago
     </div>
 </div>

.Bfc {
    overflow: hidden;
    zoom: 1;
}
.M-10 {
    margin: 10px;
}
.Fl-start {
    float: left;
}
.Mend-10 {
    margin-right: 10px;
}
.Fz-s {
    font-size: smaller;
}

这样写法的好处： 好名字容易理解，比较好维护，好的移植性。

这里附上贺老的PPT地址
贺师俊在中国首届CSS大会分享的PPT

yyx 尤雨溪 vue框架的作者
主题： 浅谈CSS与web界面动效开发模式
高手的分析就是非常高深，这篇ppt实在很多理解不了，慢慢啃一啃。
界面动效正变得越来越重要，尤其在移动端。
web app提升用户体验和挑战原生应用的必经之路
如何提升界面动效开发者的开发体验？

        API设计 ： 命令式 ＶＳ　声明式

命令式：
jQuery.animate
Velocity.js
GSAP(GreenSocks)

// 显示调用动画函数来触发效果
$('#clickme').click(function() {
    $('#book').animate({
        opacity:0.25,
        left: '+=50',
        height: 'toggle'
    }, 5000, function() {
        // Animate complete
    })
})

声明式：
CSS transition
CSS animation
gnAnimate
Vue.jstransitions

// 声明式地定义各个“状态下”的CSS规则通过状态的变化(切换CSS class)来触发动画效果
*{transition: all .5s ease}

// 状态一
#app {
    opacity: 0;
}
#app h1 {
    transform: translate(0, 30px);
}

// 状态二 
#app.show {
    opacity: 1;
}
#app.show {
    transform: translate(0, 0);
}

// 基于CSS预处理器可以让声明式的样式更容易维护
 // 状态1
#app {
    opacity: 1;
    h1 {
        transform: translate(0, 0);
    }
}

// 状态2
#app.show{
    opacity:0;
    h1 {
        transform: translate(0. 30px);
    }
}

// Angular / vue.js 通过数据绑定直接将CSS class与应用状态挂钩
<div
    class = "tooltip"
    v-if="showToolTip"
    v-transition="fade">                
</div>

.fade-enter {
    opacity : 0;
}
.fade-leave {
    opacity: 0;
}

app.showToolTip = true;

命令式：
动画状态和应用状态混杂在一起。
逻辑复杂后不易维护，容易导致bug

---

声明式：
将应用状态和动画状态分离，易于维护

---

理想的动效解决方案：
提供声明式的API
可以组构： 顺序、并发、时间轴
支持状态切换，也支持增量动画
支持缓动曲线，也支持物理模拟

一些新的动效方案
Famo.us Famo.us
彻底绕过浏览器的CSS布局，全部依赖CSS transform自己
实现一套布局系统，从而避免reflow的问题
类似游戏的渲染机制

强大的欢动和物理模拟系统

混合了命令式和声明式的API

附上yyx的PPT地址
yyx在中国首届CSS大会分享的PPT