css命名规范
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css命名规范相关的知识，希望对你有一定的参考价值。
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
<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类命名遵循相同的规则
以上是关于css命名规范的主要内容，如果未能解决你的问题，请参考以下文章
资讯 | CSS 命名规范，加速你的代码调试；神奇“Bug”——小范围深入 HTTP 协议；深度学习教程；进阶UI：一维分析法