博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端编码规范之:样式(scss)编码规范
阅读量:5872 次
发布时间:2019-06-19

本文共 1520 字,大约阅读时间需要 5 分钟。

  1. 前端编码规范之:Git使用规范
  2. 前端编码规范之:样式(scss)编码规范
  3. 前端编码规范之:HTML结构规范
  4. 前端编码规范之:Vue最佳实践
  5. 前端编码规范之:Javascript编码规范

css/scss命名的原则是:通俗易懂,尽量保持不重复(冲突),尽量不要用id。

我比较推崇bootstrap的样式目录结构,class命名方式。推荐bootstrap样式框架的编码规范,同时结合BEM命名规范,灵活使用。

class 命名

  • class 名称中只能出现小写字符和破折号(dashe)(不是下划线,也不是驼峰命名法)。破折号应当用于相关 class 的命名(类似于命名空间)(例如,.btn 和 .btn-danger)。
  • 避免过度任意的简写。.btn 代表 button,但是 .s 不能表达任何意思。
  • class 名称应当尽可能短,并且意义明确。
  • 使用有意义的名称。使用有组织的或目的明确的名称,不要使用表现形式(presentational)的名称。
  • 基于最近的父 class 或基本(base) class 作为新 class 的前缀。
  • 使用 .js-* class 来标识行为(与样式相对),并且不要将这些 class 包含到 CSS 文件中。
  • 在为 Sass 和 Less 变量命名是也可以参考上面列出的各项规范。
/* Bad example */    .t { ... }    .red { ... }    .header { ... }        /* Good example */    .tweet { ... }    .important { ... }    .tweet-header { ... }

代码组织

以组件为单位组织代码段。

制定一致的注释规范。
使用一致的空白符将代码分隔成块,这样利于扫描较大的文档。
如果使用了多个 CSS 文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动。

可以把 clone下来,研究一番。

clipboard.png

什么是BEM

命名约定的模式如下:

.block{}    .block__element{}    .block--modifier{}

.block 代表了更高级别的抽象或组件。

.block__element 代表.block的后代,用于形成一个完整的.block的整体。
.block--modifier代表.block的不同状态或不同版本。

BEM命名规范

BEM的关键是,可以获得更多的描述和更加清晰的结构,从其名字可以知道某个标记的含义。于是,通过查看 HTML 代码中的 class 属性,就能知道元素之间的关联。

思考

总的来说,BEM使用应该适量,适用于模块化的html结构。不能全篇使用,会导致class命名冗余。

我觉得应该避免出现出现这种方式,用预处理器拼接出来的class名称,会生成.article__body__xxx__xxx。在维护代码的时候,定位代码及其不方便。
规范也要进化,适合的才是最好的。

~而且,一般来说会使用通过 LESS/SASS 等预处理器语言来编写 CSS,利用其语言特性书写起来要简单很多。~
.article {    max-width: 1200px;    &__body {        padding: 20px;    }    &__button {        padding: 5px 8px;        &--primary {background: blue;}        &--success {background: green;}    }}

转载地址:http://zahnx.baihongyu.com/

你可能感兴趣的文章
关于 error: LINK1123: failure during conversion to COFF: file invalid or corrupt 错误的解决方案...
查看>>
python实现链表
查看>>
java查找string1和string2是不是含有相同的字母种类和数量(string1是否是string2的重新组合)...
查看>>
Android TabActivity使用方法
查看>>
Eclipse的 window-->preferences里面没有Android选项
查看>>
《麦田里的守望者》--[美]杰罗姆·大卫·塞林格
查看>>
遇到的那些坑
查看>>
央行下属的上海资信网络金融征信系统(NFCS)签约机构数量突破800家
查看>>
[转] Lazy evaluation
查看>>
常用查找算法总结
查看>>
被神话的大数据——从大数据(big data)到深度数据(deep data)思维转变
查看>>
修改校准申请遇到的问题
查看>>
Linux 进程中 Stop, Park, Freeze【转】
查看>>
文件缓存
查看>>
远程协助
查看>>
Scrum实施日记 - 一切从零开始
查看>>
关于存储过程实例
查看>>
配置错误定义了重复的“system.web.extensions/scripting/scriptResourceHandler” 解决办法...
查看>>
AIX 7.1 install python
查看>>
PHP盛宴——经常使用函数集锦
查看>>