div+css命名规则

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

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

在看了一些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中的可重用性。

时间: 10-13

div+css命名规则的相关文章

div+css命名规则-增强SEO

div+css命名规则-增强SEO 页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动:scroll页面主体:main内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title加入:joinus指南:guild服务:service热点:hot新闻:news下载:download注册:regsiter状态:status按

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容如下:

页头:header  如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法登录条:loginBar         标志:logo                侧栏:sideBar广告:banner              导航:nav                 子导航:subNav菜单:menu               子菜单:subMenu      搜索:search滚动:scroll               页

div+css命名规范大全

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率, 我们开发DIV+CSS网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明: 1).所有的命名最好都小写2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"3).每个标签都要有开始和结束,且要有正确的层次,

CSS命名规则规范整理

转载声明:原载:彬Go本文链接:http://blog.bingo929.com/css-coding-semantic-naming.html 在此,非常感谢该文章作者的分享,本文完全转载自上面链接,此处作为备份,方便查看使用. CSS命名规则规范整理 大家在写css的时候,经常会遇到关于命名的问题.页面上成百甚至上千的class或者id,我们就会越来越感到困扰. 所以,这样我们就很有必要整理自己的一套命名规范.这里我就说说我自己的命 大家在写css的时候,经常会遇到关于命名的问题.页面上成百

DIV+CSS命名规范-转载1

命名规则说明: 1).所有的命名最好都小写 2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5" 3).每个标签都要有开始和结束,且要有正确的层次,排版有规律工整 4).空元素要有结束的tag或于开始的tag后加上"/" 5).表现与结构完全分离,代码中不涉及任何的表现元素,如style.font.bgColor.border等 6).定义,应遵循从大到小的原则,体

[转] 常用的CSS命名规则

(一)常用的CSS命名规则  头:header  内容:content/container  尾:footer  导航:nav  侧栏:sidebar  栏目:column  页面外围控制整体布局宽度:wrapper  左右中:left right center  登录条:loginbar  标志:logo  广告:banner  页面主体:main  热点:hot  新闻:news  下载:download  子导航:subnav  菜单:menu  子菜单:submenu  搜索:searc

CSS 命名规则

随着CSS的发展,使用CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理. 在我前面的文章中讨论很多关于CSS的问题都可以通过使用一个适当的CSS策略来避免.在这篇文章里,我将着重于讨论使用一种方法或者一个命名规则所带来的好处. 这里有很多可供使用的前端方法和命名规则,每个都有自己的优缺点.在几乎所有的案例中CSS被分割成更易于管理的代码“块”.CSS的这种分割方式定义了每一种方法. 命名规则 一个可靠命名规则的重要性是不可忽视的.就像组织结构带来的好处一

div,css命名规范!

命名规则说明: 1).所有的命名最好都小写 2).属性的值一定要用双引号("")括起来,且一定要有值如class="pcss5",id="pcss5" 3).每个标签都要有开始和结束,且要有正确的层次,排版有规律工整 4).空元素要有结束的tag或于开始的tag后加上"/" 5).表现与结构完全分离,代码中不涉及任何的表现元素,如style.font.bgColor.border等 6).定义,应遵循从大到小的原则,体现文档的

css命名规则

头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:footer 版权:co

CSS命名规范(规则)常用的CSS命名规则

头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:footer 版权:co