CSS的组织和管理
来源:互联网 发布:胡门网络胡建伟 编辑:程序博客网 时间:2024/05/22 12:17
CSS的组织和管理
原文链接 - 从BEM谈大型项目中CSS的组织和管理
BEM
BEM是一种CSS命名方法。
* B - Block,块,一组独立的模块,比如菜单。
* E - Element,元素,块的组成部分,比如菜单项。
* M - Modifier,修饰符,用于修饰块或元素的样式或行为,比如菜单项选中。
下面从代码来看BEM命名法和传统命名法的区别:
<!-- BEM命名法 --><ul class="menu"> <li class="menu__item menu__item--selected">Menu Item1</li> <li class="menu__item">Menu Item2</li> <li class="menu__item">Menu Item3</li></ul><!-- 传统命名法 --><ul class="menu"> <li class="item selected">Menu Item1</li> <li class="item">Menu Item2</li> <li class="item">Menu Item3</li></ul>
很容易看出,BEM命名法相对传统命名法要复杂些,但是其结构上的优势可以避免过多选择器带来的复杂属性的级联问题。
BEM命名法使整个块的逻辑联系更加紧密。
OOCSS
OOCSS - 面向对象CSS,是把面向对象的思想运用到CSS的一种方法。
这种方法包含两条原则:
* 结构与样式分离
* 容器与内容分离
这两条原则的目的是将主要关注点集中到样式外观,而不是DOM结构,提高CSS对象的可复用性。
面向对象的理念如模块化、单一功能原则、关注点分离等也在CSS中适用。
下面通过多媒体对象 media
来看看OOCSS:
* media - 最外层的 CSS 类,用来表明这是一个多媒体对象。
* img - 表示出现在左侧的链接、图片或视频对象。
* bd - 表现出现在右侧的主要内容。
* imgExt - 表示额外的链接、图片或视频对象,出现在 bd 表示的主要内容的右侧
<div class="media"> <a href="http://oocss.org/" class="img"> <img src="https://placehold.it/50x50" /> </a> <div class="bd">OOCSS media object</div></div>
SMACSS
SMACSS - 可扩展和模块化CSS,它是把CSS样式规则分成不同的类别。
比如,基础样式,布局样式,模块样式,状态样式,主题样式等等类别。
而不同的类别也有不同的命名方式,比如布局样式含有“l-”前缀等。
ACSS
ACSS - 原子化CSS
它认为关注点分离原则会导致代码冗长、琐碎,提倡将CSS样式尽可能的打散到单条样式。
比如CSS类 M(10)
对应着 Margin: 10px;
小结
首先需要一个基准的 CSS 样式表。这可以使用 Normalize.css 和 Bootstrap 4 中的 Reboot。
然后是进行模块划分。对每个模块中采用 BEM 来作为命名规则。在现在的 Web 项目中,一般不直接编写 CSS,
而是使用 SASS 或 LESS 这样的 CSS 预处理语言来编写。 – 原作者
这里了解到BEM, OOCSS, SMACSS, ACSS四种组织和管理CSS的思想,在实际项目中我会灵活地使用这些方法。
在我的GitHub中有一个repo叫做 basedBootstrap,
里面是自己基于Bootstrap整理的scss文件结构模板。
- CSS的组织和管理
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- CSS 代码组织和管理规范BEM,OOCSS,SMACSS,ACSS
- 测试管理和组织结构的关系
- 运行时存储空间的组织和管理
- 架构和管理组织
- 组织培训的管理
- CSS 选择器内属性的顺序和组织
- 项目组合管理、项目集管理、项目管理和组织级项目管理之间的关系
- 【CSS笔记之八】CSS标签语义化、怪异模式和CSS的组织方式
- 产品开发的组织架构和开发管理
- Linux文件系统之二:硬盘分区partition的组织和管理
- PMP-组织影响和项目生命周期-组织对项目管理的影响
- 组织学习管理和团队管理
- 地理信息系统应用项目组织和管理
- 程序在内存中的管理和组织
- HTML&CSS 表格:组织数据的工具
- 8款在线CSS优化工具/组织和压缩CSS
- AngularJS中的交互 $http
- 【AngularJs】---JSONP跨域访问数…
- HDU
- Elasticsearch数据导入
- 谷歌解决跨域问题
- CSS的组织和管理
- 博客园 首页 新随笔&nbs…
- JAVA互联网架构学习之Listener
- html5-angular多个图片同时上传
- 迅捷CAD转换器把pdf文件转为dwg文件
- html5多个图片同时上传相关逻辑
- 相机标定——标定图片拍摄规范
- ACM集训日记-8月16日
- css三角形