文章目录
命名时需要注意的点:
-
规则命名中,一律采用小写加中划线的方式,不允许使用大写字母或 _
-
命名避免使用中文拼音,应该采用更简明有语义的英文单词进行组合
-
命名注意缩写,但是不能盲目缩写,具体请参见常用的CSS命名规则
-
不允许通过1、2、3等序号进行命名
-
避免class与id重名
-
id用于标识模块或页面的某一个父容器区域,名称必须唯一,不要随意新建id
-
class用于标识某一个类型的对象,命名必须言简意赅。
-
尽可能提高代码模块的复用,样式尽量用组合的方式
常用id的命名:
(1)页面结构
-
容器: container
-
页头:header
-
内容:content/container
-
页面主体:main
-
页尾:footer
-
导航:nav
-
侧栏:sidebar
-
栏目:column
-
页面外围控制整体布局宽度:wrapper
-
左右中:left right center
(2)导航
-
导航:nav
-
主导航:mainbav
-
子导航:subnav
-
顶导航:topnav
-
边导航:sidebar
-
左导航:leftsidebar
-
右导航:rightsidebar
-
菜单:menu
-
子菜单:submenu
-
标题: title
-
摘要: summary
(3)功能
-
标志:logo
-
广告:banner
-
登陆:login
-
登录条:loginbar
-
注册:regsiter
-
搜索:search
-
功能区:shop
-
标题:title
-
加入:joinus
-
状态:status
-
按钮:btn
-
滚动:scroll
-
标签页:tab
-
文章列表:list
-
提示信息:msg
-
当前的: current
-
小技巧:tips
-
图标: icon
-
注释:note
-
指南:guild
-
服务:service
-
热点:hot
-
新闻:news
-
下载:download
-
投票:vote
-
合作伙伴:partner
-
友情链接:link
-
版权:copyright
关于css代码性能优化
-
合并margin、padding、border的-left/-top/-right/-bottom的设置,尽量使用短名称。
-
选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗。但是一定要避免覆盖全局样式设置。
-
注意选择器的性能,不要使用低性能的选择器。
-
禁止在css中使用*选择符。
-
除非必须,否则,一般有class或id的,不需要再写上元素对应的tag。
-
0后面不需要单位,比如0px可以省略成0,0.8px可以省略成.8px。
-
如果是16进制表示颜色,则颜色取值应该大写。
-
如果可以,颜色尽量用三位字符表示,例如#AABBCC写成#ABC 。
-
如果没有边框时,不要写成border:0,应该写成border:none 。
-
尽量避免使用AlphaImageLoader 。
-
在保持代码解耦的前提下,尽量合并重复的样式。
-
background、font等可以缩写的属性,尽量使用缩写形式 。
作者:liutianou
链接:https://www.jianshu.com/p/af6cbbe0d834
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。