在大型、复杂和快速迭代的系统中,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/
继续阅读 »