前端开发之Pascal命名规范 & BEM命名规范

栏目: CSS · 发布时间: 5年前

内容简介:与前端开发普遍采用的驼峰式命名发不同的是,Pascal(帕卡斯)命名法采用的首字母大写,在类、方法(函数)和属性命名的规范上采用驼峰式命名法,在方法上可以选择采用pascal命名法Bem 是块(block)、元素(element)、修饰符(modifier)的简写利用不同的区块,功能以及样式来给元素命名。官网block代表一个组,而element代表组里面的成员,而modifier,虽然在上图没有画出,但是可以知道这个则是用于描述每一个元素的具体的属性。

与前端开发普遍采用的驼峰式命名发不同的是,Pascal(帕卡斯)命名法采用的首字母大写,在类、方法(函数)和属性命名的规范上采用驼峰式命名法,在方法上可以选择采用pascal命名法

  • 具体用法

    方法命名一般用动词,变量命名一般按功能或方法的返回值命名。如 int max= , GetMax()。

BEM命名规范

Bem 是块(block)、元素(element)、修饰符(modifier)的简写利用不同的区块,功能以及样式来给元素命名。官网

  • 解决问题
    • 光凭class名字就可以让其他开发者知道某个标记用来做什么的,明白各个模块之间的关系
    • 组件之间的完全解耦,不会造成命名空间的污染
  1. 语法
  • -中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。
  • __ 双下划线:双下划线用来连接块和块的子元素。
  • _ 单下划线:单下划线用来描述一个块或者块的子元素的一种状态。
  1. 用法
  • 命名模式为:
.block {}
.block__element {}
.block_modifier {}
.type-block__element_modifier
复制代码
  • block 代表了更高级别的抽象或组件。

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

前端开发之Pascal命名规范 & BEM命名规范

block代表一个组,而element代表组里面的成员,而modifier,虽然在上图没有画出,但是可以知道这个则是用于描述每一个元素的具体的属性。

  1. 使用
  • 什么时候应该用 BEM 格式

    用在具体组件里,公共样式里使用则非必须

  • CSS 预处理器配合使用
.article {
  max-width: 1200px;
  &__body {
      padding: 20px;
  }
  &__button {
      padding: 5px 8px;
      &--primary {background: blue;}
      &--success {background: green;}
  }
}
复制代码

LESS/SASS书写规范

使用 .less/.sass 后缀的文件来存储变量、混合代码以及最终合并压缩。

子less 注解
lib-base.less 预定义的变量,例如颜色、字号、字体
lib-mixins.less 用于混合的代码,例如渐变、半透明的混合
lib-reset.less 初始化
lib-ui.less 颗粒化ui功能
xxx.less 模块样式

.less/.sass 文件的引用顺序会对最终编译的样式的作用域和优先级产生影响,请尽量按照由底层到自定义的顺序来引用。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Neural Networks for Applied Sciences and Engineering

Neural Networks for Applied Sciences and Engineering

Samarasinghe, Sandhya / CRC Pr I Llc / 2006-9 / $ 118.59

In response to the exponentially increasing need to analyze vast amounts of data, Neural Networks for Applied Sciences and Engineering: From Fundamentals to Complex Pattern Recognition provides scient......一起来看看 《Neural Networks for Applied Sciences and Engineering》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具