CSS教程:面向对象CSS FAQ

QQ1692046871

QQ1692046871

2016-02-20 00:10

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的CSS教程:面向对象CSS FAQ懂设计的网友们快点来了解吧!

原文:http://wiki.github.com/stubbornella/oocss/faq(翻译时为Version 28)
翻译:ytzong

在OOCSS中怎么定义对象?

对象类似JAVA中的类,保持着OO的特征。

一个CSS对象由4部分组成:

可能是一个或多个DOM节点的HTML 由wrapper节点的class名开始的CSS样式声明 类似于背景图片和显示用的sprites组件以及 JavaScript行为,监听或者与对象关联的方法

这可能令人费解,因为每个CSS class不是其自身必要的对象,但可以是一个wrapper class的一个部件。比如:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

div class="mod"
        div class="inner"
                div class="hd"Block Head/div
                div class="bd"Block Body/div
                div class="ft"Block Foot/div
        /div
/div

对象是一个class为mod的模块。包括4个部件节点(不能独立于模块外,包括2个区块,inner和body,和两个可选择的区块,head和foot)

OOCSS如何提升性能?

OOCSS具有双倍的性能优势:

高度重用的CSS代码,只需要很少的CSS代码,意味着:更小的文件,从而更快的传输 CSS代码在站点页面中调用的比重增大则有希望被复用或被浏览器缓存 就浏览器而言更少的重绘和布局计算单个页面,CSS规则复用的越多,渲染引擎花在computed values的计算时间越少 手动增加的"extending"类,重写更少的规则,这再一次意味着引擎做很少去应用规则

要用ID来对内容写样式吗?

当你在同一页面(或者同一站点同时缓存良好)复用一个对象时,这是性能的免费赠品。用ID来写样式在同一页面中只能使用一次。@cgriego (twitter) 拿它与singletons比较过,我认为非常精确。可能有些情况下你要用ID定义样式,比如非常特殊的 header menus,此时你可以在用ID来沙箱(译注:动名词)特殊元素并确保此处的代码不会影响站点的其它地方。选择ID而非class前要三思,随着站点的发展,真的很难预料其他人会怎么处理依据你的CSS所构建的HTML。如有选择的余地,尽可能的考虑扩展性。

我正在考虑移除模板head, body, foot中的ID。某些人或许有多个主区域。站点的多个header 和 footer更难以猜测,但我敢打赌肯定有设计师会这样想,所以ID很可能会消失(不太顺,看原文:Someone could have multiple main content areas. Multiple site headers and footers are more difficult to imagine, but I bet there is a designer who can dream up something like that, so the IDs are very likely to disappear.)。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

另一方面,ID hooks are great for linking。放在HTML中,不过别用它们来写样式。

展开更多 50%)
分享

猜你喜欢

CSS教程:面向对象CSS FAQ

Web开发
CSS教程:面向对象CSS FAQ

CSS教程之面向对象的CSS:OOCSS

Web开发
CSS教程之面向对象的CSS:OOCSS

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网页制作教程:面向对象的CSS应用

Web开发
网页制作教程:面向对象的CSS应用

XHTML与CSS的面向对象编程

Web开发
XHTML与CSS的面向对象编程

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

创建CSS的对象 使CSS对象的粒度合适

Web开发
创建CSS的对象 使CSS对象的粒度合适

创建CSS的对象使CSS对象的粒度合适

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
创建CSS的对象使CSS对象的粒度合适

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

安装Firefox的Jetpack扩展的步骤

安装Firefox的Jetpack扩展的步骤

教你设置Win8自动登入!

教你设置Win8自动登入!
下拉加载更多内容 ↓