在大型、复杂和快速迭代的系统中，CSS 将非常难以维护。原因之一就是 CSS 没有作用域的概念，每个 CSS 都是全局的，这意味着对 CSS 的任何修改就可能导致一些 UI 的级联改变。
CSS 的扩展语言 -- CSS 预处理器，比如 Sass、Less 和 Stylus，使我们编写 CSS 更加容易，但在我看来，这些 CSS 的扩展语言并没有真正解决可扩展性问题。
在 CSS 支持作用域机制之前，我们需要一种机制，使我们的样式只与特定的 HTML 部分关联，这就是 CSS 方法论。本文将讨论如下的 CSS 方法论：
Object-Oriented CSS (OOCSS)
Block, Element, Modifier (
继续阅读 »
CSS自定义属性除了简单的保存和获取CSS值机制外，还有很多有趣的用处。在这篇文章里，我们将会探索自定是属性的最佳实践。
浏览器支持度
从图中可以看出浏览器的支持度还是挺高的。
用class分离css和js
大多数情况下，为了分离关注点和简化两者的交互，你想让js和CSS保持高度分离。最简单的经常被工程师实践的示例是使用定义良好的CSS类，在js端为了触发事件驱动的视觉变化，只需要添加或移除相关的css类，比如：
```css
.button {
position: relative;
transform: scale(1);
}
.button.js-toggled {
transform: scale
继续阅读 »
相信大多数人都有过关于CSS的痛苦经历，从我加入公司到现在，不到两年的时间里，听到最多CSS相关的讨论就是‘很难调’。所以我也一直在探究这其中有怎样的问题，为什么很多人觉得CSS很难写，如何才能让其他人更优雅的写CSS。在Code Review的时候，我渐渐的发现了问题所在，其实很多人已经掌握了丰富的CSS知识，但却不知道如何分组属性写成class。最后只好在需要改变样式的元素上随意起个名字做class然后把所有要写的属性丢进这个class里，如果优先级不够，再把前面的选择器都加上。结果就是CSS代码不断堆积，重复和冗余不断增多，维护也变得举步维艰。
继续阅读 »
前一阵子在项目组中讲了一个关于CSS的Session，在讲之前我曾收到了许多意见，大部分是希望能讲讲CSS实用性的技术，比如盒模型，CSS3之类的。干货人人都喜欢，因为看得见摸得着，拿来就有用，但我最后还是决定讲一些”湿货“。因为在Code Diff的时候我发现了许多样式的问题不是由于不会写CSS导致的，而是由于在错误的地方使用了写在错误地方的样式。
其实CSS很简单，没有计算没有流程，只是一直描述，无论什么复杂的效果，你只要Google一下就知道怎么写了，甚至可以直接copy。但CSS又很复杂，一个元素的表现会受到它旁边的兄弟元素，也会受到内部的子元素影响，还会受到父元素影响，在这种多重影响下，一个元素的显示逻辑会变得错综复杂。
继续阅读 »
content
{:toc}
百度前端学院的第一次任务笔记，HTML、CSS 基础。主要有 CSS 工作原理，选择器的使用，常用属性，行高属性，盒模型与定位，最后根据设计图实现4个页面。
任务
任务： HTML、CSS基础
继续阅读 »
很久没有写博客了，一是刚入职比较忙，二是因为总有学到新的有趣的东西，停不下脚步来总结一下。最近出差到了帝都，反而能挤出些时间来写点什么了，也正好趁着出差做的这个项目讨论一下CSS理论。
我现在面对的CSS基本上就是一个三头六臂的怪物，一点不夸张，因为真的是三头六臂，同一个样式在同一个element上作用了好几遍，而同一个样式又分散在4，5个class上，优先级有很多层。可以看得出这个怪物不是一个人造就的，早期的开发者选择了SCSS技术，但混乱的import导致了一些基本的样式被多次调用，而后面的开发者又为了摆脱之前的混乱引入了其他共用样式，但无济于事。原因出在HTML上，CSS依托于HTML没有被正确的抽象，而HTML又完全的依赖
继续阅读 »
Preamble
这里我把视觉模型谈谈，还没写完，从最重要的有价值的章节（我管它叫做MVS，如果喜欢篮球应该对MVP很了解吧）开始写的，后续还会写，不要因为里面有的只有标题就冲我扔臭鞋。
9.1 可视化格式化模型(Visual Formatting Model)
这章和接下来描述了可视化格式化模型（VFM）：用户代理如何在可视媒体上处理文档树.
在VFM中，每个在文档树中的元素参照盒子模型生成0个或多个盒子。这些盒子的布局由以下几方面掌控：
盒子的尺寸和类型
位置方案（普通流、float和绝对定位）
元素在文档树中的关系；
外部信息（比如viewport的尺寸、图片等实际尺寸等）
这章和接下来定义的属性适用于continu
继续阅读 »
在前端开发的过程中，一个最繁琐的工作就是写 HTML、CSS 代码。数量繁多的标签、属性、尖括号、标签闭合等，让前端们甚是苦恼。于是，我向大家推荐 Emmet，它提供了一套非常简单的语法规则，书写起来非常爽快，然后只需要敲一个快捷键就立刻生成对应的 HTML 或 CSS 代码，极大提高了代码书写效率。
more
Emmet 的前身是大名鼎鼎的 Zen coding，它是一个编辑器插件，需要基于指定的编辑器使用，官方网站提供多编辑器支持，目前它支持的编辑器如下：
Sublime Text
Eclipse/Aptana
TextMate
Coda
Espresso
Chocolat
Komodo Edit
Notepad++
PSP
继续阅读 »
废话一下：
1. 通常在网上搜索到的 CSS 透明的代码入下：
.transparent {
filter: alpha(opacity=50);/* IE6 /
-moz-opacity: 0.5; / firefox /
-khtml-opacity: 0.5; / safari /
opacity: 0.5; / normal */
}
这段代码可以很轻松地解决透明的问题，只需要更改透明度就好了。
more
CSS 中的 opactity 是有继承问题的。例如你的 Dom 结构如下：
<div class="body">
<d
继续阅读 »
国内的互联网企业有许多开源项目，其中就包括前端的很多优秀框架，摘录如下：
网易
NEC
http://nec.netease.com/
网易员工开源的CSS框架，特别是整理出一套规范，很值得研究。
NEJ
http://nej.netease.com/
继续阅读 »