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