当前位置: 首页 > Web前端 > HTML

css命名和书写规范

时间:2023-04-02 14:42:16 HTML

前言在项目开发中对于css名字的命名和书写老是感觉很混乱,这对于代码的可读性以及维护提出了挑战,所以在闲暇之余看了一些这方面的内容,现总结如下...1.命名规则说明所有的命名最好都小写属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"每个标签都要有开始和结束,且要有正确的层次,排版有规律工整空元素要有结束的tag或于开始的tag后加上"/"表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等给每一个表格和表单加上一个唯一的、结构标记id给图片加上alt标签尽量不缩写,除非一看就明白的单词,不知道的用翻译软件翻译一下无论是使用“.”(小写句号)选择符号开头命名,还是使用“#”(井号)选择符号开头命名都无所谓,但我们最好遵循,主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名如果名字过长可以用中横线但是拒绝使用下划线(IE6以可能出现解析错误,为了区分JavaScript变量名)bad .miantitle { color: #e3c; } .mian_title { color: #e3c; }good .mian-title { color: #e3c; }11.属性简写需要你非常清楚属性值的正确顺序,而且在大多数情况下并不需要设置属性简写中包含的所有值,所以建议尽量分开声明会更加清晰;margin 和 padding 相反,需要使用简写。更多详细规则请参考此文章bad .list-box { border-top-style: none; font-family: aerif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0; }good .list-box { border-top: 0; font: 100%/1.6 aerif; padding: 0 1em 2em; }12.去掉小数点后面的0badfont-size: 0.8em;goodfont-size: .8em;13.十六进制颜色代码缩写,并尽量用小写badcolor: #eebbcc;goodcolor: #ebc;14.不要随意用idid在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用15.可以为选择器加状态前缀bad .withdrawal { background-color: #ccc; }good .is-withdrawal { background-color: #ccc; }16.项目命名的时候采用这种方式my_project_name17.媒体查询规则靠近与他们相关的规则,不要将他们一起放到独立的样式文件中,具体可参考此文章18.更多详细css书写规范可参考此文章1和此文章219.scss书写时应注意的问题可以参考此文章2.命名参考表网页外层最外层:wrapper (页面外围控制整体布局宽度)头部:header主体内容(中部):main左侧布局:main-left右侧布局:main-right导航条:nav网页中部主体:content底部:footer菜单:menu页面结构#wrapper 页面外围控制整体布局宽度#container或#content 容器,用于最外层#head, #header 页头部分#foot, #footer 页脚部分#sidebar 侧边栏#column 栏目#left,#right,#center 左右中导航#nav 导航#miannav 主导航#subnav 子导航#topnav 顶导航#sidenar 边导航#leftsidenav 左导航#rightsidenav 右导航#menu 菜单#submenu 子菜单#title 标题#summary 摘要功能#logo 标志#banner 广告#login 登录#loginbar 登录条#regsiter 注册#search 搜索#shop 功能区#title 标题#joinus 加入#status 状态#btn 按钮#s 滚动#tab 标签页#list 文章列表#msg 提示信息#current 当前的#tips 小技巧#icon 图标#note 注释#guild 指南#service 服务#hot 热点热门#news 新闻#download 下载#vote 投票#partner 合作伙伴#friendlink 友情链接#copyright 版权#searchInput 搜索输入框#search-output 搜索输出#search-results 搜索结果#branding 商标#siteinfo 网站信息#siteinfoLegal 法律声明#siteinfoCredits 信誉#arrow 箭头#sitemap 网站地图#homepage 首页#subpage 二级页面子页面#toolbar 工具条#drop 下拉#dropmenu 下拉菜单需要用 class的命名.tab 标签页.left .right .center 居左、中、右.news 新闻.download 下载.banner 广告条.products 产品.products_prices 产品价格.products-description 产品描述.products_review 产品评论.editor_review 编辑评论.news_release 最新产品.publisher 生产商.screenshot 缩略图.faqs 常见问题.keyword 关键词..blog 博客.forum 论坛3.css文件命名global.css 全局全局样式为全站公用,为页面样式基础,页面中必须包含master.css style.css 主要的module.css 模块产品类页面应用,将可复用类模块进行剥离后,可与其它样式配合使用base.css 基本共用layout.css 布局,版面页面结构类型复杂,并且公用类型较多时使用。多用在首页级页面和产品类页面中themes.css 主题实现换肤功能时应用columns.css 专栏font.css 文字,字体forms.css 表单mend.css 补丁基于以上样式进行的私有化修补print.css 打印style.css 私有独立页面所使用的样式文件,页面中必须包含4.css属性声明顺序详细的声明顺序可以参考此文章位置属性(position, top, right, z-index,display, float等)大小(width, height, padding, margin)文字系列(font, line-height, letter-spacing,color- text-align等)背景(background, border等)其他(animation, transition等)bad .example { color: red; z-index: -1; background-color: #9e0; display: inline-block; font-size: 1.5em; }good .example { z-index: -1; display: inline-block; font-size: 1.5em; color: red; background-color: #9e0; }感谢此文我参考了如下作者写的文章,在此特别提出感谢,如果你在阅读我写的文章中有任何问题可以查阅如下链接:DIV+CSS规范命名大全集合css命名规则【豆瓣小组】如何规范 CSS 的命名和书写?【知乎】团队规范文档【腾讯alloyteam前端团队】css编码规范【百度fex前端团队】nec规范【网易前端团队】精简高效的CSS命名准则/方法【张鑫旭】无废话网页重构系列【大象】