[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 ...
随机推荐
- Asp.net Core学习笔记
之前记在github上的,现在搬运过来 变化还是很大的,感觉和Nodejs有点类似,比如中间件的使用 ,努力学习ing... 优点 不依赖IIS 开源和跨平台 中间件支持 性能优化 无所不在的依赖注入 ...
- Ubuntu 切换root用户是时出现su Authentication failure
su root 时出现错误su Authentication failure 原因是没有给root用户设置密码 sudo passwd root
- [转]VS 2013 未找到与约束contractname Microsoft.VisualStudio.Utilities.IContentTypeRegistryService...匹配的导出
前几天,将Visual studio 2013 update 3 升级到了update 5.打开原来的解决方案,出现了 未找到与约束 contractname Microsoft.VisualStud ...
- Java探索之旅(18)——多线程(2)
1 线程协调 目的对各线程进行控制,保证各自执行的任务有条不紊且有序并行计算.尤其是在共享资源或者数据情况下. 1.1 易变volatile cache技术虽然提高了访问数据的效率,但是有可能导致主存 ...
- oracle上课 学习2 oracle 游标 存储过程 有用
1.1． 训练描述 使用游标,打印emp中20号部门的所有员工的信息 操作步骤答案 declare cursor c_emp is select * from emp where deptno=10 ...
- Ubuntu 解决：当执行`sudo apt-get update`命令时 出现的 “apt-get 404 Not Found Package Repository Errors” 问题
Ubuntu 解决:当执行sudo apt-get update或者sudo apt-get install命令是出现的 "apt-get 404 Not Found Package Rep ...
- ubuntu下apache2的cgi-bin中以root权限运行程序
一,安装apache2 sudo apt-get install apache2 二.配置cgi-bin sudo chmod 777 /var/www/html sudo vim /etc/apac ...
- MapperScan的工作，Spring-Mybatis怎么自动getMapper
@MapperScan @Import(MapperScannerRegistrar.class) @Repeatable(MapperScans.class) public @interface M ...
- 微信小程地图片未加载成功的情况 Failed to load local image resource
在开发小程序的时候,发现在加载图片时并没有异常,但是后台却报错了. 例如以下我的一段代码: <view class="useage2 "> <image src= ...
- return die exit 常用
die()停止程序运行,输出内容exit是停止程序运行,不输出内容return是返回值die是遇到错误才停止exit是直接停止,并且不运行后续代码,exit()可以显示内容.return就是纯粹的返回 ...