div+css命名规则

|▌冷眼眸甩不掉的悲伤 提交于 2020-03-27 06:41:33

作为一个前端菜鸟,进公司的第一个项目就是中途从外包公司接过来的公司网站,在别人写过了的基础上接着写,命名什么的,简直不要太痛苦。

目前,这个网站已经完成,但是被后台人员指出命名不规范。有心想解释一两句,但是又觉得的这一个月在命名上的折腾,的确让我对命名规范都模糊了不少。

在看了一些css样式命名规则后,我做了一些笔记。

一、命名规则说明

1.所有的命名最好都小写
2.属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"
3.每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
4.空元素要有结束的tag或于开始的tag后加上"/"
5.表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
6.<h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
7.给每一个表格和表单加上一个唯一的、结构标记id
8.给图片加上alt标签
9.尽量使用英文命名原则
10.尽量不缩写,除非一看就明白的单词
11.在外框楼层太多,无法具体命名的情况下,可以使用af、bf、cf来区别命名

二、相对网页外层重要部分CSS样式命名

外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容(中部)
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部

三、注释

/* Header */
内容区
/* End Header */

四、常用的css命名

页面外围控制整体佈局宽度:wrapper
布局:layout
头部:header/head
底部:footer/foot
导航:nav    二级导航:subnav
侧边栏:sidebar      左侧边栏:leftsidebar    右侧边栏:rightsidebar
栏目:column
主要内容区:main       内容区:content/container
菜单:menu   子菜单:submenu
左右中:left right center
登录:login
登录条:loginbar
标志:logo
广告:banner
热点:hot
新闻:news
箭头:arr/arrow
下载:download
搜索:search
搜索输入框:searchInput
搜索结果:search_result
搜索条:searchbar
友情链接:friendlink
滚动:scroll
下拉:drop
下拉菜单:dropmenu
标签:tags
文章列表:list
提示信息:msg/message
摘要:summary
当前的: current
小技巧:tips
图标: icon
注释:note
栏目标题:title
加入:joinus
指南:guide
服务:service
注册:regsiter
状态:status
投票:vote
常见问题:faqs
编辑评论:editor_review
关键词:keyword
博客:blog
论坛:forum
合作伙伴:partne
网站信息:siteinfo
网站地图:sitemap
版权:copyright
商标:branding

下面是一些关于产品类的命名:

产品:products/product
产品价格:products_prices
产品描述:products_description
产品评价:products_review
最新产品:news_release
生产商:publisher
缩略图:screenshot

注意:

在命名时使用id还是class都可以,但我们最好遵循,主要的重要的特殊的最外层的盒子用id命名,其它都用class命名,同时考虑命名的css选择器在HTML中的可重用性。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!