css名方法-命名的模块化

2024年2月25日 100次阅读 来源: 散一群逗逼

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

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 { }

<button class=”button is-disables”></button>

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

针对数量庞大的类名

  1. Base：基础的样式规则
  2. Layout：用于布局的样式规则
  3. Module：可复用的模块样式规则
  4. State：状态样式
  5. Theme：UI样式

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

ITCSS

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

  1. Settings：简单的说就是在SCSS中预设好变量
  2. Tools：简单的说就是在SCSS中预设好mixins和functions
  3. Generic：简单的说就是reset.css或normalize.css
  4. Elements：对元素的基本格式化，如h1 { font-size: 20px }
  5. Objects：使用OOCSS抽象公共类
  6. Components：UI组件的样式
  7. Trumps：辅助性、功能性的特殊样式，例如动画
    原文作者：散一群逗逼
    原文地址: https://segmentfault.com/a/1190000012315168
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞