原作者信息

  作者:词晖

  链接:http://www.zhihu.com/question/19586885/answer/48933504

  来源:知乎

  著作权归原作者所有,转载请联系原作者获得授权。

书写顺序

  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等)

<img src="https://pic2.zhimg.com/5a67fa4dab92c018abfd97e4ab286ac9_b.jpg" data-rawwidth="500" data-rawheight="250" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic2.zhimg.com/5a67fa4dab92c018abfd97e4ab286ac9_r.jpg">

  

CSS书写规范使用CSS缩写属性

  CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。

<img src="https://pic3.zhimg.com/2166c1fb168908a5858998eab2d309aa_b.jpg" data-rawwidth="500" data-rawheight="250" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic3.zhimg.com/2166c1fb168908a5858998eab2d309aa_r.jpg">

  

  去掉小数点前的“0”

<img src="https://pic1.zhimg.com/ea65b1c1c00c792866a670e9d66161a8_b.jpg" data-rawwidth="500" data-rawheight="250" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic1.zhimg.com/ea65b1c1c00c792866a670e9d66161a8_r.jpg">

  

  简写命名

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

<img src="https://pic3.zhimg.com/53ddaefb44a6a8ce5b54de9f15466fca_b.jpg" data-rawwidth="500" data-rawheight="250" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic3.zhimg.com/53ddaefb44a6a8ce5b54de9f15466fca_r.jpg">

  

  16进制颜色代码缩写

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

<img src="https://pic3.zhimg.com/46bf23e08a7195ec7091217bb5c667d6_b.jpg" data-rawwidth="500" data-rawheight="250" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic3.zhimg.com/46bf23e08a7195ec7091217bb5c667d6_r.jpg">

  

连字符CSS选择器命名规范

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

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

  输入的时候少按一个shift键;

  浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)

  能良好区分JavaScript变量命名(JS变量命名是用“_”)

<img src="https://pic2.zhimg.com/45dddce1b5295a7c09f2380900dce8d1_b.jpg" data-rawwidth="500" data-rawheight="250" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic2.zhimg.com/45dddce1b5295a7c09f2380900dce8d1_r.jpg">

  

  不要随意使用Id

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

<img src="https://pic4.zhimg.com/951bee68367f559a1fd37db3d242e59f_b.jpg" data-rawwidth="500" data-rawheight="250" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic4.zhimg.com/951bee68367f559a1fd37db3d242e59f_r.jpg">

  

  为选择器添加状态前缀

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

<img src="https://pic4.zhimg.com/d81807b01ec5d710debe3f0b4191ae2f_b.jpg" data-rawwidth="500" data-rawheight="250" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic4.zhimg.com/d81807b01ec5d710debe3f0b4191ae2f_r.jpg">

  

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

  文章内容为转载,原作者见顶部信息

前端基础系列——CSS规范(文章内容为转载)的更多相关文章

  1. 知识记录——CSS规范(文章内容为转载)

    原作者信息 作者:词晖 链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归原作者所有,转载请联系原作者获得授权. ...

  2. 前端基础:CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  3. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  4. 2019前端面试系列——CSS面试题

    盒模型 /* 红色区域的大小是多少?200 - 20*2 - 20*2 = 120 */ .box { width: 200px; height: 200px; padding: 20px; marg ...

  5. 02 前端基础之CSS

    目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 ...

  6. 前端基础之---css

    css  介绍 css 规则有两个主要的部分构成 : 选择器  , 以及一条或多条声明. 现在的互联网前端分为三层 : ● HTML :超文本标签机语言,从语义的角度描述页面结构. ● CSS : 层 ...

  7. Web前端基础(4):CSS(一)

    1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...

  8. 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(一)

    品优购项目(一) 目标: 能会引入ico图标 能简单看懂网站优化的三大标签 能使用字体图标 ( 重点 ) 能说出我们css属性书写顺序 1. 品优购项目介绍 项目名称:品优购 项目描述:品优购是一个电 ...

  9. 前端基础之CSS(1)

    1.css3的新特性有哪些 (1)CSS3选择器(基本.属性.伪类具体见下) (2)CSS3边框与圆角 圆角border-radius 属性:border-top-left-radius 左上角 bo ...

随机推荐

  1. [原][Android]All WebView methods must be called on the same thread.

    问题 webView调用JS出错. class TestJS {         ......         public TestJS(){         }                   ...

  2. 自编译安装nginx

    1. 下载nginx,并解压 http://nginx.org/ 2. 下载health check模块 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 1 ...

  3. tRNAscan-SE

    tRNAscan-SE是一款可以在基因组上扫描tRNA的序列,也就是说你给定一组基因序列(fasta数据格式),可以用这个软件去预测这个序列是不是tRNA.具体的实现原理,我不搞生物,所以也就不太明白 ...

  4. dataStructure@ Check if a directed graph has cycles

    #include<iostream> #include<cstdio> #include<cstring> #include<limits> #incl ...

  5. 八成Java开发者解答不了的问题

    统计数据来自Java“死亡”竞赛——一个针对开发者的迷你测验 几个月前,我们在一个小型网站上发布了一个称为Java“死亡竞赛”的新项目.测验发布后,超过20000位开发者参加了测验.网站以20道关于J ...

  6. delphi 常用属性+方法+事件+代码+函数

    内容居中(属性) alignment->tacenter mome控件 禁用最大化(属性) 窗体-> BorderIcons属性-> biMaximize-> False 让鼠 ...

  7. React Native学习笔记-1:JSC profiler is not supported.(转载)

    运行react-native中Example下的UIEXPLORER Project 遇到虾面报错: 2016-03-21 14:12:18.941 [trace][tid:com.facebook. ...

  8. 获利能力分析COPA的BAPI:BAPI_COPAACTUALS_POSTCOSTDATA 通过增强返回凭证号

    用这个BAPI:BAPI_COPAACTUALS_POSTCOSTDATA 记录销售成本的时候,发现不能return生产的co凭证号,利用内存应该是最好的方法. SCN上的帖子:https://blo ...

  9. Gitbook 使用入门

    GitBook 是一个基于 Node.js 的命令行工具,可使用 Github/Git 和 Markdown 来制作精美的电子书. 本书将简单介绍如何安装.编写.生成.发布一本在线图书. http:/ ...

  10. 更改OS序列号(slmgr)

    slmgr /ipk 489j-abc-def-hij-mnn slmgr /skms 8.8.8.8:1688 slmgr /ato