我爱电脑技术论坛's Archiver

麦迪 发表于 2008-5-22 16:16

提高CSS文件可维护性的五种方法

当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出五种提高CSS文件可维护性的方法，也就是一种较好的CSS样式指南。
;|0b.Ot5n.g D
fn#Yxu9u%vS,m 　　1.分解你的样式
7ruG_7\5ir
Yr0qCA6h 　　对于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，可以分别将 全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。 4EP H/Um*u&l

8c Pf$gY_S0B8D 　　而对于较大的工程，这样显然不会有什么效果。此时，就需要将样式分解到几个不同的样式表文件。下面的master stylesheet 就是这一方法的例子，它的工作主要是导入其他样式文件。使用这一方法不仅能优化样式结构，而且有利于减少一些不必要的服务器请求。而分解文件的方法就有许多种，master stylesheet 使用了最常见的一种。
ZgW{ OX0gr } |
b[0h2^5v5V)AF/J'[ /*------------------------------------------------------------------
WE%bt ~-dJ
&b-I {\u,@n^ [Master Stylesheet] $N*E!q5S"^}
Project: Smashing Magazine
(mfEW:O Version: 1.1 `T i5Yw
Last change: 05/02/08 [fixed Float bug, vf] "Z'm/d w_/|A!b
Assigned to: Vitaly Friedman (vf), Sven Lennartz (sl) f@v.[!L Sl
Primary use: Magazine
| \rW5P -------------------------------------------------------------------*/
#b {'C1RB6@1S*@Q @import "reset.css"; 9{L-S2sau G
@import "layout.css";
{HvcZ @import "colors.css"; ^Vr^&My,b7~
@import "typography.css"; A#~9Z.wQ/h'u-E4@6E:M
@import "flash.css";
d] h r@ c1p)~(W /* @import "debugging.css"; */
fkR;`7i{S/O.Y
MO])w_ 　　同时对于大型项目，你也可以加上CSS文件的升级标志或者一些诊断措施，这里不再详述。 2UZCF-w;R'r9mCqC ~

I iN4r G1q$c 　　2.建立CSS文件索引 ,i+y!c$p M.jC

JV+I&B[ w@b.x 　　为了能够迅速的了解整个CSS文件的结构，在文件开头建立文件索引是一个不错的选择。一种可行的方法是建立树形的索引：结构上的id 和 class 都可以成为该树的一个分支。如下： 3f+Y"S vSeAu2?4C k
b0N1T1e5a
/*------------------------------------------------------------------ 1g BfbQE
[Layout]
6tG%S$d%k$ctrEF * body
|"snr DCLIny + Header / #header wl+a}X!{,p6W9M3Fl
+ Content / #content
#^Vb/{"I p3_sFB!B - Left column / #leftcolumn #I:_ t_I S\@M~9Qv
- Right column / #rightcolumn
.K:gBCsn_ghB - Sidebar / #sidebar
!c-`S6Jwte - RSS / #rss
[E3v8lJ#k S - Search / #search 0~|Y5o Lh-~
- Boxes / .box
"?#p\u},v - Sideblog / #sideblog 9?o!GC/G
+ Footer / #footer g^?@-v-eH
Navigation #navbar
(T6|CI%O Advertisements .ads
*fq*kk$@1DV X Content header h2 f.^1k Aa
——————————————————————-*/
6K9I#y,]l u$d[Th s u$}
　　或者也可以这样： (j:S co/O3[

0Ps&\$k+TBL4@M U7R /*------------------------------------------------------------------
T v0c:S(j t R C$[XzU*B!B f.r8]2l
[Table of contents]
4r?K^_M$nV s 1. Body 0xh{p&i}y.iz~
2. Header / #header
u Gd;vaS{ 2.1. Navigation / #navbar 6\ aS!`AD7|G?
3. Content / #content 2ngw xg"on
3.1. Left column / #leftcolumn 4E y!xrE(Pp{ n
3.2. Right column / #rightcolumn ])[n zmB WU
3.3. Sidebar / #sidebar
!I$x"J6wF7x ^m9gk 3.3.1. RSS / #rss
$?)p)lKc`(chwP 3.3.2. Search / #search Vh`%YH
3.3.3. Boxes / .box
8v{0LG6V$E 3.3.4. Sideblog / #sideblog Bp*lxx:OCI}
3.3.5. Advertisements / .ads
/P5TM+ccp 4. Footer / #footer
m*l.h+iV7R&bu A(T _*c4nX6|\
-------------------------------------------------------------------*/
4z0ZR;Y M.wt0w p
aM6I5R;Xk9~(a^ 　　另一种方式可以只是先简单的将内容列举出来，也不需要缩进。下面的一个例子中，如果你需要跳至RSS部分你只需要简单的搜索 8.RSS。 *R },f9^7T] e2o[

`O ~"{&Z#Zn v /*------------------------------------------------------------------ 3WKH4aNH ]X

G)EIM0i l [Table of contents] A^#N2aP@n#U
1. Body
yqYu/p 2. Header / #header
rl U)v[*{_ 3. Navigation / #navbar \-p_d6j H%co$Z
4. Content / #content
bWanY-{4Z?E 5. Left column / #leftcolumn
6[E[-~&`/Y 6. Right column / #rightcolumn :jz A P9Vs-gop[
7. Sidebar / #sidebar
m$t zH0M+X 8. RSS / #rss
l%U4kV$S+~/dk2L$B ]X 9. Search / #search
Tuv_1O t 10. Boxes / .box
BY~}O Z#Nqh4W z 11. Sideblog / #sideblog *efg#F4]Bt
12. Advertisements / .ads ;d k'Hw[M ?-e%]
13. Footer / #footer
t?a$Z S+C%T C
g#@.P?%MCA -------------------------------------------------------------------*/ oM$Zo.d
q&{SQ6je

v/BN'd4E&\ x3y/n*{q^+~#x;^8x
/*------------------------------------------------------------------ 1pD"u~6H-x&?
[8. RSS / #rss]
J*j#A8F*Pxl-t */ +uV/cQ0RS
#rss { ... }
(QN }x{eU #rss img { ... }
#O2Dz?8N XE y,t Y|]&nzqC x\ j
　　定义这样一个样式检索可以很有效的使其他人阅读学习你的代码变得容易。在制作大项目的时候，你也可以将检索打印出来从而在你阅读代码的时候方便查阅。

麦迪 发表于 2008-5-22 16:17

　当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出五种提高CSS文件可维护性的方法，也就是一种较好的CSS样式指南。 .S@a8f5a(V]-R
z z/w0T/`\sd
　　1.分解你的样式
&j2\'X)f8X%\o1N wK5i,xZ1N4u4@
　　对于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，可以分别将 全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。
b.md3^R V4rh.pb4V
　　而对于较大的工程，这样显然不会有什么效果。此时，就需要将样式分解到几个不同的样式表文件。下面的master stylesheet 就是这一方法的例子，它的工作主要是导入其他样式文件。使用这一方法不仅能优化样式结构，而且有利于减少一些不必要的服务器请求。而分解文件的方法就有许多种，master stylesheet 使用了最常见的一种。
:r{u S#\ T@k-x 7Es4`'g j@J
/*------------------------------------------------------------------
tJt*sY?c
X1{*Y6@!g&D$rU H J [Master Stylesheet]
$c#{\{*b*v.} Project: Smashing Magazine
[3vv*e)x;K]w Version: 1.1 Jd+i1c4|1C
Last change: 05/02/08 [fixed Float bug, vf]
Rjj[]M9{;M6\ Assigned to: Vitaly Friedman (vf), Sven Lennartz (sl) y'k M#H M*L
Primary use: Magazine
U+o'DW3r5{J6s:~ -------------------------------------------------------------------*/
OmL`#lU @import "reset.css";
5\-p NVeR0fU-` @import "layout.css";
r0~8MF.{ @import "colors.css";
-gr1_[bH!P7a7Q @import "typography.css";
_;WdO;O-B@ @import "flash.css"; Z-A.?Lf)m9S
/* @import "debugging.css"; */ 3\ x qlh ~QJLx

N(`,[;}}yC)_ 　　同时对于大型项目，你也可以加上CSS文件的升级标志或者一些诊断措施，这里不再详述。
2M9S a]x u*b
8F+w Y)GT&I9x 　　2.建立CSS文件索引
[m#?(F ~ vo
4] L(h aik$MR 　　为了能够迅速的了解整个CSS文件的结构，在文件开头建立文件索引是一个不错的选择。一种可行的方法是建立树形的索引：结构上的id 和 class 都可以成为该树的一个分支。如下：
N|B I,x-st8] c^rk4TNxbi!^
/*------------------------------------------------------------------ [nH g f#S`Oy
[Layout]
&m:[#Qc8lEv * body
%j f!xxZ U!er + Header / #header
VhMeX$| + Content / #content
j}3_ p E5X - Left column / #leftcolumn
4v(i c&Y-g_8[G - Right column / #rightcolumn
T2j0L)m/mtY - Sidebar / #sidebar
x3e?%U\X/D - RSS / #rss #G`.[;pV%OU
- Search / #search Csz8g;cPn"U C[
- Boxes / .box
#WCU l"j4E - Sideblog / #sideblog $X B{[5et?s
+ Footer / #footer FS/JX` lm
Navigation #navbar *`3hn w0J#S5L
Advertisements .ads
f R+ek0q%}:S Content header h2
7Jl[;IW:^M"S;wo ——————————————————————-*/ P[,KjFy

*x^7v8KB3zs6} 　　或者也可以这样：
+f|#v,T r[
n(lO7\:|%U [!k /*------------------------------------------------------------------ T F5Aziw

/Q"ouDZ0Ybq [ [Table of contents]
M7pK#`cV{| 1. Body ?Vq(uI%{E
2. Header / #header
ox4R6bnj*vZ 2.1. Navigation / #navbar
|&IC,z*OX 3. Content / #content
7Efk*tM-]C~ 3.1. Left column / #leftcolumn
p4O2ny!l(Ni$q 3.2. Right column / #rightcolumn
9h1H'B~oz l&c#x3P 3.3. Sidebar / #sidebar
@1X%@ sho&m/[M 3.3.1. RSS / #rss
a(hhv\^'Ui 3.3.2. Search / #search
n/s*d;H;v'l)F%HH%N 3.3.3. Boxes / .box 3Ox~ i\:XR
3.3.4. Sideblog / #sideblog
,e1kYuF&ge 3.3.5. Advertisements / .ads
c"l7Q){)`pQ:i 4. Footer / #footer
dv3E T q$h%aX 8_g4q%EAw.NdBK'd
-------------------------------------------------------------------*/ ,Y3JCe N#N'Yi'A
"h4HI/JfNI:~|
　　另一种方式可以只是先简单的将内容列举出来，也不需要缩进。下面的一个例子中，如果你需要跳至RSS部分你只需要简单的搜索 8.RSS。
X ow/k4k+[ C4|7_}J
*i)kZ4`t D /*------------------------------------------------------------------ IN _E!n+bG-k
]L'r D ]6q }c[
[Table of contents] 5m\F K x(a3o \P
1. Body !\dr$EcK in
2. Header / #header
ZH%JUJB }gk 3. Navigation / #navbar Z;k)P7l'XO|-d K @
4. Content / #content
%pi p}'h xz 5. Left column / #leftcolumn
M/@Rn`{T | 6. Right column / #rightcolumn ~:~pR{s'n
7. Sidebar / #sidebar
7z%[ B FZ9v5Y:m 8. RSS / #rss
`Y.w Y{#u,Z 9. Search / #search
(b9x*@"}9o:A@&b+L%QG 10. Boxes / .box
)q9m ~a(Mx_!l 11. Sideblog / #sideblog *z `(Cu%g#B
12. Advertisements / .ads
,`,I:S5V9sSCU5z8x 13. Footer / #footer
ML{k2s$H? CQT^!K:GV~
-------------------------------------------------------------------*/ k5hZ5?SYV U

,R6Pw R,k&m%Q4u`
HZ9Jj3ze_ )H0hxsmd
/*------------------------------------------------------------------
D%P x^pJ [8. RSS / #rss]
WEq*p?+FOa}v */ -eC,V,A"]#M3O#wG
#rss { ... }
7[ oH4q&zAE&r!`+FU8E #rss img { ... } Qv Dl/w1D1RH yJ8v

$g0cH{+Gj)[C B^ 　　定义这样一个样式检索可以很有效的使其他人阅读学习你的代码变得容易。在制作大项目的时候，你也可以将检索打印出来从而在你阅读代码的时候方便查阅。

80441301 发表于 2008-5-23 10:05

哦，好东东啊

页: [1]

Powered by Discuz! Archiver 6.1.0  © 2001-2007 Comsenz Inc.