css命名规范[来自网络]

1、css命名规范:

头:header  
内容:content/container  
尾:footer  
导航:nav  
侧栏:sidebar
栏目:column  
页面外围控制整体布局宽度:wrapper  
左右中:left right center  
登录条:loginbar  
标志:logo  
抽奖:raffle
广告:banner  
页面主体:main  
热点:hot  
新闻:news
下载:download  
子导航:subnav  
菜单:menu  
子菜单:submenu  
搜索:search  
友情链接:friendlink  
页脚:footer  
版权:copyright  
滚动:scroll  
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态态:status
投票:vote
合作伙伴:partner

2、注释的写法:

/* Footer */
内容区
/* End Footer */

3、id的命名 :

3.1、页面结构

容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center

3.2、导航

导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary

3.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

4、class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }
.bottom { float:bottom; }

(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }

5、注意事项

1.一律小写;
2.尽量用英文;
3.尽量不缩写,除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局,版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

注:本文来自网络

时间: 2024-10-03 15:01:29

css命名规范[来自网络]的相关文章

css命名规范和书写规范

1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation, transition等) CSS书写规范 使用CSS缩写属性 CSS有些属性是可以缩写的,比如padding,mar

Html+CSS命名规范:

 Html+CSS命名规范: 1.样式命名: 2.样式文件命名: 数据库命名规范(Oracle表名长度不要超过30个字符,sql不限制): 1.数据库命名: 2.数据表命名:架构名+产品名+模块名.如:Report.Rept_ReportTemplateData 3.数据列命名:

CSS 命名规范及标题供参考与学习

一.CSS 命名规范 XHTML-CSS写作建议 所有的xhtml代码小写 属性的值一定要用双引号("")括起来,且一定要有值 每个标签都要有开始和结束,且要有正确的层次 空元素要有结束的tag或于开始的tag后加上"/" 表现与结构完全分离,代码中不涉及任何的表现元素,如style.font.bgColor.border等 <h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询. 给每一个表格和表单加上一个唯

#1 CSS命名规范

这个文章是之前学习的CSS的时候,为了规范CSS的命名,在网上找的一篇笔记. 觉得还不错,所以分享出来让大家看看. 原文传送门:http://www.divcss5.com/jiqiao/j4.shtml 网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 DIV CSS命名目录 命名规则说明 重要CSS命名 CSS命名参考表 命名技巧 我们开发CSS

CSS:命名规范心得分享

一个好的命名习惯(当然这里指的并不仅仅是CSS命名).不仅可以提高开发效率,而且有益于后期修改和维护. 假设我们当前使用的命名方式都是约定成俗的,所有人都是这样写,那么你去到一个新团队,或者别人来接手你的工作,都可以大大缩短去阅读别人代码的时间. 一个规范化的命名,不用说,只要想想就能体会到其中的好处了. CSS:命名规范心得分享 板块(Plate) 命名(Naming) 说明(Description)   主容器 wrapper 页面上最大的外部容器,如无特殊需求,不推荐使用 页面头部 hea

HTML5基础CSS命名规范讲解

相信有很多HTML5全栈开发的初学者对CSS的命名规则都是一头雾水,这可不是一个好的现象,那么下面就来给大家说一下HTML5全栈开发中的命名规范,希望可以帮到各位.. CSS命名规范 全局样式命名规范:global.css; 框架布局命名规范:layout.css; 字体样式命名规范:font.css; 链接样式命名规范:link.css; 打印样式命名规范:print.css; 常用类/ID命名规范 页眉规范:header 内容规范:content 容器规范:container 页脚规范:fo

简单好用的CSS命名规范

CSS命名规范 BEM命名法 BEM(Block, Element, Modifier)是由Yandex团队提出的一种前端命名规范.其核心思想是将页面拆分成一个个独立的富有语义的块(blocks),从而使得团队在开发复杂的项目变得高效,并且十分有利于代码复用,即便团队引入新成员,也容易维护. Block是块,比方说div.header,可以嵌套复用.更严格一点来说不能影响自身布局,最好不要设置margin和position,也不要使用元素选择器和ID选择器. Element是元素,比方说inpu

【html/css】html/css命名规范

无论做什么,规则总是最重要的.无规矩不成方圆,有了规矩,我们才能有规可循,有则可依,人与人之间才能正常的交流交往. 人人都有自己的命名习惯,不过,代码是需要交流的,当有些命名习惯仅只自己能看懂,甚至自己在过后都看不懂时,就成为了交流中的障碍了.所以,有一个规范的命名规则是很重要的.命名规则有很多,大家各取所需,这里介绍一下在html/css中一些约定俗成的命名规范,权作记录: 1.所有的命名最好都小写 2.属性的值一定要用双引号("")括起来,且一定要有值如class="di

CSS命名规范

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