CSS 技术技巧_提高你CSS技术的法则

1.不要让你的代码脱离你的掌控，尽量简洁

1. 我怎样实现？
2. 有其他方法实现么？
3. 怎样优化（简洁，可维护，等等）？

1. 列表元素浮动；
2. 改变列表元素display属性为inline；
3. 改变列表元素display属性为inline-block。

2. 掌握基础，学习CSS技巧

2. .child {
3. position: absolute;
4. top: 0;
5. left: 0;
6. }
8. /* 这是忘了的*/
9. /*
10. .parent {
11. position: relative; // Or anything else than static
12. }
13. */

2. .parent {
3. z-index: 1;
4. opacity: 0.5;
5. transform: rotate(5deg);
6. }
8. .child {
9. z-index: -1;
10. }

3. 保持代码的可复用性

2. .navigation li {
3. color: #333;
4. }
6. .navigation li a {
7. color: #333;
8. }
10. /* Refactoring */
12. .navigation li,
13. .navigation li a {
14. color: #333;
15. }

4. 面向对象的css

2. #my-button,
3. .my-box
4. .my-box img {
5. border: 1px solid #444;
6. border-radius: 5px;
7. box-shadow: 0 0 5px rgba(0,0,0,0.1);
8. }

2. .skin {
3. border: 1px solid #444;
4. border-radius: 5px;
5. box-shadow: 0 0 5px rgba(0,0,0,0.1);
6. }

2. #main h2 {
3. color: #343434;
4. font-size: 25px;
5. line-height: 20px;
6. border-bottom: 1px solid rgba(0,0,0,0.2);
7. box-shadow: 0 1px rgba(255,255,255,0.4);
8. }

1. /* CSS */
2. #header a { color: #f90; }
3. .tweet a { color: #000; }

5. Css3：了解他能做的以及你可以使用的部分

1. 圆角，一行代码代替了用四张小图片拼四个圆角；
2. 透明度与alpha通道的支持： 一行代码代替了一张半透明png；
3. 更先进的选择器：不需要js来写了；
4. Flexbox：几行代码代替了一整个布局框架；
5. 渐变：几行代码代替了背景平铺的图片；
6. 多背景：不需要多个容器了；
7. 伪类：装饰性的元素不需要额外的标签去定义了。

1. 我要用这css干嘛？
2. 我明白我要干嘛了，这是css2规范里的么？
3. 这玩意兼容性怎么样啊
4. 这是锦上添花还是需求啊？
   1. 这是锦上添花，那么低端浏览器我就只能优雅降级了。
   2. 这是需求啊！跳到第五步
5. 我怎么在不兼容的浏览器里对付这个需求呢？

1. 这里要用渐变？
2. 用吧。。css2里有渐变？
3. 兼容性呢？
   1. 还好吧，一般化，ie8以下跟operamini不支持css3渐变（这里明显有误了）
4. 这是锦上添花还是需求啊？
   1. 这只是一种更炫的手段，不是重点。不支持的我就用个单色代替吧。
   2. 需求要求这里就是用渐变啊！我得找兼容了。
5. 我要如何让它不支持的浏览器上工作

2. .my-element {
3. border: 1px solid #666;
4. border: 1px solid rgba(0,0,0,0.3);
5. background: #708090;
6. background: hsl(210, 13%, 50%);
7. }

2. /* Normal version */
3. .dropdown {
4. opacity: 0;
5. pointer-events: none;
6. }
8. .trigger:hover .dropdown {
9. opacity: 1;
10. pointer-events: auto;
11. }
13. /* Fallback with Modernizr */
15. .no-opacity .dropdown,
16. .no-pointerevents .dropdown {
17. opacity: 1;
18. pointer-events: auto;
19. display: none;
20. }
22. .no-opacity .trigger:hover .dropdown,
23. .no-pointerevents .trigger:hover .dropdown {
24. display: block;
25. }

6. 渐进增强与优雅降级

7. Css预处理工具

1. 变量（variables）
2. 可传参的函数（functions (with parameters)）
3. 命名空间（namespaces）
4. 嵌套（nesting）
5. 条件语句（conditional statements）
6. 操作（operations）
7. 其他（and many more）

2. .navigation {
3. width: 800px;
4. width: calc(100%-150px);
5. }
6. .navigation li {
7. color: #444;
8. }
9. .navigation li a {
10. text-decoration: none;
11. }

2. $main-color: #444;
4. .navigation {
5. width: (100%-150px);
6. li {
7. color: $main-color;
8. a {
9. text-decoration: none;
10. }
11. }
12. }

1. Sass (written in Ruby)
2. LESS (written in JavaScript)
3. Stylus (written in JavaScript)
4. Crush (written in PHP)

8. 与时俱进

9. 取长补短

1. CodePen
2. CSS Deck
3. Dabblet
4. TheCodePlayer
5. CSS3 案例

10. 熟能生巧