CSS教程:面向对象CSS FAQ

2016-02-20 00:10 13 1 收藏

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

【 tulaoshi.com - Web开发 】

原文: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的一个部件。比如:

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如何提升性能?

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

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.)。

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

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

来源:http://www.tulaoshi.com/n/20160220/1631400.html

延伸阅读
标签: Web开发
什么是CSS? CSS是CascadingStyleSheets(层叠样式表)的缩写。它的作用是定义网页的外观(例如字体,颜色等等),它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。   谁需要学习CSS? 对于想要使用XHTML制作符合W3C国际Web标准网站的站长,CSS是必须学习的,它几乎是你定义网页外观的唯一工具;而对于那些毫不关心Web标...
标签: Web开发
以前我从来没有具体的谈到这个问题      最好的解释方法是用一个例子来说明那的特性引起了你的困惑或则没有按照预期的显示。然后我们将近距离的细看计算实际的值来选择最优的选择器。      这是一个简单的例子 无序的列表: <ul id="summer-drinks"> <li>Whiskey and Ginger Ale/li</li...
标签: Web开发
CSS 盒模型 网页设计中的每个元素都是长方形的盒子。 盒子的尺寸是怎样精确计算的,请看下图: 如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿),就会很熟悉下面的图表了。 这个图表很好地展示了作用于页面上任意盒子的数值。 注意以上两个例子中,margin 都是白色的。Margin 比较特别,它不会影...
标签: Web开发
前面一篇介绍了网页制作的CSS的作用 宣告CSS样式的语法如下: 選擇器{ 选择器{ 屬性:設定值; 属性:设定值; ... } 在一個選擇器(Selector) 中,可以設定的屬性數目沒有限制。在一个选择器(Selector)中,可以设定的属性数目没有限制。 選擇器主要有三種:型類(Type) 選擇器、Class 選擇器、和ID 選擇器。选择器主要有三种:型类...
标签: Web开发
CSS样式 层叠顺序 当使用了多个样式表,样式表需要争夺特定选择符的控制权。在这些情况下,总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。 正如以前所提及的,网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突,网页制作者的规则会凌驾于读者的其它相同权重的规则。而网页制作者和读...

经验教程

367

收藏

20

精华推荐

CSS教程:条件CSS的介绍

CSS教程:条件CSS的介绍

yiti1314

CSS实例教程:CSS Hack

CSS实例教程:CSS Hack

快乐时尚的我

CSS教程:初始化CSS

CSS教程:初始化CSS

梵心only

微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部