好的 CSS 取名标准能够节省 Debug 時间

日期:2020-10-30 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

 

简评:Debug CSS 是1种很耗时的实际操作,假如有优良的取名标准能够节省许多的 Debug 時间。

应用连标识符('-')隔开标识符串

你将会习惯性了在 Javascript 中应用小驼峰的取名方法:

var redBox = document.getElementById('...')

可是在 CSS 中不提议应用这类取名方法:

.redBox { 
  border:1px纯鲜红色; 
}

而应当应用这类:

.red-box { 
   border:1px纯鲜红色; 
}

这是1个规范的 CSS 取名标准,有更好的可读性。

另外,他和 CSS 特性名字1致。

//正确
.some-class { 
   font-weight:10em 
}
//错了
.some-class { 
   fontWeight:10em 
}

BEM 取名标准

精英团队有不一样的方式来撰写 CSS 挑选器。1些精英团队应用连标识符隔开符,而别的精英团队则趋向于应用更为构造化的称为 BEM 的取名标准。

1般来讲,CSS 取名标准有3个难题要处理:

  1. 可以根据姓名就可以清晰挑选器的作用。
  2. 可以看出挑选器在哪儿里可使用。
  3. 可以看出 class 之间的关联。

你有木有见过这样写的类名:

.nav--secondary {
  ...
}
.nav__header {
  ...
}

这便是 BEM 取名标准。

B 意味着块(Block)

BEM 尝试将全部客户页面分为可重用单独的块(Block,留意这里的 Block 并不是指 inline-block),1个 header 是1个 block,header 里边嵌套循环的元素(logo、input、menu)还可以是 block 。

举个事例下面的照片:

 

这是1个火柴人(大家能够把它看作1个 Block),依照以前的说法,这个组件的取名大家能够设为 stick-man 。

主键的款式应当以下所示:

.stick-man { 
  
}

 

E 意味着元素

Block 中1般会有好几个元素,举个事例:火柴人有1个 head,两个 arms 和 feets

 

head、feet、和 arms 是该组件中的全部元素。应用 BEM 取名标准,根据双下划线联接块(Block)和元素(Elements)方法来取名。

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

M 意味着装饰符

BEM 中 M 意味着装饰,能够对块(Block)或元素(Element)开展装饰(外型或个人行为的调剂),大家能够调剂大家的火柴人转化成蓝色火柴人和鲜红色火柴人(具体上大家将会必须1个蓝色按钮和1个鲜红色按钮)。

 

应用 BEM 的取名标准大家应用双联接符来取名('--')

比如:

.stick-man--blue {
}
.stick-man--red {
}

装饰符也能用于元素(element),比如大家只想调剂火柴人的头顶部尺寸。大家能够这样取名

 

.stick-man__head--small {
}
.stick-man__head--big {
}

以上便是 BEM 的取名方法,这类取名方法尽管有点唠叨可是在繁杂的工程项目中能够很好的理清各处分之间的关联,假如只是简易的工程项目立即应用隔开符取名就可以了。

在 JavaScript 选用到的 CSS 类名应当怎样取名

当你看到这个篇文章内容刚开始下手重构自身的新项目。

你将原先的编码:

<div class="siteNavigation">
</div>

改为了:

<div class="site-navigation">
</div>

这看着很棒,可是你忘了你在某个地区(JavaScript)用到了这个类名:

//the Javasript code
const nav = document.querySelector('.siteNavigation')

这个情况下 nav 可能获得 null。

以便避免这类状况,大家可使用以下的取名来提示大家。

应用 'js-*' 来取名

大家可使用 js- 来取名大家的类:

<div class="site-navigation js-site-navigation">
</div>

在 JavaScript 编码大家应用 js-site-navigation 来获得该 DOM:

//the Javasript code
const nav = document.querySelector('.js-site-navigation')

如今大家要是1看到 js- site-navigation 就会想起,在某个 JavaScript 编码中应用该类名获得 DOM 目标。

总结

以上所述是网编给大伙儿详细介绍的CSS 取名标准的有关专业知识,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!