CSS开发框架技术OOCSS编写和管理CSS的方法

目前最流行的CSS开发框架技术当属OOCSS,尽管还有其他类似技术(如BEM)。这些方法试图对CSS采用面向对象的编程原则。样式语言与面向对象的设计原则在概念之间存在一定的问题。欠缺经验的人员可能不会注意到这些微妙的东西。拥有一个编写和管理CSS的方法比什么都要更好。一些开发实践不利于语义化质量和长期的可维护性。讨论一些被提倡的“CSS框架方法”问题。如何更好的解决这些问题。

语义化在计算机科学中只有两硬东西,缓存失效和命名的事件。

当编写HTML,有三种主要的方式表达内容、Web界面或应用程序的语义化:内容使用的元素类型制作的模板;使用ID用来识别一个独特的,单个元素;用类名来分类一组元素。

最重要的是让前端开发人员通过一个CSS框架技术来解决一个网站中重复的CSS代码是首要的事情。

(1)<div class="box-standard box-special"> Here is a special box! </div> 通过这种方式在模板中添加两个类名用来减少重复的代码是可取的,同时这两个类名也传达了特定的语义.

这里开发人员真正需要一个“混合”和"扩展",这些在各种CSS预处理器中都有,比如LESS或者Sass.

个关于mixin在Scss语法中的简单示例: px; , ; } div.news { @include news-item(blue); } div.breaking { @include news-item(red); font-weight: bold; } class="breaking"> Here is a breaking news item! </div>

改变mixin的样式风格总是通过div.breaking来实现,并且尽可能的与模板不耦合在一起。在CSS中能够定义mixin就是他一直以来 想要的特性(这功能最终在预处理器中实现。),如果你想成为一个专业的CSS开发人员,你没有什么好理由不使用CSS预处理程序。

在一味的追求“模块化”。这样避免在CSS中有重复的代码,不过转移到模板中,导致的副作用就是模板和样式的紧耦合性。

(2)另一个目标是提供高性能。这取决天很多因素,如客户端访问一个网页的类型,他们的连接速度和内容是否有被缓存,还有其他一些因素等等。在最基本的级别上有三种东西最明显的影响CSS性能:(所需的HTTP请求数 缓存状态 文档大小).

前两个考虑的范围可以采用CSS框架方法,而第三个是通过类名来解决重用:其目的是,通过声明尽可能少的样式越少,CSS文件就越可能的小。