说法一:

属性的书写顺序, 举个例子:

.hotel-content {
/* 定位 */
display: block;
position: absolute;
left: 0;
top: 0;
/* 盒模型 */
width: 50px;
height: 50px;
margin: 10px;
border: 1px solid black;
/ *其他* /
color: #efefef;
} 定位相关, 常见的有:display position left top float 等
盒模型相关, 常见的有:width height margin padding border 等
其他属性
按照这样的顺序书写可见提升浏览器渲染dom的性能

说法二:

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命名规则

  头: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

相关资料:

  • https://jingyan.baidu.com/article/4d58d541dae69a9dd4e9c09b.html
  • https://www.zhihu.com/question/19586885
  • https://www.cnblogs.com/liyunhua/p/4537058.html#top

【css】css规范的更多相关文章

  1. CSS命名规范

    DIV+CSS规范命名大全集合 前端人员必看CSS命名规范 整理: 文件名必须由小写字母.数字.中划线组成 ).所有的命名最好都小写,一律采用小写加中划线的方式,不允许使用大写字母或 _2).属性的值 ...

  2. CSS书写规范、命名规范、网易CSS框架NEC

    网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范:  CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...

  3. html和css书写规范

    HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式 ...

  4. html,css命名规范 (转)

    HTML+CSS命名规范总结 1.HTML部分 1.1添加必须的utf-8的字符集,并且使用HTML5的简洁 方式: <meta charset="utf-8"> 1. ...

  5. CSS书写规范

    一.CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列 ...

  6. 推荐大家使用的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  7. 分享给大家的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  8. CSS书写规范及顺序

    CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...

  9. web前端开发CSS命名规范参考

    做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...

  10. CSS 编码规范

    转自: https://segmentfault.com/a/1190000005046830 CSS书写格式 1.格式化代码 1.1文件 [建议]:CSS文件使用无BOM的UTF-8编码 1.2缩进 ...

随机推荐

  1. Linux下Python安装完成后如何使用pip命令

    一.很多读者Python安装完成之后,想要下载相关的包,例如:numpy.pandas等Python中这些基础的包,但是,发现pip根本用不了,主要表现在一下几种情况: 二.出现这种情况其实并不意外, ...

  2. js 中prototype运用(数组)

    转自:http://www.cnblogs.com/chiname/articles/216517.html(侵删)  /*   *  方法:Array.removeAt(Index)   *  功能 ...

  3. es6 语法 (正则扩展)

    { //es5中 let regex = new RegExp('xyz', 'i'); let regex2 = new RegExp(/xyz/i); console.log(regex.test ...

  4. node+pm2+express+mysql+sequelize来搭建网站和写接口

    前面的话:在这里已经提到了安装node的方法,node是自带npm的.我在技术中会用es6去编写,然后下面会分别介绍node.pm2.express.mysql.sequelize.有少部分是摘抄大佬 ...

  5. 个人练习:使用HTML+CSS制作二级菜单

    最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...

  6. 25.Odoo产品分析 (三) – 人力资源板块(6) – 工资表(1)

    查看Odoo产品分析系列--目录 工资表不在"应用"中,在搜索该模块时需要将默认的"应用"过滤删除掉.  安装工资表后,出现工资单菜单:  1. 薪资规则类别 ...

  7. OkHttpUtils简单的网络去解析使用

    先添加依赖: implementation 'com.google.code.gson:gson:2.2.4' implementation 'com.zhy:okhttputils:2.0.0' 网 ...

  8. java集合继承关系图

    面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,就对对象进行存储,集合就是存储对象最常用的一种方式. 数组虽然也可以存储对象,但长度是固定的:集合长度是可变的,数组中可以存储基 ...

  9. git 入门教程之备忘录[译]

    备忘录[译] 创建 | Create 克隆一个已存在的仓库 | Clone an existing repository git clone git@github.com:snowdreams1006 ...

  10. (网页)jquery-qrcode.js生成二维码

    基础用法 <div id="qrcode"></div> <script type="text/javascript"> n ...