前言

最近命名css简直脑壳痛，总结下css常见的命名

不要长命名

比如能用info绝不用information desc-description intro-introduce

不要单命名

.title .info .text .box等一定使用特定的前缀包裹起来 .head .aside .main .warning .success

如果找不到前缀，可以采用产品的前缀。前缀也不要超过4个字母

html 标签中找灵感

a ul li header body aside main nav section content summary detail option img footer btn menu mark group tab b i

html 属性中找灵感

radio checkbox range email number color date url time file grid cell bar item row slider list panel tree

伪类和布尔属性 找灵感

active invalid disabled selected

页面结构

container（多个容器的包裹） head content main footer nav sidebar column wrapper（单个容器的包裹） left right center

热词

tag tips vote title login-bar nav-bar tab-bar search list tab banner module news status guild

总结

• layout 和内容无关的布局，可以是全局布局，也可以是局部布局，比如常见的两列布局column-layout-2 layout-left layout-right, layout-center
• container 和 wrapper， container用于包括有结构的一组元素，比如main-container 里面包含 header-container content-container footer-container。 header-container。wrapper 是单个容器的包裹，通常对某个容器进行修饰，比如某个 nav-bar 需要新增外边距等 nav-bar-wrapper
• 语义化的命名是优先于结构化的，结构化的命名在结构调整时，所有的都会跟着调整
• item用于子项，通常和list一起搭配，常见于下拉列表中
• box container总是包裹的同级的内容，有时候就是一个简单的盒子。直接命名一个box，当你没得命名时采用box总没错。
• title 最容易的滥用的的，title 和 header 是两种命名风格，一个是结构化，一个语义化。如果是单纯的文本用title， 如果是复杂的结果用header
• 最麻烦的是一些小部件的命名，比如导航栏中有一个input输入框，点击input输入框会原地替换成一个大的Input框。如果小部件是在整个页面独一无二的，不用关注小部件被放置到哪儿，直接prefix-search-text prefix-search-bar prefix-search-input