浅谈OOCSS、SMACSS、BEM三种设计模式与前端架构优化的关系

简介:

浅谈OOCSS、SMACSS、BEM三种设计模式与前端架构优化的关系

面向对象的OOCSS,是由Nicole Sullivan提出的css理论,虽说是理论,实则更像一种程序员约定的规范。
<div class="demo-list">
    <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>
</div>
对a修改样式可能用.demo-list ul li a选择,效率比较低,另一方面一旦在后期过程中对列表html进行重构,css也需要重构,耦合性变得很强,维护困难。
OOCSS推荐的写法是在a标签加上demo-a样式,可以通过.demo-list .demo-a的方式来控制解耦。
提取公共样式很多框架都是这种模式,Bootstrap按钮.btn-info、.btn-warning等。

 

SMACSS通过一个灵活的思维过程来检查你的设计过程和方式是否符合你的架构,更像一种规范~
    1为css分类
    2命名规范
    3最小化适配深度

1为css分类
为css分类这一点是SMACSS的核心。SMACSS认为css有5个类别,分别是: 
1 Base 
2 Layout 
3 Module 
4 State 
5 Theme or Skin
SMACSS还约定了一个前缀l-/layout-来标识布局的class
.layout-header {}
.layout-container {}
.layout-sidebar {}
.layout-content {}
.layout-footer {}
SMACSS中的模块具有自己的一个命名,隶属于模块下的类皆以该模块为前缀
.todolist{}
.todolist-title{}
.todolist-image{}
.todolist-article{}
SMACSS状态规范,这个应该很多前端开发者都很好理解,描述的是任一元素在特定状态下的外观。
is-hidden
主题规范,描述了页面主题外观,一般是指颜色、背景图。Theme Rules可以修改前面4个类别的样式,且应和前面4个类别分离开来(便于切换,也就是“换肤”)。SMACSS的Theme Rules不要求使用单独的class命名,也就是说,你可以在Module Rules中定义.header{ }然后在Theme Rules中也用.header { }来定义需要修改的部分(后加载覆盖前加载样式内容)

2命名规范
按照前面5种的划分:
Base Rules(Pass)
Layout Rules用l-或layout-这样的前缀,例如:.l-header、.l-sidebar。
Module Rules用模块本身的命名,例如图文排列的.media、.media-image。
State Rules用is-前缀,例如:.is-active、.is-hidden。
Theme Rules如果作为单独class,用theme-前缀,例如.theme-a-background、.theme-a-shadow。

3最小适配深度
/* depth 1 */ .sidebar ul h3 { }
/* depth 2 */ .sub-title { }
两段css的区别在于html和css的耦合度(这一点上和OOCSS的分离容器和内容的原则不谋而合)。可以想到,由于上面的样式规则使用了继承选择符,因此对于html的结构实际是有一定依赖的。如果html发生重构,就有可能不再具有这些样式。对应的,下面的样式规则只有一个选择符,因此不依赖于特定html结构,只要为元素添加class,就可以获得对应样式。
当然,继承选择符是有用的,它可以减少因相同命名引发的样式冲突(常发生于多人协作开发)。但是,我们不应过度使用,在不造成样式冲突的允许范围之内,尽可能使用短的、不限定html结构的选择符。这就是SMACSS的最小化适配深度的意义。

 

BEM,即Block,Element,Modifier,是由Yandex(俄罗斯最著名的互联网企业)的开发团队提出的前端开发理论。BEM通过Block、Element、Modifier来描述页面(关键就是为了解决多人协作的命名问题)。
Block是页面中独立存在的区块,可以在不同场合下被重用。每个页面都可以看做是多个Block组成。
Modifier是描述Block或Element的属性或状态。同一Block或Element可以有多个Modifier。
在用 jQuery 可以常常看到这样的写法:$(‘.nav–main a’),一旦css发生重构,javascript代码也将变得难以维护,分不清那些代码是否会受到影响。
所以用 HTML 的属性去选取 DOM 节点会更好,如果非要用 CSS 的 class 那也可以多写一个 js- 的 prefix,以表示这个节点有被 Javascript 使用,例如:
<li><a class='nav-a js-nav-a'></a></li>
<li><a class='nav-a js-nav-a'></a></li>
<li><a class='nav-a js-nav-a'></a></li>

 

三种设计模式都有共同的特点,那便是让html与css更好的解耦,抽取样式中可复用的部分,使你的html代码更具语义。了解这些设计模式无疑会使css代码更具模块化,多人协作的时候也能有效避免那些命名问题带来的困扰又或者说提供一些解决的思路。最重要是提取精华,灵活应用,更加的规范规模化,在达到提高效率的同时兼顾性能。

目录
相关文章
|
25天前
|
缓存 前端开发 JavaScript
前端性能优化
在前端重构项目中,为提升用户体验和页面响应速度,采用React框架。遇到页面加载慢和白屏问题,主要归因于数据渲染效率低和状态管理复杂。通过路由懒加载减少初次加载时间,使用Redux Toolkit和immer优化状态管理,配合精细化数据缓存策略。此外,借助React.memo和shouldComponentUpdate避免不必要的渲染,并实施预加载和预渲染策略。关键在于性能意识、技术工具选择、状态管理和用户体验优先。前端开发是技术、用户体验和性能的综合艺术,需持续学习和优化。
|
25天前
|
缓存 监控 前端开发
前端性能优化以及解决方案
前端性能优化关乎用户体验和网站竞争力,包括减少HTTP请求、使用CDN、压缩资源、延迟加载、利用浏览器缓存等策略。制定优化计划,使用监控工具,遵循最佳实践并持续学习,能提升网站速度和稳定性。
41 0
|
26天前
|
前端开发 JavaScript UED
探索前端性能优化技巧:提升用户体验的关键
在现代Web应用程序开发中,前端性能优化变得至关重要。本文将介绍一些关键的前端性能优化技巧,帮助开发者提高网页加载速度、响应能力和用户体验。我们将探讨优化资源加载、减少HTTP请求、优化代码结构等方面的方法,并分享一些实用的工具和技术,让您的Web应用程序更快、更高效。
|
19小时前
|
存储 Cloud Native 物联网
数据库技术前沿探索:架构、优化与行业实践
一、引言 在信息化和数字化的浪潮中,数据库技术作为企业核心竞争力的关键要素,其重要性不言而喻
|
2天前
|
前端开发 JavaScript 编译器
Svelte框架:编译时优化的高性能前端框架
Svelte是一款由Rich Harris于2016年创建的高性能前端框架,以其编译时优化著称。它将复杂UI逻辑转化为高效的JavaScript,减少运行时开销。Svelte的核心理念是将编译时和运行时的复杂性分离,通过模板语法、组件系统、响应式系统和编译器实现高性能。关键优化策略包括声明式更新、模板内联、计算属性缓存、事件处理优化和代码分割。Svelte提供热模块替换、类型检查和丰富的生态系统,如SvelteKit。其响应式系统基于Reactive Statements,自动更新组件。
7 0
|
2天前
|
缓存 自然语言处理 前端开发
JVM系列8-前端编译与优化
JVM系列8-前端编译与优化
6 0
|
4天前
|
存储 缓存 前端开发
单页应用(SPA)的架构与优化:深度探索与实践
【6月更文挑战第11天】本文探讨了单页应用(SPA)的架构与优化,包括前后端分离、路由管理和状态管理基础,以及加载性能、路由和状态管理的优化策略。通过合理设计与优化,SPA能提供流畅体验,同时应对加载性能、路由导航和状态管理的挑战。文章旨在帮助读者理解并提升SPA应用的性能和用户体验。
|
5天前
|
缓存 前端开发 JavaScript
前端性能优化技巧
在当今互联网快速发展的时代,前端性能优化成为了开发者们关注的焦点之一。本文将介绍一些实用的前端性能优化技巧,包括减少HTTP请求、压缩代码、图片优化、减少重绘与重排等方面,帮助开发者们提升网站的加载速度和用户体验。
|
7天前
|
前端开发 算法 JavaScript
优化算法在前端性能提升中的应用
随着互联网应用的日益复杂,前端性能优化成为开发者关注的焦点。本文探讨了优化算法在前端性能提升中的重要作用,包括对JavaScript代码的优化、资源加载的算法选择以及页面渲染的优化策略。通过合理应用优化算法,可以有效提升前端应用的性能和用户体验。
|
11天前
|
存储 缓存 前端开发
全面解析:前端超大文件下载的关键技巧与优化策略
全面解析:前端超大文件下载的关键技巧与优化策略
18 1
全面解析:前端超大文件下载的关键技巧与优化策略