css书写顺序和常用命名推荐
写代码的时候有一个好的规范和顺序能够帮你节省很多时间。下文将推荐相关CSS书写顺序和规范的一些方法。这个文档将会整理进前端规范文档中,如果你有更好的意见,不妨留言告知我们。
CSS书写顺序
该代码来自于互联网,最初好像是Mozilla的网站上。
1. Display & Flow(显示与流)
2. Positioning(位置)
3. Dimensions(尺寸)
4. Padding, Borders,Margins,Outline(填充、边界、边缘、轮廓)
5. Typographic Styles (排版样式)
6. Backgrounds (背景)
7. Opacity, Cursors, Generated Content(不透明度、光标、生成内容)
例子:
el {
display: ;
visibility: ;
float: ;
clear: ; position: ;
top: ;
right: ;
bottom: ;
left: ;
z-index: ; width: ;
min-width: ;
max-width: ;
height: ;
min-height: ;
max-height: ;
overflow: ; padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ; border: ;
border-top: ;
border-right: ;
border-bottom: ;
border-left: ; border-width: ;
border-top-width: ;
border-right-width: ;
border-bottom-width: ;
border-left-width: ; border-style: ;
border-top-style: ;
border-right-style: ;
border-bottom-style: ;
border-left-style: ; border-color: ;
border-top-color: ;
border-right-color: ;
border-bottom-color: ;
border-left-color: ; margin: ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ; outline: ; list-style: ; table-layout: ;
caption-side: ;
border-collapse: ;
border-spacing: ;
empty-cells: ; font: ;
font-family: ;
font-size: ;
line-height: ;
font-weight: ;
text-align: ;
text-indent: ;
text-transform: ;
text-decoration: ;
letter-spacing: ;
word-spacing: ;
white-space: ;
vertical-align: ;
color: ; background: ;
background-color: ;
background-image: ;
background-repeat: ;
background-position: ; opacity: ; cursor: ; content: ;
quotes: ;
}
CSS书写规范
使用CSS缩写属性
CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。
简写命名
很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!
16进制颜色代码缩写
有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。
连字符CSS选择器命名规范
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器,为什么呢?
- 输入的时候少按一个shift键;
- 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)
- 能良好区分JavaScript变量命名(JS变量命名是用“_”)
这里有一篇破折号与下划线的详细讨论,英文:点击查看 中文篇:点击查看
不要随意使用id
id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。
为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。
常用的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
标签:tags
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
注释的写法:
/* Header */
id的命名:
1)页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体佈局宽度:wrapper
左右中:left right center
(2)导航
导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:register
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标籤页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright
注意事项::
1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写,除非一看就明白的单词。
CSS样式表文件命名
主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
css书写顺序和常用命名推荐的更多相关文章
- CSS书写顺序
CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, margin, padding)3. ...
- 面试准备 css 书写顺序及原理
书写顺序 (1)定位属性:position display float left top right bottom overflow clear z-index (2)自身属性: ...
- CSS书写顺序提高可读性
属性书写顺序 [建议] 同一 rule set 下的属性在书写时,应按功能进行分组,并以 Formatting Model(布局方式.位置) > Box Model(尺寸) > Typog ...
- 推荐的 CSS 书写顺序
//显示属性 display list-style position float clear //自身属性 width height margin padding border background ...
- Mozilla推荐的CSS书写顺序
//显示属性displaylist-stylepositionfloatclear //自身属性widthheightmarginpaddingborderbackground //文本属性color ...
- 关于CSS书写规范、顺序
关于CSS的书写规范和顺序,是大部分前端er都必须要攻克的一门关卡,如果没有按照良好的CSS书写规范来写CSS代码,会影响代码的阅读体验.这里总结了一个CSS书写规范.CSS书写顺序供大家参考,这些是 ...
- 一些css书写的小技巧
一.css顺序 首先声明,浏览器读取css的方式是从上到下的.我们一般书写css只要元素具备这些属性就会达到我们预期的效果,但是这会给以后的维护和浏览器的渲染效率带来一定的影响,那么该怎么书写css的 ...
- Mozilla推荐的CSS属性书写顺序及命名规则
传说中的Mozilla推荐 /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * ...
- web前端开发企业级CSS常用命名,书写规范总结
1.常用命名 标题: title 摘要: summary 箭头: arrow 商标: label 网站标志: logo 转角/圆角: corner 横幅广告: banner 子菜单: subMenu ...
随机推荐
- Android学习Tabhost、gallery、listview、imageswitcher
Tabhost控件又称分页控件,在很多的开发语言中都存在.它可以拥有多个标签页,每个标签页可以拥有不同的内容.android中,一个标签页可以放 一个view或者一个activity.TabHost是 ...
- SQL————高级查询
高级查询 --连接查询 select * from 表1,表2 ————形成笛卡尔积 select * from 表1,表2 where 表1.主键=表2.外键 ————主外键位置可以互换 --jo ...
- SQL Server 事务嵌套
示例代码: DECLARE @TranCounter INT; SET @TranCounter = @@TRANCOUNT; -- Procedure called when there is -- ...
- 03JS高级关于为空的变量判断
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- DOM常见属性及用法
1:innerHTML.outerHTML.innerText.outerText innerHTML: 设置或获取位于对象起始和结束标签内的HTML. outerHTML: 设置或获取对象及其内容的 ...
- 各种Adapter的用法
同样是一个ListView,可以用不同的Adapter让它显示出来,比如说最常用的ArrayAdapter,SimpleAdapter,SimpleCursorAdapter,以及重写BaseAdap ...
- 关于在页面上执行sql语句
在页面上执行sql语句,首先在页面上顶一个文本域,让用户输入需要执行的sql语句. html代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...
- Git 详细命令集
初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file>,注意,可反复多次使用,添加多个文件: 第二步,使用命令git ...
- 使用scrapy写好爬虫进行工作的时候,遇到错误及解决方法
如图中所标出的,提示参数的问题 解决办法: spider目录下的 爬虫文件内容做些更改: 出现报错的文件内容: from scrapy.spiderfrom scrapy.selector impor ...
- python 爬虫时遇到问题及解决
源代码: #unicoding=utf-8import reimport urllib def gethtml(url): html=urllib.urlopen(url) page=html.rea ...