CSS coding style

Note

结合实际工作中的规范和推荐大家使用的CSS书写规范、顺序这篇文章整合而成

Navigation

CSS 书写顺序

CSS 常用文件命名

CSS 常用命名规范

Suggestions

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的更多相关文章

  1. wordpress后台编辑如何显示定义的`style.css`样式

    wordpress后台编辑如何显示定义的style.css样式 由于公司官网采用wordpress进行搭建,但是却又自己设计页面,无奈主题只能自行构建了,直接修改wordpress自带的主题进行修改. ...

  2. [css 揭秘]-css coding tips

    css 揭秘之css coding tips demo(1) html 代码: <body> <section> <div class="demo1" ...

  3. Node聊天程序实例05:index.html和style.css

    作者:vousiu 出处:http://www.cnblogs.com/vousiu 本实例参考自Mike Cantelon等人的<Node.js in Action>一书. index. ...

  4. 可否控制<link type=text/css rel=stylesheet href=style.css>

    本篇文章主要介绍了"可否控制<link type=text/css rel=stylesheet href=style.css> ", 主要涉及到可否控制<lin ...

  5. CSS Transform Style

    As CSS3 developing quickly, the transform style can be written conviently. I find that it is an inte ...

  6. CSS Counter Style试玩儿

    2015年2月3日,CSS Counter Style level3成为了W3C的候选标准,是时候来一探究竟,看看强大魔力的@counter-style如何自定义list-style和counter. ...

  7. WordPress主题开发:style.css主题信息标记

    在最简单的情况下,一个WordPress主题由两个文件构成: index.php ------------------主模版 style.css -------------------主样式表 而且s ...

  8. 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法

    PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法 设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB ...

  9. [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 ...

随机推荐

  1. struts2 json返回试验

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC "-/ ...

  2. mongodb 分页(limit)

    db.COLLECTION_NAME.find().limit(NUMBER) db.mycol.find().limit() db.mycol.find({},{,_id:}).limit().sk ...

  3. Maven的pom实例

    该pom中包含了一些我认为会需要的东西,并且加了注释.可以根据需求适当删减. 包含了spring-mvc , junit,hibernate验证,json,apache-commons组件 还有 co ...

  4. 树莓派 Learning 002 装机后的必要操作 --- 02 解决中文问题

    树莓派 装机后的必要操作 - 解决中文问题 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 每一块树莓派,装机后都应该执行的步骤 刚装机后, ...

  5. unreal3启动流程总结

    一.启动代码所在工程为Launch(win32),可为所有同一codebase项目共享. 但共享方式很不智能,是通过在源文件中添加大量#if/else条件编译宏来实现,即各项目在自己的工程中添加[程序 ...

  6. java之Scanner

    参考http://how2j.cn/k/operator/operator-scanner/658.html#nowhere 需要用到从控制台输入数据,所以需要用到Scanner类 使用Scanner ...

  7. byte和int转换

    byte b1=1,b2=2,b3,b6; final byte b4=4,b5=6; b6=b4+b5; b3=(b1+b2); System.out.println(b3+b6); b3=b1+b ...

  8. Dapper 增删改查

    0.数据库及实体类 create table Users ( Id ,) primary key, Name nvarchar() not null, Password nvarchar() not ...

  9. 【原创】谈谈redis的热key问题如何解决

    引言 讲了几天的数据库系列的文章,大家一定看烦了,其实还没讲完...(以下省略一万字). 今天我们换换口味,来写redis方面的内容,谈谈热key问题如何解决. 其实热key问题说来也很简单,就是瞬间 ...

  10. kolla-build常用命令行详解

    --base-image 用于指定使用自己定制的基础镜像,不用官方网站的样例如下:kolla-build --base-image registry.access.redhat.com/rhel7/r ...