面向对象CSS FAQ[译](2)
作者:ytzong 发布时间:2009-10-27 15:59:00
设计师可以写OOCSS吗?
是的,设计师出于本能理解对象,比多数人当前书写CSS的方式要形象 — layers of exceptions (想一下,一个老太太吞了一只苍蝇)。事实上,他们爱上OOCSS的原因有两个:
这使他们能快速创建复杂高点击量的站点。他们不需纠结于不理解的结构除非有足够的能力并充足的了解语法
学CSS时,他们不需创建丑陋的 “hello world!” 站点。设计师在非常在意的是他们的工作看起来很漂亮。如果必需做一些丑陋的东东,即便是学习之由,他们很快就会有挫败感并灰常的郁闷。OO-CSS 使得他们的工作在每个学习阶段都看起来很漂亮
设计师是聪明D。我们要给他们信任。他们会讲一种不同的,非工程师的语言,但是极客的语言经常以一种丑陋的方式来拒绝人。我们能做的更好。
我是个前端架构师,如何向团队传授OOCSS?
作为架构师,你应该写结构对象;圆角如何创建,为角或其他特性放置表象元素,并处理浏览器差异。新手为这些模块写皮肤(borders, colors, background images, 等等)。
我用OO-CSS方式创建了大批站点(千级的页面,百万级的访问者)。正确的完成后,很好扩展,这意味着新手将处理的个别元件可预见性很强。代码审阅很容易,因为有可接受的方法明确的规则来扩展对象。这种回馈使新开发者快速生产。
我在FullSIX(一个法国的网络营销机构)管理一个前端开发团队,是我工作过的最有才能的。某些时候我们的成功意味着我们将会有更多难以把控的工作。雇佣前端专家非常困难(没有这种学校!),所以我开始 对一些对写代码有兴趣的设计师(很少或没有经验)推行一个内部实习项目 ,一个月就可以作为团队的初级成员工作。
第一周:学习语义并根据现有的CSS创建HTML。学习创建网页:不需要更多的CSS,HTML语法,多个class,验证,语义,介绍代码审阅等
第二周:创建简单的内容对象(标题,列表等),持续一周。学习CSS语法,怎么扩展对象,颜色,字体百分比,等等
第三周:创建区块的皮肤。边框,颜色,背景图片,基本的布局,sprites。让他们同一个回答过n个问题的资深开发者一起工作,使他们少走弯路,他也应是很好的代码审阅者。
第四周:他们已经是团队的皮肤制作成员了。
他们的代码在一个客户的网站上,同资深开发者写的一样好,或许更好因为他们还未学到一些坏习惯:)
入门:如何使用这些文件?
3个文件,libraries.css (reset 及 fonts 取自 yui), grids.css 及 template.css 已完成,其它的还非常不稳定。
打开template.html并存为新文件
通过扩展相应的对象来改写列的数量及宽度。站点中只需一个模板,即使你有不同列的页面,因为列也是对象。可以把它们当作任意的区域,可能会有0 ~ n 个左列。查阅模板文档可了解更多
用栅格来分割内容区域为小的区块。查阅栅格文档了解更多
添加内容。提示:这也应OO
如何部署在站点上?
注意CSS文件在不断改进中,我会依据接到的反馈进行改变。
我把CSS文件分为了模块,比如栅格和模板。在使用时移除不必要的注释并减少HTTP请求,否则站点会超级慢。这意味着要合并CSS文件为一个稍大的文件。我通过嵌套的注释来组织CSS。最后,作为上线/部署的一部分,用CSS压缩器来移除注释.


猜你喜欢
- 一、排序的基本概念和分类所谓排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作。排序算法,就是如何使得记录按
- 一、说明 numpy.ufunc是什么函数?答
- 很简单的教程,献给喜欢SEO的朋友们。把article.asp?logID=26 替换成article.asp?/a
- 前言过年了,家家户户都得贴春联,红红火火过大年~春联是天朝传统节日完美衔接了民族文化的产物,以美好的诗词文字表达美好愿望,是 * 有文学形式
- 为什页面刷新会出现404因为vue项目中路由hash模式改为了history模式,由于hash模式时url带的#号后面是哈希值不会作为url
- 来介绍一下 Python 是采用何种途径解决循环引用问题的。上图中,表示的是对象之间的引用关系,从自对象指向他对象的引用用黑色箭头表示。每个
- function MakeUrl($arr){  
- 我在配置mysql时将配置文件中的默认存储引擎设定为了InnoDB。今天查看了MyISAM与InnoDB的区别,在该文中的第七条“MyISA
- 在IE中,在使用checkbox或radio时,你会发现有时不能通过CheckBoxObject.checked = true或CheckB
- 什么是转义字符转义字符是一个计算机专业词汇。在计算机当中,我们可以写出123 ,也可以写出字母abcd,但有些字符我们无法手动书写,比如我们
- 本文介绍了随机提取N条记录的例子,通过Sql server与access数据库的代码比较让你更快的掌握。随机提取10条记录的例子:Sql s
- MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当 * 能最丰富,最像关系数据库的。他支持的数据结构非常松散,是类似
- Python自动化办公之删除重复文件思路介绍两层判断:1.先判断文件大小是否为相同,大小不同则不是重复文件,予以保留;2.文件大小相同再判断
- 本文实例讲述了php字符串函数 str类常见用法。分享给大家供大家参考,具体如下:str_split(string, leg);//将一个字
- 作者是一名沉迷于Python无法自拔的蛇友,为提高水平,把Python的重点和有趣的实例发在简书上。一、递归是指函数/过程/子程序在运行过程
- 关于 TensorFlowTensorFlow™ 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(N
- QTableWidget介绍QTableWidget是Qt程序中常用的显示数据表格的控件,类似于c#中的DataGrid。QTableWid
- 本文实例讲述了Python爬虫框架Scrapy基本用法。分享给大家供大家参考,具体如下:Xpath<html><head&
- 一、概念1、模块化代码可以使代码易于维护和调试,并且提高代码的重用性;2、函数可以用来减少冗余的代码并提高代码的可重用性。函数也可以用来模块
- 目录1.程序结构2.选择语句2.1最简单的if语句2.2.if …… else 语句2.3.if…elif…else语句2.4 if 语句的