什么是组织CSS规则的最佳方式?

前端之家收集整理的这篇文章主要介绍了什么是组织CSS规则的最佳方式?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
什么策略可以帮助您跟踪大量的CSS规则?如何组织文件代码块和规则?

解决方法

对于一个大文件的CSS规则,我会组织它在这种方式

>首先提供任何复位CSS规则
>提供任何一般/通用规则(例如p {color:#553423;})
>将剩余的文档按页面的部分分割
>将每条规则放在一条线上,一般规则后跟更具体的规则
>按字母顺序排列每个规则中的选择器

例:

/*****
/*  ~masthead
/*****

#masthead {background-color: #cc00ff; color: #fff; width: 950px; }
#masthead h1 { background: transparent url(logo.png) no-repeat; text-indent: -9000px; width: 200px; }

/*****
/*  ~content
/*****

#content { background-color: #fedefd; margin:0; width: 357px; }
#content h1 { font-size: 120%; font-weight: bold; margin: 50px 20px 50px 70px; }
#content p em { color: magenta; }

这样你可以

>轻松搜索某个部分(搜索〜masthead,您位于该部分的顶部)>轻松地扫描一个部分的所有规则,以确定某事是否被覆盖>即使在长线,也容易调整规则。字母顺序选择器确保“颜色”不会在同一规则中出现两次

猜你在找的CSS相关文章