对几个前端相关概念的理解——OO CSS、语义化、CSS hack

极客学院的视频《CSS 在工程中改变》中讲到了OO CSS这个概念,而在知乎上看到别人的回答中提到了语义化和CSS hack这两个概念。在查找了相关资料后,我对这几个概念有了一些自己的理解。

OO CSS

OO CSS,全称为Object Oriented CSS,意为“面向对象的CSS”。

OO CSS是一种书写规则,看重代码的重用性、可维护性和可扩展性。OO CSS将页面可重用元素抽象成一个类,用Class加以描述,而与其对应的HTML即可看成是此类的一个实例。

OO CSS更加适合大型网站的开发,因为大型网站用到更多的可重用组件。为了更好地维护,最好给每个组件写一份说明文档。

作用:

  1. 加强代码复用以便方便维护。
  2. 减小CSS体积。
  3. 提升渲染效率。
  4. 组件库思想、栅格布局可共用、减少选择器、方便扩展。

注意事项:

  1. 不要直接定义子节点,应把共性声明放在父类。
  2. 结构与样式相互独立。
  3. 容器和内容相互独立。
  4. 抽象出可重用的元素,建好组件库,在组件库内寻找可用的元素组装页面。
  5. 往你想要扩展的对象本身增加class而不是他的父节点。
  6. 对象应保持独立性。
  7. 避免使用ID选择器,权重太高,无法重用。(ID选择器大多数为JS服务)
  8. 避免位置相关的样式。
  9. 保证选择器相同的权重。
  10. 类名应简短、清晰并保有语义。OOCSS的名字并不影响HTML语义化。

参考资料:

OOCSS——概念篇

语义化

语义化就是对数据和信息进行处理,使得机器可以理解。

如何在开放的网络、庞大的信息资源中找到需要的信息?我们当然需要借助包括搜索引擎、爬虫在内的智能程序的力量。而为了让这些程序能够理解内容、推演逻辑、建立索引并给予较高的权值,语义化变得越来越重要。SEO最有效的一种方法就是对网页的HTML结构进行重构,实质上就是语义化。

为了使机器能够尽可能理解内容,规范是必须的。程序肯定只会关注那些约定俗成的东西。某种规范被认可的程度越高,就越会成为机器算法的目标,人们就越可以根据它来实现各种功能。

HTML本身也是机器可读的语义信息,但由于HTML被设计的目的并不是为了机器可读,所以不尽完美。也因此,HTML规范一直在往语义化的方向上发展。HTML5更是在之前规范的基础上,将所有表现层的语义描述都进行了修改或者删除,增加了不少可以表达更丰富语义的元素。

当然,HTML5并非Web语义化唯一的规范。有很多组织都提出了有浏览器和搜索引擎支持的规范,为扩展、标准化Web语义做着自己的贡献。关于HTML5各个元素语义的描述,可参考 Semantic HTML

参考资料:

如何理解 Web 语义化?- 知乎

CSS hack

由于不同厂商的浏览器和浏览器的不同版本对CSS有不一样的支持和解析结果,导致我们需要针对不同的浏览器及同一浏览器的不同版本写特定的样式,以获得统一的页面效果。这个过程叫做CSS hack

使用CSS hack虽然有助于实现页面表现的一致性,但滥用会造成编码过于复杂、文档混乱不堪,增加管理和维护的负担。因此,hack要少用、慎用。等到未来浏览器厂商的标准能够完全统一时,就是hack退出历史舞台的时候了。

参考资料:

史上最全的CSS hack方式一览