中国首届CSS开发者大会

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

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

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

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

比如 bootstrap例子

<div class="container">
    <h1>Searchh1>
    <label>Example for a simple search form.label>
    
    <form class="well form-search">
        <input type="text" class="input-medium search-query">
        <button type="submit" class="btn btn-primary">Searchbutton>
    form>
    <h2>Resultsh2>
    
    <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 Navigationh1>
    <ul>
        <li>About Us
            <ul class="l-stacked">
                <li>Teamli>
                <li>Locationli>
            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;
}

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

 "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