前端人员必看css命名,前端css命名规范

1，10

命名规范

如何命名

• css最好用class来命名，js用id来命名，已做区分

• id和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名

命名示例

.div1{} /* 不推荐；无意义 */

.a_green{} /* 不推荐；无意义 */

.menu{} /* 推荐；特殊性*/

.header{} /* 推荐；通用性*/

命名精简

id和class命名越精简越好，只要足够表达意思，这样有助于理解，同时也能提高代码效率

.navigation{} /* 不推荐 */

.login_box_inside_con{} /* 不推荐 */

.nav{} /* 推荐 */

命名嵌套问题

书写css要注意先后顺序和嵌套问题，从性能上考虑尽量减少选择器的层级

.nav ul.list{} /* 不推荐 */

.nav .list{} /* 推荐 */

注意事项

规则命名中，一律采用小写加下划线的方式

命名中尽量避免使用中文拼音，应该采用更简明有语义的英文单词进行组合

命名注意缩写，但是不能盲目缩写

不允许通过1、2、3等序号进行命名

避免class与id重名

id注意用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id

class用于标识某一个类型的对象，命名必须言简意赅

尽可能提高代码模块的复用，样式尽量用组合的方式

规则名称中不应该包含颜色、定位等与具体显示效果相关的信息，应该用意义命名，而不是结果名称