css命名规范
2016-02-13 10:50
483 查看
1.使用小写字母加中划线来命名css类和css文件
2.组织css文件
global.css 包括一些可以重用的基础性样式
layout.css 用来布局
ControllerID.css 每个控制器都有其相应的css文件比如PostController.php css为post.css
widget-WidgetClass.css小部件对应的css样式比如 widget-lastest-comment.css
FeatureName.css 大的特性可以有其专门的样式文件,比如markdown.css
其他必须的css文件,比如css frameworks
3.css class的命名
一些通用的样式可以用g-起头,比如,g-link-button{...}, 这样的一些样式可以放在global.css当中
每一个action的view文件都要有一个根容器并且根容器的命名对应view的路径,比如,
post/index.php
<div class="post-index">...view content here...</div>
所有的view相关的css都应被放进控制器自己的css样式文件中,其中的每一个样式声明都应该加上view css class的前缀,比如,.post-index .item{...}
小部件专属的class的命名和view中class命名雷同,比如,.widget-latest-comments .comment{}
4.包含css文件
需要压缩处理一下子,这样可以让浏览器缓存,加快网页打开的速度,下面是改写一下layout.php
5.jquery 选择器的写法与css类命名遵循相同的规则
2.组织css文件
global.css 包括一些可以重用的基础性样式
layout.css 用来布局
ControllerID.css 每个控制器都有其相应的css文件比如PostController.php css为post.css
widget-WidgetClass.css小部件对应的css样式比如 widget-lastest-comment.css
FeatureName.css 大的特性可以有其专门的样式文件,比如markdown.css
其他必须的css文件,比如css frameworks
3.css class的命名
一些通用的样式可以用g-起头,比如,g-link-button{...}, 这样的一些样式可以放在global.css当中
每一个action的view文件都要有一个根容器并且根容器的命名对应view的路径,比如,
post/index.php
<div class="post-index">...view content here...</div>
所有的view相关的css都应被放进控制器自己的css样式文件中,其中的每一个样式声明都应该加上view css class的前缀,比如,.post-index .item{...}
小部件专属的class的命名和view中class命名雷同,比如,.widget-latest-comments .comment{}
4.包含css文件
需要压缩处理一下子,这样可以让浏览器缓存,加快网页打开的速度,下面是改写一下layout.php
<head> ...... <?php if(Yii::app()->params['css.files.compressed']): ?> <link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->baseUrl.'/css/' . Yii::app()->params['css.files.compressed']; ?>" /> <?php else: ?> <?php foreach(Yii::app()->params['css.files'] as $css): ?> <link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->baseUrl.'/css/'.$css); ?>" /> <?php endforeach ?> <?php endif ?> </head>
5.jquery 选择器的写法与css类命名遵循相同的规则
相关文章推荐
- web CSS3伪类选择器 :nth-child()
- CSS:height: 100%失效原因,如何让它生效
- c#之CSS三种样式表
- 优化博客园Markdown样式(代码行号、版权信息、章节目录等)
- PagerIndicator主题样式修改
- 尺寸单位em,rem,vh,vw
- 【CSS笔记】CSS3美化复选框和单选框
- CSS手动改变DIV高宽
- css 表格
- 另一个好用的CSS Sprites工具(CSS雪碧)可在线引用
- #学习笔记#(41)CSS3画心
- css基本内容
- 了解HTML CSS选择器操作和特性
- CSS3新的特性
- 【CSS笔记】css3制作立体导航
- 【CSS笔记】使文字在一行显示,超出部分用省略号显示
- css三列布局
- 网页布局CSS初始化代码
- 网页中Logo的样式代码
- 根据设备视口宽度来更换样式表