css规则(1)-命名篇

/ 2评 / 0

现在都八月份了。已经有差不多一个月没有更新网站了,真得懒是会上瘾的。为了让自己找回奋斗的状态,自己也写了份下半年的计划,总体来说,现在还是可以跟得上计划的节奏的。现在,我把我自己认为适合的css命名规则分享交流一下。可能别人觉得有更好的命名规则,我完全同意,而以下就是我认为适合我自己代码风格的命名规则啦~(不喜勿喷哈)。接下来的css规则会交流我自己对css一些见解~欢迎交流

从大学开始的时候就喜欢用XX_XX的命名方式去css各类选择器命名,觉得逼格很高,有点像js的命名,但是现在我已经发生改变了,我觉得用中划线比下划线更加方便,并且我js的命名使用下划线命名的,可以非常有效的区分出来,当然啦,这只是我的代码分格了哈哈。

人的思想都会随着环境的改变而发生潜移默化的转变的。css的命名,最好跟每个模块有关,这样每个模块都相互独立,但也相互依赖。

比如按我的理解,我们可以将css分类为布局(layout)、模块(model)、原件(cell)、功能(function)、外观(skin)、状态(status);等等,对此,我有个观点,我们应该杜绝养成用中文拼音命名的习惯或者想法。

我觉得在命名方面的话,名字需要有点意义,比如如内容区的类名,我们可以命名为content或者简写cnt,但是如果用了简写形式的话,我觉得还是需要注释下比较好,因为一个项目不仅仅是我们自己在用,也有其他同事在参与,尽量让代码更加简洁明了更加有意义。我就是推从这种简写的简洁模式,下面就是我自己的一套css命名规则风格,仅供参考:

布局命名:布局就是给网页布局盒子进行命名

语意命名简写
头部headhd
文档documentdoc
主体bodybd
尾部footft
侧栏sidesd
盒子box/wrapbx/wp

模块命名:通常可以把一个通用的块当作一个模块来命名,也可以叫做组件直接的,可以重用

语义命名简写
导航navnav
子导航subnavsnav
面包屑导航breadnavbnav
选项卡tabtab
标题titletit
内容contentcnt
列表listlist
表格tabletb
表单formfm
菜单menumenu
子菜单submenusmenu
登陆loginlog
注册registerres
logologolg
搜索searchsch
提示tiptip
帮助helphp
新闻newsnews
下载downloaddld
版权copyrightcrt
结果resultret
按钮buttonbtn
用户useruser
顶部toptop
图文列表piclistplist
友情链接friendlinkflink
热点hothot
广告advertisead
输入框inputinp
投票votevote
排行rankrank
报名sign-upsign
轮播carouselcarousel
滑块slideslide

原件:原件就相当于网页上一块一块的小的区域,当然这个也可以当模块来用,具体可以参考模块命名。

语义命名简写
代码codeingcode
图片组imagesimgs
文章artcleartcle
徽章badgebadge
评论commentcomt
图标iconico
小栏目条barbar
分页paginationpag
面板(就是上面是标题,下面的文字的布局模块)panelpanel
进度条progressprogress
键/值(我觉得需要,可用于类似左边是键右边是值布局类似age:10)key/valuekey/val
缩略图thumbnailthumbnail
留言wordswords
确定suresure
取消cancelcancle
发送sendsend
请求askask
回复replyreply
sectionsec
chapterchapter

功能命名:当我们需要一个类名来完成一个功能的时候,这个类名可以做功能命名,最有代表性的就是清除浮动。

语义命名简写
清除浮动clearfixclear
左浮动float-leftfl
右浮动floa-trightfr
文本居中text-centertc
文本右对齐text-lefttr
文本左对齐text-righttl
文本两端对齐text-justifytj
隐藏hidehide(不要简写为hd,会与布局头部简写混淆)
显示showshow
文字溢出省略号ellipsisep
编辑editedit
删除deletedel
增加addadd
插入insertinsert

外观(皮肤)命名:我觉得外观命名其实也很难分得清楚了,一个布局模块我们也可以当作功能或者栏目来命名的,具体这个还是需要自己去衡量要给度。外观我对它的理解就是外在表现形式,比如

皮肤skinskin
颜色colorcor
背景backgroundbg
主题themetheme

具体这个我也还在积累,如果你有更好的想法,欢迎交流讨论~

状态命名:我觉得状态命名是很重要的,一方面我们希望我们写的css能够最大程度实现重用,而不是每做一个项目就要写一大堆重复的东西,状态比如说,按钮是出于禁用呢还是选中之类的,具体请看下表,当然状态不仅仅指的是表单交互的状态,它的意义是多元化的。

语义命名简写
首选项primaryprimary
成功successsuccess
警告wramingwramin
禁用disabledesable
选中selectedsled
错误errorerror
鼠标移入hoverhover
点击clickclk
已经访问过visitedvisited
请求askingask
危险dangerdanger
基本basebase
默认defaultdefault
预览previewpre
提交submitsut
关闭closeclose
切换/装换switchswitch

其他常用命名

语义命名简写
插入insertinsert
查看checkchk
加载loadingloading
城市citycity
地区areaarea
配置configcog
设置installinstall
关于aboutabout
展开spreadspread
收起retractretract
blockblock
itemitm
工具tooltool
目标goalgoal
rowrow
columncol

css命名篇,我会不定时更新,欢迎读者们有更好的建议和交流~

简书求关注http://www.jianshu.com/u/bfd55badb1f4

2条回应:“css规则(1)-命名篇”

  1. BingBing说道:

    总结得很好,收藏了 😈

  2. 前端小虾米说道:

发表评论

电子邮件地址不会被公开。 必填项已用*标注