CSS – Naming Conversion

参考:

CSS Naming Conventions that Will Save You Hours of Debugging

 

Class Name

kebab-case

.hero-section {}

 

JS Used Class Name

prefix "js" + kebab-case

class="js-hero-section"

好处是比较 clear, 解耦也比较顺风水.

 

Single Quote vs Double Quote

stackoverflow 讨论

Angular Material 是用 single quote

 W3Schools 是 double quote

我选 single quote.

 

@keyframes name case style

W3Schools 是 lowercase 

Angular Material 是 kebab-case

我选 kebab-case.

 

Sass Case Style

variable = kebab-case

function = kebab-case

mixin = kebab-case

constant = UPPER_SNAKE_CASE

 

Selector id vs class

always use class

 

Sass @include, map-get

@include mixin-name 不需要括弧, 除非有 parameter.

map-get($obj, 'key') key 放 quote

 

Grid Area Name

W3Schools 用 camelCase

CSS-Tricks 用 kebab-case

 

我选 kebab-case