合理的避免使用ID
一般情况下ID不应该被应用于样式。
ID的样式不能被复用并且每个页面中你只能使用一次ID。
使用ID唯一有效的是确定网页或整个站点中的位置。
尽管如此,你应该始终考虑使用class,而不是id,除非只使用一次
另一个反对使用ID的观点是含有ID选择器权重很高。
CSS选择器中避免标签名
当构建选择器时应该使用清晰, 准确和有语义的class(类)名。不要使用标签选择器。 如果你只关心你的class(类)名
,而不是你的代码元素,这样会更容易维护。
如果你只使用具有实际意义的class(类)名,
并且不使用元素选择器,那么你只需要改变你的html标记,而不用改动你的CSS。
缩写属性
CSS提供了各种缩写属性(如 font 字体)应该尽可能使用,即使在只设置一个值的情况下。
使用缩写属性对于代码效率和可读性是有很有用的。
//不推荐
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
//推荐
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
0 和 单位
省略“0”值后面的单位。不要在0值后面使用单位,除非有值。
//不推荐
padding-bottom: 0px;
margin: 0em;
//推荐
padding-bottom: 0;
margin: 0;
十六进制表示法
在可能的情况下,使用3个字符的十六进制表示法。
颜色值也允许这样表示,
3个字符的十六进制表示法更简短。
始终使用小写的十六进制数字。
//不推荐
color: #FF33AA;
//推荐
color: #f3a;
声明顺序
这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性和可扫描重要。
作为最佳实践,我们应该遵循以下顺序(应该按照下表的顺序):
结构性属性:
1、display
2、position, left, top, right
3、overflow, float, clear
4、margin, padding
表现性属性:
1、background, border
2、font, text
CSS引号
属性选择器或属性值用双引号(""),而不是单引号('')括起来。
URI值(url())不要使用引号。
媒体查询位置
尽量将媒体查询的位置靠近他们相关的规则。不要将他们一起放到一个独立的样式文件中,或者丢在文档的最底部。这样做只会让大家以后更容易忘记他们。
Don't use @import
与<link>
相比,@import
较慢,增加额外的页面请求,并可能导致其他不可预见的问题。
<!--推荐-->
<link rel="stylesheet" href="core.css">
<!-- 不推荐 -->
<style>
@import url("more.css");
</style>
class 命名
保持 class 命名为全小写,可以使用中划线(不要使用下划线和 camelCase 命名)。中划线应该作为相关类的自然间断。(例如,.btn 和 .btn-danger)。
避免过度使用简写。.btn 可以很好地描述 button,但是 .s 不能代表任何元素。
class 的命名应该尽量短,也要尽量明确。
使用有意义的名称;使用结构化或者作用目标相关,而不是抽象的名称。
命名时使用最近的父节点或者父 class 作为前缀。
使用 .js-* 来表示行为(相对于样式),但是不要在 CSS 中包含这些 class。
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
如果不当或者补充请多多指教!