html、css类名命名思路整理

开发页面时,老是遇到起名问题,越想越头疼,严重影响开发进度,都是在想名字,现在做一下梳理,统一一下思想,希望以后能减少这块的痛苦。

命名规则

[功能名称]__[组成部分名称]--[样式名称]

思路

  1. 拆分模块,将一个大的模块拆分成小的模块,小模块命名以模块特性命名,小模块命名先不急,主要是确定主模块的框架;
  2. 写布局,剔除掉小模块后剩下的部分,这部分是主体布局,以一下方向性、布局性的单词来命名,如
    main-info模块里面上中下,main-info-item__header 顶部、main-info-item__body 主体、 main-info-item__footer 底部、main-info-item 公共样式使用
    main-info-item__header 内部布局,header-item__left 左侧、header-item__right 右侧
  3. 完善布局样式,填充拆分的小模块,小模块以模块特性命名,与其他部分无关
    总结:有些样式是用来布局的,有些样式是用来划分模块的,区分开这两块后,我在命名时阻碍小了很多,再有思路在完善。

相关代码

设计图展示
html、css类名命名思路整理_第1张图片
第一步:分模块
html、css类名命名思路整理_第2张图片
第二步:写布局
html、css类名命名思路整理_第3张图片

    

第三步:完善布局样式,填充拆分的小模块
html、css类名命名思路整理_第4张图片

    
企业名称
一级品质二级品质三级品质四级品质五级品质六级品质七级品质
总体收入
123,123,234,123.00
总体收入
123,123,234,123.00
总体收入
123,123,234,123.00

你可能感兴趣的:(html,css,前端)