CSS最佳实践:为今后的项目制作空白CSS模板文件

css-模板

如果你曾经收藏过许多关于CSS的最佳实践但还没开始利用它们,那么这篇文章将帮助你制作一个很好且很有组织的CSS文件来应用于一些CSS最佳实践。在这里我将为为我的下一个项目制作一个基本的CSS模板文件。使用标准的重设(Reset)方法,定义一些基本的方便的类,命名一些常见的页面区域等…

您还可以参考以下前端开发/CSS相关资源:
目前比较全的CSS重设(reset)方法总结
使用CSS创建三列固定布局结构
精选15个国外CSS框架
CSS代码命名惯例语义化的方法
整理及优化CSS代码的7个原则

在开始之前,创建一个新建文件夹并将它命名为”styles”(您也可以命名自己喜欢的名字),然后在该文件夹下创建两个文件分别命名为“reset.css” 和 “style.css”。现在你的文件夹结构不出意外的话应该是这样的:

–root
|
styles
– reset.css
– style.css
|

1-单独使用一个全局CSS重设方法

我以Eric Meyer的重设为基础。只是去掉了其中的“ins”, “del”和 “table”,因为我实在是很少使用它们,因为某些原因又重新定义了“strong”“em”,我知道您也许会有自己的方式,所以您也可以自由为自己的文件定义。写完CSS重设后,将其存储为”reset.css”。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: ”;
content: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}

在这个重设文件里我去掉了“body”样式,因为通常我们在不同的项目中都会定义不同的”body”样式,所以我们将它放在style.css文件中。

2-在顶部为样式表添加描述注释

现在我们打开style.css来开始写一些基本的样式。在创建一个新样式文件(style.css)后,第一件事应该是在文件顶部写一些结构性的注释,用来描述一些样式的细节,比如版本、作者、作者的详细联系方式等,这将帮助你和其他前端开发人员使用该文件。描述细节应当包括像作者姓名、版本和提供更多信息的URL地址。我比较喜欢WordPress格式,因为它比较广泛。

/*
主题名称: 玫瑰主题
URI: the-theme’s-homepage
描述: a-brief-description
作者: 您的姓名
作者 URI: 您的-URI
模板: 在这里可以提示它的父级模板
版本: 版本号

彬Go-集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
网址:http://blog.bingo929.com/
*/

3-定义便于搜索的目录表

现在,我们来一起定义我们样式的目录表。定义TOC能帮助其他人甚至自己更容易与阅读和理解代码。也许您会觉得这个没什么必要,但请相信我!

首先让我们看看它应当是什么样子的:

[目录表]

0- Reset
1- Global
2- Links
3- Headings
4- Header
5- Navigation
6- Middle
7- Forms
8- Extras
9- Footer

正如您看到的,我们将目录表从0到9分成10部分。

  • TOC非常简单以至于它不会花费您超过1分钟的时间。
  • 您不用为每个项目定义不同的TOC。
  • 命名的使用非常普遍,所以可以适合模本的任何部分。
  • 不使用动态的#ID和.class。
  • 它并不大所以不会占用很多Kbytes。
  • 顺序的数字很有用,用途请往下看。

4-使用注释将每个部分隔开并使用一个=标记

请看一下样式,在0部分我将之前的重设样式表reset.css导入。

/* =0 Reset
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
@import url(‘reset.css’);
/* =1 Global
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =2 Links
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =3 Headings
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =4 Header
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =5 Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =6 Middle
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =7 Form
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =8 Extra
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =9 Footer
–––––––––––––––––––––––––––––––––––––––––––––––––––*/

在每个部分的分区注释中使用=标记,可以帮助您和您的团队其他成员快速找到需要的代码。大家都知道,在CSS样式中的声明几乎是不会使用等号的,所以我们可以使用等号来帮助搜索。比如你想寻找表单的相关样式代码,可以先查看目录表中表单对应的数字,然后搜索”=7″便可以快速跳转到表单的相关代码区域。

5-定义最常用的类

其实有一些类是我们要经常使用的,那我们为什么不一次性把它们都定义好呢?现在正是时候!我添加了一些个人比较喜欢的,当然您也可以按照自己的喜好进行增删改。将它们定义在“=1 Global”下。

我还把body选择器定义在了Global中。

注:一下定义类仅仅是比较简单的一些。

/* =1 Global
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
body {
line-height: 1;
font: normal 12px Arial, Helvetica, sans-serif;
vertical-align: top;
background: #fff;
color: #000;
}
.right {
float: right;
}
.left {
float: left;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-center {
text-align:center;
}
.justify {
text-align:justify;
}
.hide {
display: none;
}
.clear {
clear: both;
}
.bold {
font-weight:bold;
}
.italic {
font-style:italic;
}
.underline {
border-bottom:1px solid;
}
.highlight {
background:#ffc;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft {
float:left;
margin:4px 10px 4px 0;
}
img.alignright {
float:right;
margin:4px 0 4px 10px;
}

.clearfix:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}

6-为链接和标题定义样式

最后,我们来定义适当的链接和标题的样式,因为他们在任何项目中都是必需的。如果你在制作某个网页,你不可能不是用它们。

/* =2 Links
––––––––––––––––––––––––––––––––––––––––––––––––––*/
a:link, a:visited {
color: #333;
}
a:hover {
color: #111;
}
a:active {
color: #111;
}
/* =3 Headings
––––––––––––––––––––––––––––––––––––––––––––––––––*/
h1 {
font: bold 2em “Times New Roman”, Times, serif;
}
h2 {
font: bold 1.5em “Times New Roman”, Times, serif;
}
h3 {
font: bold 1.2em Arial, Geneva, Helvetica, sans-serif;
}
h4 {
font: bold 1em Arial, Geneva, Helvetica, sans-serif;
}
h5 {
font: bold 0.9em Arial, Geneva, Helvetica, sans-serif;
}

style.css模板的最终代码

/*
主题名称: 玫瑰主题
URI: the-theme’s-homepage
描述: a-brief-description
作者: 您的姓名
作者 URI: 您的-URI
模板: 在这里可以提示它的父级模板
版本: 版本号

彬Go-集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
网址: http://blog.bingo929.com/

[目录表]

0- Reset
1- Global
2- Links
3- Headings
4- Header
5- Navigation
6- Middle
7- Forms
8- Extras
9- Footer

*/

/* =0 Reset
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
@import url(‘reset.css’);
/* =1 Global
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
body {
line-height: 1;
font: normal 12px Arial, Helvetica, sans-serif;
vertical-align: top;
background: #fff;
color: #000;
}
.right {
float: right;
}
.left {
float: left;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-center {
text-align:center;
}
.justify {
text-align:justify;
}
.hide {
display: none;
}
.clear {
clear: both;
}
.bold {
font-weight:bold;
}
.italic {
font-style:italic;
}
.underline {
border-bottom:1px solid;
}
.highlight {
background:#ffc;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft {
float:left;
margin:4px 10px 4px 0;
}
img.alignright {
float:right;
margin:4px 0 4px 10px;
}

.clearfix:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
/* =2 Links
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
a:link, a:visited {
color: #333;
}
a:hover {
color: #111;
}
a:active {
color: #111;
}
/* =3 Headings
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
h1 {
font: bold 2em “Times New Roman”, Times, serif;
}
h2 {
font: bold 1.5em “Times New Roman”, Times, serif;
}
h3 {
font: bold 1.2em Arial, Geneva, Helvetica, sans-serif;
}
h4 {
font: bold 1em Arial, Geneva, Helvetica, sans-serif;
}
h5 {
font: bold 0.9em Arial, Geneva, Helvetica, sans-serif;
}
/* =4 Header
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =5 Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =6 Middle
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =7 Form
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =8 Extra
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =9 Footer
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

总结

感谢大家阅读本文,CSS最佳实践在某种意义上的确会对我们提供很大的帮助。它可以帮助我们节省更多的工作时间,显著提高工作效率。如果您有任何看法或建议,欢迎评论

下载源文件

点击下载该CSS模板

留意更新

订阅彬Go以查看本文更新及前端开发最新教程及资源。

via:acomment

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/css-best-practices-css-template-file.html
如需转载必须以链接形式注明原载或原文地址,谢谢合作
Category: CSS

39 Comments

发表评论

  • 韩国时尚购物起义
    2016-04-30

    投资就像按照食谱烤面包一样简单。想要致富,只要照计划、食谱或公式去做就行了。
    韩国时尚购物起义 http://cn.joamom.com

  • oxxloxx
    2012-03-17

    很感谢,最近也打算组建自己的css模板,很值得借鉴。

  • 韩文成
    2011-12-27

    不错,好文章,看楼主的博客给上大三纠结的我点亮了一盏灯,坚定了自己像前端方面发展

  • 倪心
    2011-09-08

    前一段时间写的css 代码太乱 学习

  • bengle
    2011-08-19

    受益匪浅,这篇文章让我顿悟了。

  • pengxuelou
    2011-07-22

    谢谢。
    我的代码也够乱,想要整一下,总是理不顺,终于让我找到一个规范的模板借鉴了。
    谢了。

  • tt
    2010-11-30

    昨天才被公司的一位前辈指导了一番,说我的CSS输写吾够规范,写得太乱了,想不到今日竟然给我碰上了,哈哈!

  • 成成
    2010-03-25

    这样可以方便团队开发,也方便自己使用。但是,这样是不是会产生很多请求数?

  • feitaweb
    2009-12-06

    不错,我也正在组织类似的CSS模板。
    你的css结构目录是我之前没用过的,呵呵,又学了一招~

  • Eyong
    2009-09-04

    不错,确实可以提高效率的。像我这种完代码完全手写的人,呵呵,很需要啊。