CSS的书写规范和顺序

时间: 2019-09-06阅读: 25标签: 规范

关于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有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。



去掉小数点前的“0”



简写命名

很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!



16进制颜色代码缩写

有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。



连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。

2.不建议使用“_”下划线来命名CSS选择器,为什么呢?

  • 输入的时候少按一个shift键;
  • 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)
  • 能良好区分JavaScript变量命名(JS变量命名是用“_”)



不要随意使用Id

id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。



为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。


 

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


注释的写法:

 /* Header */
 内容区
 /* End 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


链接: http://www.fly63.com/article/detial/5800

分享一份大佬的MySQL数据库设计规范,值得收藏

MySQL数据库与 Oracle、 SQL Server 等数据库相比,有其内核上的优势与劣势。我们在使用MySQL数据库的时候需要遵循一定规范,扬长避短。无意中从github上看到一个大佬的MySQL数据库设计规范

Web前端开发规范手册

文件命名规则:文件名称统一用小写的英文字母、数字和下划线的组合。引文件统一使用index.htm index.html index.asp文件名(小写),图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质

为什么有的编程规范要求用 void 0 代替 undefined?

Undefined 类型表示未定义,它的类型只有一个值,就是 undefined。任何变量在被赋值前它的值都是 undefined,但是在 JavaScript 引擎中,undefined 是一个变量而非关键字。

HTML 规范未来还需要哪些新内容?

HTML5 规范在 2014 年正式发布。时至今日,虽然这一规范已经引入了许多新的 API、功能和改进,但许多开发人员已经在展望下一代 HTML 规范了。有些人还是不知道 HTML 标准是怎样制定出来的。具体来说,一些组织提出自己的模式和协议

一份完整的MySQL开发规范,进大厂必看!

所有数据库对象名称必须使用小写字母并用下划线分割;所有数据库对象名称禁止使用mysql保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来);数据库对象的命名要能做到见名识意

Css中bem书写规范

bem是基于组件的web开发方法。其思想是将用户界面分隔为独立的块,从而使开发复杂的UI界面变得更简单和快,且不需要粘贴复制便可复用现有代码。BEM由Block、Element、Modifier组成。选择器里用以下连接符扩展他们的关系:

前端模块化规范

JavaScript 发展初期,代码简单地堆积在一起,只要能顺利地从上往下一次执行即可。但随着网站越来越复杂,实现网站功能的 JavaScript 代码也越来越庞大,网页越来越像桌面程序,很多问题开始暴露出来,比如全局变量冲突

常用网页元素命名规范参

网页元素名称的规范性有助于团队内部成员的沟通,同时还能够提高后期的维护性,网页元素的命名主要是针对id和class进行的,针对网页元素的命名没有业界标准,但有一些大家公认的规则

前端开发Js变量命名规范

JavaScript作为前端开发从业人员必须掌握的3大基础知识中最重要的一环,也是平是接触时间最长、写得最多的。本文的出现相信能够解决大部分烦恼,让你轻松写出符合规范、易读、简短的代码

完整的MySQL规范

所有数据库对象名称必须使用小写字母并用下划线分割·所有数据库对象名称禁止使用mysql保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来)

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全