CSS 款式取名标准

2021-01-20 15:20 jianzhan

坚信大伙儿对款式取名都是多少觉得艰难,非常是想起1个成心义的名,更难。回望了1下以前写的《 款式取名标准 》(不知道道大伙儿应用后有甚么感受)融合这段時间应用上发现的1些难题,再次梳理了款式的取名标准,期待能更好用些。

要防止当情况更改时名字丧失实际意义,最多见的便是用于合理布局的类名,如“left”、“right”,当左侧栏已不是左侧栏的情况下,“left”这个名就沒有具体实际意义了。这与大家所强烈推荐的“取名要成心义”就相违反了,应用编号就更为有难题了。仿佛没错,但是有好长1段時间都有个难题让我很苦恼,假如1个网页页面中同个控制模块出現1次以上,并且细节还不1样,那后边出現的名字应当叫甚么呢?难道说“one”、“two”就并不是编号?实际上大家要防止遇到的状况便是当情况(主要表现)更改时,对应界定的类名不容易丧失实际意义。

所谓的情况(主要表现)更改,有几种状况:

  1. HTML不会改变,款式界定更改。假如取名应用了表明某1情况的名字,如“red“、“font14“等,必然会引发界定与取名不符的状况,对后继的危害会导致较为大的危害。
  2. 款式界定不会改变,HTML更改。HTML更改代表着类名可拆换,也便是假如类名应用了表明某1情况的名字,反而更有益于改动。
  3. 款式界定与HTML都更改。只必须考虑到不必出現第1种状况的結果便可以了。

而具体状况其实不是单纯性的某1种状况,更多的情况下是掺杂着出現的。有点远了,回主题。

标准

[ 控制模块前缀 ] _ 种类 _ ( 功效 | 情况 ) n _ [ 部位 n ]

图例表明:

  • ( 必选 ):必须存在。
  • [ 可选 ]:可依据必须挑选。
  • |:多选1。
  • n:可有好几个。

名词表明:

控制模块前缀
控制模块界定时应用的前缀。
种类
界定类的內容种类。如键入框、文字、段落这些。
功效
界定类的功效,用于对种类的填补。
情况
界定类的情况,用于对种类的填补。
部位
界定类所应用的部位,如主页、导航栏这些,不清除应用左、右这样的词,但应尽可能防止。
  • 每项都可以有自身的1个缩写表,同1名字的缩写尽可能统1。
  • 所采用的单词应挑选但是于实际表明某1情况(如色调、尺寸等)的单词,以免当情况更改时名字丧失实际意义。
  • 由不以数据开始的小写字母(a-z)、数据(0⑼)构成。
  • 保证类(.class)的重用性与目标(#id)的唯1性,id防止应用保存字。

例:

控制模块前缀:

  • 弹出 pop
  • 公共性 global,gb
  • 题目 title,tit
  • 提醒 hint
  • 菜单 menu
  • 信息内容 info
  • 预览 pvw
  • Tips tips
  • 导航栏 nav

种类:

  • 按钮 bt
  • 文字 tx
  • 段落 p
  • 标志 icon
  • input input
  • 色调 color,c
  • 情况 bg
  • 边框 bor

功效:

  • 设定 set
  • 加上 add
  • 删掉 del
  • 实际操作 op
  • 登陆密码 pw
  • 导入 inc

情况:

  • 取得成功 suc
  • 不成功 lost
  • 全透明 tran

部位:

  • 公共性 gb
  • 边框 bor
  • 段落 p
  • 弹出 pop
  • 题目 title,tit
  • 菜单 menu
  • 內容 cont
  • 导航栏 nav
汉语解释 取名 汉语解释 取名 文字键入框 .input_tx 段落文字色调 .tx_c_p 登陆密码键入框 .input_pw 相册弹出的设定层 .pop_set_photo 登陆登陆密码键入框 .input_pw_login 系统日志设定取得成功提醒 .hint_suc_blogset 文字色调 .tx_c 公共性提醒 .hint_gb

问几个简易的难题,能够协助大家进行取名:

  1. “甚么种类的界定?”——是个键入框,input。
  2. “种类填补表明”——假如1个词表明不清晰,那末填补表明种类,文字键入框,input_tx。
  3. “在哪儿应用?”——界定要应用的部位在哪儿?主页的检索文字键入框,input_search_index。

将会没法遮盖到全部的状况,但坚信能处理70%~80%的取名难题。假如融合“控制模块化”有关的方式去界定,实际上所必须界定的名字其实不必须许多。如:“hint_tx”表明提醒控制模块的文本界定,“hit_tx_hint”表明提醒里文本强调的界定,至因而更改色调還是加粗,这个就看不一样提醒控制模块的必须了。