[Coding Style] CSS coding style
CSS coding style
Note
结合实际工作中的规范和推荐大家使用的CSS书写规范、顺序这篇文章整合而成
Navigation
CSS 书写顺序
1. Position (position, top, right, z-index, display, float...)
2. Frame (width, height, margin, border)
3. Children (padding)
4. Content (font, line-height, letter-spacing, background, color, text-align...)
5. Other (animation, transition)
CSS 常用文件命名
主要的: main.css
基础: base.css
模块: module.css
通用: common.css
布局: layout.css
主题: theme.css
专栏: columns.css
文件: font.css
表单: form.css
补丁: mend.css
打印: print.css
PDF: pdf-helper.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
Suggestions
1. 使用“-”连接多个单词,比如 font-size
2. 使用16进制颜色,比如 color: #eebbcc;
3. 不随意使用id
4. 使用块注释,而不是行注释,防止有的压缩css文件不忽略注释 /* 注释 */
[Coding Style] CSS coding style的更多相关文章
- wordpress后台编辑如何显示定义的`style.css`样式
wordpress后台编辑如何显示定义的style.css样式 由于公司官网采用wordpress进行搭建,但是却又自己设计页面,无奈主题只能自行构建了,直接修改wordpress自带的主题进行修改. ...
- [css 揭秘]-css coding tips
css 揭秘之css coding tips demo(1) html 代码: <body> <section> <div class="demo1" ...
- Node聊天程序实例05:index.html和style.css
作者:vousiu 出处:http://www.cnblogs.com/vousiu 本实例参考自Mike Cantelon等人的<Node.js in Action>一书. index. ...
- 可否控制<link type=text/css rel=stylesheet href=style.css>
本篇文章主要介绍了"可否控制<link type=text/css rel=stylesheet href=style.css> ", 主要涉及到可否控制<lin ...
- CSS Transform Style
As CSS3 developing quickly, the transform style can be written conviently. I find that it is an inte ...
- CSS Counter Style试玩儿
2015年2月3日,CSS Counter Style level3成为了W3C的候选标准,是时候来一探究竟,看看强大魔力的@counter-style如何自定义list-style和counter. ...
- WordPress主题开发:style.css主题信息标记
在最简单的情况下,一个WordPress主题由两个文件构成: index.php ------------------主模版 style.css -------------------主样式表 而且s ...
- 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法
PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法 设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB ...
- [TypeStyle] Style CSS pseudo-classes using TypeStyle with $nest
TypeStyle is a very thin layer on top of CSS. In this lesson we show how to change styles based on p ...
随机推荐
- MyBatis构建sql时动态传入表名以及字段名
今天项目需要用到动态表名,找到这一篇文章,亲测可用 用了mybatis很长一段时间了,但是感觉用的都是比较基本的功能,很多mybatis相对ibatis的新功能都没怎么用过.比如其内置的注解功能之类的 ...
- [hdu4734]F(x)数位dp
题意:求0~f(b)中,有几个小于等于 f(a)的. 解题关键:数位dp #include<bits/stdc++.h> using namespace std; typedef long ...
- JVM优化(未完)
-XX:+PrintGC 在eclipse控制台打印简单的GC信息,与-verbose:gc一样 -verbose:gc 在eclipse控制台打印简单的GC信息 -XX:+PrintGCDetail ...
- Hadoop中Partition的定制
1.解析Partition Map的结果,会通过partition分发到Reducer上,Reducer做完Reduce操作后,通过OutputFormat,进行输出,下面我们就来分析参与这个过程的类 ...
- 菜鸟大充电啦啦啦啦啦:eclipse SDK 是什么啊
为什么下载是,没有单独的ecipse呢,,总是eclipse-sdk呢 而且还很大几百兆 回复1: Eclipse有好多专用名称,例如Eclipse SDK等.先说一下SDK, Eclipse Pro ...
- NIPT需要多大的数据量(reads number)?
NIPT需要多大的数据量(reads number)? 调研 2014 Noninvasive prenatal diagnosis of common aneuploidies by semicon ...
- hdu1083
#include"stdio.h" #include"string.h" #define N 305 int mark[N],link[N],map[N][N] ...
- Webpack 4教程 - 第八部分 使用prefetch和preload进行动态加载
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://wanago.io/2018/08/13/webpack-4-course-part ...
- sed命令使用
创建模板文件 # cat >> example.txt <<"EOF" TeSt Test test EOF 测试过程中均不使用-i参数避免模板文件内容被修 ...
- MySQL中的正则表达式
正则表达式是用正则表达式语言来建立 基本字符的匹配 .是正则表达式语言中的一个特殊的字符,它表示匹配任意一个字符 在LIKE和REGEXP之间有一个重要的差别,LIKE匹配整个列,如果被匹配的文本仅在 ...