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