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. Linux TCP通信例子

    TCP通信的C/S模型 ///server.c #include <sys/types.h> #include <sys/socket.h> #include <stdi ...

  2. Servlet包介绍

    ----------------siwuxie095                         首先到 Tomcat 的官网下载 Tomcat 的 API 帮助文档     Tomcat 官网: ...

  3. Python脚本打包为exe文件

    本文转载自http://www.open-open.com/lib/view/open1342675735745.html   把用Python写好的脚本,可以用pyinstaller打包成.exe文 ...

  4. 《精通Spring4.X企业应用开发实战》读后感第五章(基于Java类的配置)

  5. CODING 代码托管架构升级之路

    本文为 CODING 创始团队成员王振威在『CODING 技术小馆:上海站』的演讲实录. CODING 技术小馆,是由国内专业的一站式软件服务平台 CODING 主办的一系列技术沙龙.将邀请数位业内知 ...

  6. linux中制作动态库

    制作一个动态库我们可以使用gcc工具来制作一个动态库示例:自己制作一个动态库,库函数的功能是传递一个字符串并输出.第一步:需要准备3个文件:hello.h.hello.c.test.c.其中hello ...

  7. Spring入门第二十三课

    我们看基于XML配置的方式配置AOP 看代码: package logan.study.aop.impl; public interface ArithmeticCalculator { int ad ...

  8. 301ReidrectPages中重复记录导致的500 server error

    在Umbraco平台开发一个系统时,遇到一个问题,报错500 server error, system is currently unable to handle this request. 按下F1 ...

  9. 【创建maven-web项目-eclipse-jee-mars-2-win32-x86_64-jdk1.8】

    需要注意的是:创建的mavenweb项目是没有java源文件夹的需要手动添加: 创建项目完成以后,项目会报错,如下: 因为项目中没有添加servlet依赖解决jsp报错问题:添加依赖: <dep ...

  10. Cocos creator之javascript闭包

    .什么是闭包? 闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点: 1. 作为一个函数变量的一个引用,当函数返回 ...