前端基础系列——CSS规范(文章内容为转载)
原作者信息
作者:词晖
链接: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规范(文章内容为转载)的更多相关文章
- 知识记录——CSS规范(文章内容为转载)
原作者信息 作者:词晖 链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归原作者所有,转载请联系原作者获得授权. ...
- 前端基础:CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
- 前端第二篇---前端基础之CSS
前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading ...
- 2019前端面试系列——CSS面试题
盒模型 /* 红色区域的大小是多少?200 - 20*2 - 20*2 = 120 */ .box { width: 200px; height: 200px; padding: 20px; marg ...
- 02 前端基础之CSS
目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 ...
- 前端基础之---css
css 介绍 css 规则有两个主要的部分构成 : 选择器 , 以及一条或多条声明. 现在的互联网前端分为三层 : ● HTML :超文本标签机语言,从语义的角度描述页面结构. ● CSS : 层 ...
- Web前端基础(4):CSS(一)
1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...
- 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(一)
品优购项目(一) 目标: 能会引入ico图标 能简单看懂网站优化的三大标签 能使用字体图标 ( 重点 ) 能说出我们css属性书写顺序 1. 品优购项目介绍 项目名称:品优购 项目描述:品优购是一个电 ...
- 前端基础之CSS(1)
1.css3的新特性有哪些 (1)CSS3选择器(基本.属性.伪类具体见下) (2)CSS3边框与圆角 圆角border-radius 属性:border-top-left-radius 左上角 bo ...
随机推荐
- [原][Android]All WebView methods must be called on the same thread.
问题 webView调用JS出错. class TestJS { ...... public TestJS(){ } ...
- 自编译安装nginx
1. 下载nginx,并解压 http://nginx.org/ 2. 下载health check模块 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 1 ...
- tRNAscan-SE
tRNAscan-SE是一款可以在基因组上扫描tRNA的序列,也就是说你给定一组基因序列(fasta数据格式),可以用这个软件去预测这个序列是不是tRNA.具体的实现原理,我不搞生物,所以也就不太明白 ...
- dataStructure@ Check if a directed graph has cycles
#include<iostream> #include<cstdio> #include<cstring> #include<limits> #incl ...
- 八成Java开发者解答不了的问题
统计数据来自Java“死亡”竞赛——一个针对开发者的迷你测验 几个月前,我们在一个小型网站上发布了一个称为Java“死亡竞赛”的新项目.测验发布后,超过20000位开发者参加了测验.网站以20道关于J ...
- delphi 常用属性+方法+事件+代码+函数
内容居中(属性) alignment->tacenter mome控件 禁用最大化(属性) 窗体-> BorderIcons属性-> biMaximize-> False 让鼠 ...
- React Native学习笔记-1:JSC profiler is not supported.(转载)
运行react-native中Example下的UIEXPLORER Project 遇到虾面报错: 2016-03-21 14:12:18.941 [trace][tid:com.facebook. ...
- 获利能力分析COPA的BAPI:BAPI_COPAACTUALS_POSTCOSTDATA 通过增强返回凭证号
用这个BAPI:BAPI_COPAACTUALS_POSTCOSTDATA 记录销售成本的时候,发现不能return生产的co凭证号,利用内存应该是最好的方法. SCN上的帖子:https://blo ...
- Gitbook 使用入门
GitBook 是一个基于 Node.js 的命令行工具,可使用 Github/Git 和 Markdown 来制作精美的电子书. 本书将简单介绍如何安装.编写.生成.发布一本在线图书. http:/ ...
- 更改OS序列号(slmgr)
slmgr /ipk 489j-abc-def-hij-mnn slmgr /skms 8.8.8.8:1688 slmgr /ato