css名方法-命名的模块化

vincent_xyb 发布于2019-08-02 15:59 / 2780人阅读

摘要：基本思路是确保全局空间下一级域名不冲突，那么子域名就被限定在了独立的局部作用域中，从而保证命名的唯一性。将命名对象划分为组件和功能。过提高复用性，减少命名的需要，因为有的样式直接用公共类名就能实现，不需要额外命名。

基本思路是确保全局空间下一级域名不冲突，那么子域名就被限定在了独立的局部作用域中，从而保证命名的唯一性。

BEM

Block-Element-Modifier

SUIT CSS

1、将命名对象划分为组件（component）和功能（Utility）。组件直接命名，功能额外加前缀，比如专门给js调用的类名可加上js前缀：js-button
2、规定了连字符的用法。普通隔断用单个连字符，描述性词汇用两个连字符：

.nav-button { }

.nav-button--primary { }

3、状态切换用is-state型的相邻类名（adjoining class）

.button { }

.button.is-disables { }

OOCSS

抽象公共类，把复用度高的样式抽取出来。
过提高复用性，减少命名的需要，因为有的样式直接用公共类名就能实现，不需要额外命名。

.mt20 { margin-top: 20px }
.tc { text-align: center }
.abs { position: absolute }
.clearfix:after { content: ‘’; display: block; clear: both; height: 0 }

缺点是滥用就可能付出代价，比如有10个组件用同一个普通类名，那么修改样式只需要改一处CSS即可，但是在10个组件上用同一个公共类名比如mt20，意味着把mt20改成mt15，你需要改10处的class。

SMACSS

针对数量庞大的类名

Base：基础的样式规则

Layout：用于布局的样式规则

Module：可复用的模块样式规则

State：状态样式

Theme：UI样式

针对不同分类，可以使用不同的前缀来划分命名空间

ITCSS

更像是 CSS 整体架构方案，与 SMACSS 横向分类不同，它综合了以上各种方法，提出了一个纵向分层模型。(bootstrap使用)

Settings：简单的说就是在SCSS中预设好变量

Tools：简单的说就是在SCSS中预设好mixins和functions

Generic：简单的说就是reset.css或normalize.css

Elements：对元素的基本格式化，如h1 { font-size: 20px }

Objects：使用OOCSS抽象公共类

Components：UI组件的样式

Trumps：辅助性、功能性的特殊样式，例如动画

GPU云服务器云服务器模块名命名空间目录名 idc数据中心用到的光模块公司前10名 js命名多个变量名 hadoop主机名一般命名方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54478.html

css名方法-命名的模块化

摘要：基本思路是确保全局空间下一级域名不冲突，那么子域名就被限定在了独立的局部作用域中，从而保证命名的唯一性。将命名对象划分为组件和功能。过提高复用性，减少命名的需要，因为有的样式直接用公共类名就能实现，不需要额外命名。基本思路是确保全局空间下一级域名不冲突，那么子域名就被限定在了独立的局部作用域中，从而保证命名的唯一性。 BEM Block-Element-Modifier SUIT C...

Flands 2019-08-29 13:58 评论0 收藏0
css名方法-命名的模块化

摘要：基本思路是确保全局空间下一级域名不冲突，那么子域名就被限定在了独立的局部作用域中，从而保证命名的唯一性。将命名对象划分为组件和功能。过提高复用性，减少命名的需要，因为有的样式直接用公共类名就能实现，不需要额外命名。基本思路是确保全局空间下一级域名不冲突，那么子域名就被限定在了独立的局部作用域中，从而保证命名的唯一性。 BEM Block-Element-Modifier SUIT C...

sixleaves 2019-08-21 17:57 评论0 收藏0
CSS Modules详解及React中实践

摘要：上例中打印的结果是对中的名都做了处理，使用对象来保存原和混淆后的对应关系。结合实践在处直接使用中名即可。如因为只会转变类选择器，所以这里的属性选择器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端领域中进化最慢的一块。由于 ES2015/201...

wemall 2019-08-30 15:45 评论0 收藏0
CSS命名规范

摘要：本篇介绍几种命名规范。使用的网站四其他命名规范等减少对结构的依赖增加重复性的使用几种命名规范比较与在命名上相反的点可以放心使用，以为都是在模块内但不推荐当前我们的网站略有思想更概括，中的，相当于的，相当于的，相当于的中文本篇介绍几种CSS命名规范。（规范详细请参考底部References) 一、NEC (nice easy css) 网易前端CSS开源项目 1.1 样式分类重...

includecmath 2019-08-30 13:17 评论0 收藏0