css命名规范

关于CSS的书写规范和顺序，是大部分前端er都必须要攻克的一门关卡，如果没有按照良好的CSS书写规范来写CSS代码，会影响代码的阅读体验。这里总结了一个CSS书写规范、CSS书写顺序供大家参考，这些是参考了国外一些文章以及我的个人经验总结出来，我想对写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,margin,font等等，这样精简代码同时又能提高用户的阅读体验。 　 　 　去掉小数点前的“0” 　 　 　简写命名 　很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！ 　 　 　16进制颜色代码缩写 　有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。 　 　 　连字符CSS选择器命名规范 　1

关于CSS的书写规范和顺序，是大部分前端er都必须要攻克的一门关卡，如果没有按照良好的CSS书写规范来写CSS代码，会影响代码的阅读体验。这里总结了一个CSS书写规范、CSS书写顺序供大家参考，这些是参考了国外一些文章以及我的个人经验总结出来，我想对写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,margin,font等等，这样精简代码同时又能提高用户的阅读体验。 　 　 　去掉小数点前的“0” 　 　 　简写命名 　很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！ 　 　 　16进制颜色代码缩写 　有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。 　 　 　连字符CSS选择器命名规范 　1

什么是html？html是超文本标记语言，超文本包含图片，文字，链接，视频，音频等，标记是指标签，所以叫超文本标记语言。 超文本元信息 　　元信息标签：所谓元信息，是指描述自身的信息，元信息类标签，就是html用于描述文档自身的一类标签。 　　它们通常出现在head标签中，一般不会在页面被显示出来（与此相对，其他标签，如语义类标签，描述的是业务）元信息多数情况下是给浏览器、搜索引擎等机器阅读的，有时候这些信息会在页面之外显示给用户，有时候则不会。 　　head：元信息容器 　　meta：元信息通用标签（name和http-equiv两种键） 　　base：页面的基准url（容易出错，不建议使用，通常也不会用） 　　title：文档标题 　　meta常用写法： 　　　　<meta charset=”utf-8” />：定义解析文档的格式，建议放第一行 　　　　<meta http-equiv=”content-type”content=”text/html;charset=utf-8” />：同时添加content-type这个http头，并且指定了http编码格式。 　　　　<metaname=”viewport”content=”width=device-width,initial-scale=1,minimum-scale=1,masimum-scale=1,user

常用的CSS命名规则 (一)、基本命名 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：11:43 2011-8-22 下载：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 栏目：column 页面外围控制整体布局宽度

CSS书写顺序 位置属性(position, top, right, z-index, display, float等) 大小(width, height, padding, margin) 文字系列(font, line-height, letter-spacing, color- text-align等) 背景(background, border等) 其他(animation, transition等) 大致内容命名 头：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 指南：guide 服务：service 注册：register 状态：status 投票：vote

（一）主体 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：leftright 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注释的写法: /*内容区*/　 Html注释的写法：<!--header头部-- > (三)id的命名: (1)页面结构　　 容器:container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：leftright

做为一个 web 前端工程师 ，每天接触 HTML 、 css 就像吃饭一样，但是作为一名合作、优秀的 web 前端工程师，对 DIV+CSS 命名还是有一定的规范的，本文整理了一份 web 前端开发中 DIV+CSS 各种命名规范。 Div+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 　　

书写规范 形成一定的书写规范，增强可读性，有利于后期的查询与修改。规范如下： body{ padding: 0; margin: 0; } .dd-header{ background: #003C78; width: 100%; height: 56px; padding:0 10px; display: flex; flex-direction: row; } 使用缩进来表明嵌套层次 文件编码为 utf-8 根据功能模块进行注释，方便日后维护 文件命名 好的文件命名，可以提高团队合作效率。 全局：global.css 全局样式为全站公用，为页面样式基础，页面中必须包含 结构：layout.css 页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中 私有：style.css 独立页面所使用的样式文件，页面中必须包含 模块：module.css 产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用 主题：themes.css 实现换肤功能时应用 补丁：mend.css 基于以上样式进行的私有化修补 其他：团队约定 命名规范 我们开发CSS+DIV网页（html）时候，比较困惑和纠结的事就是CSS命名，特别是新手不知道该如何命名，怎样命名才是规范的。命名需要注意以下几点： 规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _

在书写css样式的时候总是无意中就写乱了，无论是命名或者是样式的书写顺序，这里做一个总结，提醒自己在书写css的时候时刻注意，大家可以参考哈。 1. 样式属性顺序 单个样式规则下的属性在书写时，应按功能进行分组，组之间需要有一个空行。 同时要以Positioning Model > Box Model > Typographic > Visual 的顺序书写，提高代码的可读性。 Positioning Model 布局方式、位置，相关属性包括：position, top, z-index, display, float等 Box Model 盒模型，相关属性包括：width, height, padding, margin，border,overflow Typographic 文本排版，相关属性包括：font, line-height, text-align Visual 视觉外观，相关属性包括：color, background, list-style, transform, animation 2. CSS选择器命名规则 分类式命名法(在前端组件化下尤为重要) 布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！ 模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册等 元件（unit）（.u-）

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,margin,font等等，这样精简代码同时又能提高用户的阅读体验。 去掉小数点前的”0″ 简写命名 很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！ 16进制颜色代码缩写 有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。 连字符CSS选择器命名规范 1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用”_”下划线来命名CSS选择器，为什么呢？ 输入的时候少按一个shift键； 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的） 能良好区分JavaScript变量命名（JS变量命名是用”_”） 这里有一篇破折号与下划线的详细讨论，英文： 点击查看 中文篇： 点击查看 不要随意使用id id在JS是唯一的