CSS模块化

lishihuan大约 6 分钟

CSS模块化

https://blog.csdn.net/qq_39206750/article/details/123940103open in new window

https://juejin.cn/post/7021461539236347940open in new window

https://blog.csdn.net/weixin_34688110/article/details/112090373open in new window

https://juejin.cn/post/6844903620261969934open in new window

取名工具： https://unbug.github.io/codelf/open in new window

模块化概念

模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程，有多种属性，分别反映其内部特性。 ---- 就是把一个大的功能拆解成小功能

为什么需要模块化

  • 相对独立性 – 避免作用域污染
  • 通用性 – 可复用
  • 互换性 – 可按需加载，从而优化性能

常见的CSS模块化思想，如：Sassopen in new window、SCSS、LESS、BEM、OOCSS、AMCSS

1. css的命名规范

1.1 css书写顺序：

1.位置属性(position, top, right, z-index, display, float等)　 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- text-align等)　 4.背景(background, border等) 5.其他(animation, transition等)

1.2 css语法：

  • 主要的、重要的、特殊的、最外层的盒子使用 ID 属性命名，其他的都使用 class 属性命名。

  • 命名规则须以内容优先，表现为辅。首先根据所要呈现的内容、功能来命名，如果内容实在无法找到合适的命名，可以再根据表现命名。

  • 命名一般为小写英文字母，但特殊情况下，实在找不到合适的单词时，可以使用拼音命名，但必须简明，结构清晰

  • 多个单词可以使用连字符（-）链接，命名可以使用数字，但不能以数字开头

  • 命名可以使用单词缩写，但必须确保是有效的缩写，即别人能看懂，不能自定义缩写

  • 为了代码的易读性，在每个声明块的左花括号前添加一个空格。

  • 每条声明语句的 : 后应该插入一个空格。

  • 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

  • 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。

  • 十六进制值应该全部小写，例如，#fff。

  • 尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。

  • 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

1.3 注释的写法

/* Header */
内容区
/* End Header */

Css的命名规范(BEM,OOCSS，SMACSS)

2. BEM 代码命名规范

https://blog.csdn.net/weixin_41996102/article/details/121658875open in new window

https://www.jianshu.com/p/900e26060c09open in new window

2.1 什么是 BEM 命名规范

BEM 是 BlockElementModifier 的缩写 ，其中B 表示块（block）、E 表示元素（element）、M 表示修饰符（modifier）。

这三个部分通常使用__ 与--连接。即： .块__元素--修饰符{}

  • Block：一个独立的，可以复用而不依赖其他组件的部分，可作为一个块

  • Element：是 Block 的一部分不能独立来使用的，所有的 Element 都是与 Block 紧密关联的。例如一个带有 icon 的输入框，那么 这个 icon 就是这个输入框 Block 的一个 Element，脱离了输入框的 Block 那么这个 icon 就没有意义

  • Modifier：是用来修饰 Block 或 Element，表示 block 或者 element 在外观或行为上的改变。例如，上面提到的输入框 Block，当鼠标悬停时边框高亮，那么这个高亮的效果就应该用 Modifier 来实现。

.site-search{} /* 块 */
.site-search__field{} /* 元素 */
.site-search--full{} /* 修饰符 */

2.2 优势

  • 模块化思想，一般来说遵循这个方法的组件可以迁移环境
  • 一定程度上，避免命名的污染
  • 自解释性。可以直观看出各个class之间的依赖关系以及它们的作用范围（.list__item和.list__item--underline都是依赖于.list的，因此它们不能脱离于.list存在）

层级太高，会导致权重搞，

注：css超过三层，同时不能出现多个元素名的情况

1）保证各个部分只有一级B__E–M，修饰器需要和对应的块或元素一起使用，避免单独使用。
2）仅以类名作为选择器，不使用ID或标签名来约束选择器，且css中的选择器嵌套不超过2层
3）避免 .block__el1__el2 的格式
1659016106080
1659016106080
<div class="card">
    <img class="card__img" src="./img.jpg" alt="">
    <div class="card__content">
        <ul class="card__list">
            <li class="card__item card__item--active">手机</li>
            <li class="card__item">移动市场</li>
            <li class="card__item">科技</li>
        </ul>
        <p class="card__desc">商化前端是一个很有活力的团队，能学到很多知识，你心动了吗？</p>
        <a class="card__link" href="#">详细内容</a>
    </div>
</div>

3.OOCSS 代码规范

OOCSS就是通过选择符重用CSS类

CSS 常用命名

1. 页面结构

容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体 wrapper/wrap 左右中：left right center

2. 导航

导航：nav 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary

3. 功能

标志：logo 广告：banner 登陆：login 注册：register 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标?页：tab 文章列表：list 提示信息：msg 当前的: current 小技巧：tips/Toast / hint 图标: icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright

补充：

统计：stats

4. CSS样式表文件命名

主要的 master.css 模块 module.css 基本共用 base.css 布局、版面 layout.css 主题 themes.css 专栏 columns.css 文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css

包裹类： container, wrapper, outer, inner, box, header, footer, main, content, aside, page, section, block

状态类： primary, secondary, success, danger, warning, info, error, Link, light, dark, disabled, active, checked, loading

尺寸类： large, middle, small, bigger, smaller

组件类： card, list, picture, carousel, swiper, menu, navs, badge, hint, modal, dialog

位置类： first, last, current, prev, next, forward, back

文本类： title, desc, content, date, author, category,label,tag

人物类： avatar, name, age, post, intro

当使用BEM规范命名模块时，可以考虑以下命名建议：

  1. Header（页头）模块：
  • 块（block）命名：header
  • 元素（element）命名：logo, navigation, search, etc.
  • 修饰符（modifier）命名：sticky, transparent, fixed, etc.
  1. Footer（页脚）模块：
  • 块（block）命名：footer
  • 元素（element）命名：logo, menu, social-icons, etc.
  1. Card（卡片）模块：
  • 块（block）命名：card
  • 元素（element）命名：title, content, image, button, etc.
  • 修饰符（modifier）命名：highlighted, featured, bordered, etc.
  1. Grid（网格）模块：
  • 块（block）命名：grid
  • 元素（element）命名：item, column, row, etc.
  • 修饰符（modifier）命名：centered, full-width, gap, etc.
  1. Tabs（选项卡）模块：
  • 块（block）命名：tabs
  • 元素（element）命名：tab, content, etc.
  • 修饰符（modifier）命名：active, disabled, vertical, etc.
  1. Carousel（轮播图）模块：
  • 块（block）命名：carousel
  • 元素（element）命名：slide, indicator, control, etc.
  1. Accordion（手风琴）模块：
  • 块（block）命名：accordion
  • 元素（element）命名：section, title, content, etc.
  • 修饰符（modifier）命名：expanded, collapsed, animated, etc.
  1. Progress（进度条）模块：
  • 块（block）命名：progress
  • 元素（element）命名：bar, label, etc.
  • 修饰符（modifier）命名：indeterminate, striped, animated, etc.