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 版权： copyright　　 滚动： scroll　　 内容： content　　 标签页： tab 文章列表： list　　 提示信息： msg　　 小技巧： tips　　 栏目标题： title 加入： joinus　　 指南： guild　　 服务： service　　 注册： regsiter 状态： status　　 投票： vote　　 合作伙伴： partner ( 二 )css注释的写法 : 　　 /* Footer */ 　　内容区　　 /* End Footer */ Html 注释的写法 ： <!--header头部 -- > ( 三 )id的命名 : (1)

DIV+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 版权： copyright　　 滚动： scroll　　 内容： content　　 标签页： tab 文章列表： list　　 提示信息： msg　　 小技巧： tips　　 栏目标题： title 加入： joinus　　 指南： guild　　 服务： service　　 注册： regsiter 状态： status　　 投票： vote　　 合作伙伴： partner (二)注释的写法: 　　/* Footer */ 　　内容区 　　/* End Footer */ (三)id的命名: (1)页面结构 　　容器: container　　

常用的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 版权：copyright　　滚动：scroll　　内容：content　　标签页：tab 文章列表：list　　提示信息：msg　　小技巧：tips　　栏目标题：title 加入：joinus　　指南：guild　　服务：service　　注册：regsiter 状态：status　　投票：vote　　合作伙伴：partner (二)注释的写法: 　　/* Footer */ 　　内容区 　　/* End Footer */ (三)id的命名: (1)页面结构 　　容器: container　　页头：header　　内容：content/container 　　页面主体：main　　页尾：footer　　导航：nav 　　侧栏：sidebar　　栏目

BEM 基于组件方式的web开发方法，基本思想是将用户界面分成独立的模块。 Block（块）（通常指模块，组件） Block 是一个逻辑上和功能上独立的页面组件，等同于网页组件中的部件（等同于网页中的组件）。Block 封装了行为（Javascript）、模板、样式（CSS）和其他实现技术。独立状态的 Block 可供复用，并且促进项目开发和维护。 内容 模块名称：描述了它的目的（“它是什么？” —— 菜单或者按钮），而不是它的状态（“它看起来是什么样子？” —— 红色或者大的）。 模块不应该影响它所在的环境，这意味着你不应该为模块设置会影响到外部的形状（影响大小的 padding 或边框）和定位 你也不应该在使用 BEM 的时候使用 CSS 标签选择器和 ID 选择器 名称可以包含拉丁字母、数字、短划线 使用 嵌套关系 模块与模块之间可以彼此嵌套 你可以有任意级别的嵌套层次 < ! -- 'head' 模块 -- > < header class = "header" > < ! -- 嵌套 'logo' 模块 -- > < div class = "logo" > < / div > < ! -- 嵌套 'search-form' 模块 -- > < form class = "search-form" > < / form > < ! -- 嵌套 'nav' 模块 -- >

　　我们开发CSS+DIV网页（Xhtml）时候,比较困惑和纠结的事就是CSS命名，特别是新手不知道什么地方该如何命名，怎样命名才是好的方法。 　　命名规则说明： 　　1）、所有的命名最好都小写 　　2）、属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5" 　　3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整 　　4）、空元素要有结束的tag或于开始的tag后加上"/" 　　5）、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等 　　6）、定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。 　　7）、给每一个表格和表单加上一个唯一的、结构标记id 　　8）、给图片加上alt标签 　　9）、尽量使用英文命名原则 　　10）、尽量不缩写，除非一看就明白的单词 　　相对网页外层重要部分CSS样式命名： 　　外套wrap------------------用于最外层头部header----------------用于头部主要内容main------------用于主体内容（中部）左侧main-left-------------左侧布局右侧main-right-----------右侧布局导航条nav----------------

1.常用的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 版权：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

前端布局规范细则 一、命名规范： 1、基本要求： 1）文件编码统一使用 UTF-8 编码； 2）命名时以符合语义为主要参考指标，CSS属性书写规范，采用统一风格及命名方法； 3）结构清晰，层级关系明朗，以不超过三级为标准； 4）同一表现形式的样式要求可重复利用，模块组件类的样式要求可整体外部移植； 5）编写 CSS 的时候，应当避免使用CSS Hack，能不用则不用。 6）所有页面默认都针对Firefox 等最接近标准的浏览器进行设计，然后使用 IE 特有条件注释功能进行针对性修正。 7）请使用英文进行命名，尽量避免使用拼音。命名要求具有可读性，尽量避免使用缩写。命名虽然允许数字，但应尽量避免使用数字命名。 2、命名方法 要求采用统一的命名方法。常用命名方法有： 1）连写式命名法，如：helloworld 2）中线命名法，如：hello-world（目前采用此方法的较多，建议采用） 3）下划线命名法，如：hello_world 4）骆驼命名法，如：helloWorld 5）帕斯卡命名法，如：HelloWorld 6）其他方法。 3、样式文件命名规范 如： 全局的：global.css； 主要的：master.css； 布局、版面：layout.css； 专栏：columns.css； 文字：font.css； 打印样式：print.css； 主题：themes.css； 补丁

在任何一个项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展。由于Web项目开发的分散性、独立性、整合的交互性等，所以定制一套完整的约定和规则显得尤为重要。 第一节 CSS样式文件的命名 建立样式表文件时，分类编写样式到下列样式表文件中，并统一放在【CSS】文件夹里： 主要 main.css 文字样式 font.css 表格 table.css 主题 themes.css 打印 print.css 补丁 mend.css 在项目初期，会把不同类别的样式放于不同的 CSS文件，是为了CSS编写和调试的方便，在项目后期会为了网站性能上的考虑会整合不同的CSS文件到一个CSS文件，必要时可压缩。 第二节 CSS选择符的命名 所有选择符必须有小写英文字母或“_”下划线组成，样式名必须是表示该样式的大概含义（禁止出现如Div1、div2、Style1……），参考后面的“样式命名参考”。对CSS选择器的使用只允许派生选择器、类选择器和属性选择器，以及它们的组合使用，严禁使用ID选择器（ID是用于JavaScript的编写）。 如：li span {…}td.fancy {…}input[type="text"]{…} 当定义的样式名比较复杂时用下划线把层次分开，比如：dcrm_logo{ …} dcrm_logo_ico{…} 第三节

什么是Web语义化 Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用；另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器（如果访客有视障）能够读懂内容。 简单来说就是利于 SEO，便于阅读维护理解。 总结起来就是： 正确的标签做正确的事情 页面内容结构化 无CSS样子时也容易阅读，便于阅读维护和理解 便于浏览器、搜索引擎解析。 利于爬虫标记、利于SEO html 语义化标签 HTML为网页文档内容提供上下文结构和含义。对于HTML体系而言，Web语义化是指使用语义恰当的标签，使页面有良好的结构，让页面元素有含义，便于被浏览器、搜索引擎解析、利于SEO。通常我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。 代码示例： <html> <body> <article> <header> <h1>h1 - WEB 语义化</h1> </header> <nav> <ul> <li>nav1 - HTML语义化</li> <li>nav2 - CSS语义化</li> </ul> </nav> <section>

Web 前端开发规范手册 一、规范目的 1.1 概述 ..................................................................................................................................... 1 二、文件规范 2.1 文件命名规则.........................................................................................................................1 2.2 文件存放位置..........................................................................................................................2 2.3 css 书写规范..........................................................................................................................3 2.4 html书写规范...............