Уеб сайт за ИТ и електроник размисли

11фев/140

Методи за оптимизиране на CSS кода до 80%

В няколко стъпки ще обясня, как може да оптимизирате зареждането на файлове със стилове за вашия уеб сайт.

 

1. Използвайте кратки имена на класове и ID-та.

Използвайте имена за класовете и ID-тата не повече от 4 символа, ако това е възможно.

#top_navigation става #tnv

#side_navigation става #snv

#footer става #ftr

#header става #hdr

2. Съвпадащи стилове

Когато класове или ID-та използват едни и същи стилови описания е добре да се обединят. В този пример се вижда и предимството от използването на кратките имена.

.sa{background-repeat: repeat-y}

.sb{background-repeat: repeat-y}

.sc{background-repeat: repeat-y}

.sd{background-repeat: repeat-y}

.se{background-repeat: repeat-y}

става: .sa,.sb,.sc,.sd,.se{background-repeat: repeat-y}

 

3. Използвайте инлайн стилове ако е необходимо

Ако например използвате еднакви стилове за няколко елемента , но с различни ширине използвайте инлайн стилове.

пример:

<div style=width:100px">

<div style=width:500px">

<div style=width:350px">

 

4. Еднакво изписване на стилове

Опитвайте се да използвате еднакви имена на класове и ID-та за всеки уеб сайт който разработвате. Също така се стремете да използвате еднакви структури на стиловите опсиания.

 

5. Използвайте съкратено изписване

Където е възможно изписвайте кода в съкратен формат:

padding-top: 15px;padding-right: 0px; padding-bottom: 0px; padding-left: 230px
става:

padding:15px 0 0 230px

Съкращаване на кода на цветовете #FFFFFF = #fff (забележете, че се използват малки букви)

 

6. Премахвахте празните полета и последната точка и запетая 

.spc {height: 6px;} става:  .spc{height:6px}

 

7. Използвайте два стила за един елемент

Технически това може да намали кода значително.

Ето един пример използван при няколко бутона с еднакво оформление и различни цветове. Използва се основен стил (.btn) и по още един за различните цветове. За червен - .rd, за зелен - .gr и т.н.  Това не само ще ни спести допълнително кодиране, а ще ни даде лесна възможност бързо, без много редактиране да сменим цвета на елемента.

<div class="btn rd">Red Button</div>
<div class="btn gr">Green Button </div>

Въпреки, че класовете имат лимит на използване до два, могат да се използват в съчетание с ID

<div id ="foo" class="btn gn ">Green Button </div>

#foo{style...}
.btn{style...}
.rd{style...}

 

8. Използвайте  смаляване на кода (https://code.google.com/p/minify/ )

Това ще съчетае намаляване на кода и кеширане на CSS за увеличаване на скоростна на зареждане на уеб сайта. Също така ще бъдат премахнати ненужните интервали, празни полета и коментари от файла със стиловете.

 

9. Използвайте кеширане и компресиране във вашия .htaccess файл.

 Пример:

<IfModule mod_headers.c>
<FilesMatch "\.(js|css|xml|gz)$">
Header append Vary Accept-Encoding
</FilesMatch>
</IfModule>

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl|jpg|png|gif)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>

 

Няколко примера:

Първоначален CSS

Думи:416
Сумволи(без интервали): 5947
Символи: 6308

Редове: 55
6.26 KB

body {background-repeat: repeat;font-family: Arial, Helvetica, sans-serif;background-color: #F0F0F0;}
#t {background-attachment: scroll;background-image: url(../ig/1t.png);background-repeat: no-repeat;height: 53px;width: 980px;}
#m {background-attachment: scroll;background-image: url(../ig/1m.png);background-repeat: repeat-y;width: 980px;}
#logo {background-attachment: scroll;background-image: url(../ig/top.gif);background-repeat: no-repeat;background-position: center;width: 979px;height: 196px;}
h1 {color: #9D9D3D;margin: 0px;text-align: left;padding-top: 15px;padding-right: 0px;padding-bottom: 0px;padding-left: 230px;font-weight: normal;font-size: 40px;letter-spacing: 1px;word-spacing: 2px;}
#logo p {color: #9C9A37;margin: 0px;text-align: left;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 230px;font-size: 22px;letter-spacing: 1px;word-spacing: 2px;font-family: Georgia, "Times New Roman", Times, serif;font-style: italic;}
#b {background-attachment: scroll;background-image: url(../ig/1b.png);background-repeat: no-repeat;height: 10px;width: 980px;}
#wrap {width: 980px;padding-top: 5px;}
#tnav {background-attachment: scroll;background-image: url(../ig/tnav.png);background-repeat: no-repeat;height: 47px;width: 980px;}
.spc {height: 6px;}
#left {float: left;width: 727px;color: #999933;font-size: 14px;line-height: 18px;}
#rgt {float: right;width: 243px;text-align: right;}
.tb {background-attachment: scroll;background-image: url(../ig/tb.png);background-repeat: no-repeat;height: 15px;width: 727px;background-position: bottom;}
.mb {background-attachment: scroll;background-image: url(../ig/mb.png);background-repeat: repeat-y;width: 727px;text-align: left;}
.bb {background-attachment: scroll;background-image: url(../ig/bb.png);background-repeat: repeat;height: 9px;width: 727px;background-position: top;}
.vid {background-color: #FFFFFF;width: 500px;border: 3px double #999933;}
.tw {background-attachment: scroll;background-image: url(../ig/tw.png);background-repeat: no-repeat;height: 12px;width: 727px;background-position: bottom;}
.mw {background-attachment: scroll;background-image: url(../ig/mw.png);background-repeat: repeat-y;width: 727px;}
.bw {background-attachment: scroll;background-image: url(../ig/bw.png);background-repeat: repeat;height: 6px;width: 727px;}
.rt {background-attachment: scroll;background-image: url(../ig/rt.png);background-repeat: no-repeat;height: 13px;width: 243px;background-position: bottom;}
.rm {background-attachment: scroll;background-image: url(../ig/rm.png);background-repeat: repeat-y;width: 243px;color: #999933;text-align: center;font-size: 13px;}
.rb {background-attachment: scroll;background-image: url(../ig/rb.png);background-repeat: no-repeat;height: 43px;width: 243px;background-position: bottom;}
#tnav a {color: #939331;line-height: 47px;text-decoration: none;padding-right: 8px;padding-left: 8px;border-right-width: 1px;border-left-width: 1px;border-right-style: solid;border-left-style: solid;border-right-color: #999933;border-left-color: #999933;font-size: 18px;letter-spacing: 1px;word-spacing: 2px;font-weight: bold;}
#ftr {clear: both;font-size: 14px;line-height: 18px;letter-spacing: 1px;word-spacing: 2px;border-bottom-width: 3px;border-bottom-style: double;border-bottom-color: #999933;padding-top: 4px;padding-bottom: 4px;}
#ftr a {color: #000000; padding-right: 12px;padding-left: 12px;line-height: 25px; letter-spacing: 1px;word-spacing: 2px;text-decoration: none;text-shadow: 2px 2px 2px #A5A5A5;}
#tnav a:hover {color: #FFFFFF;}
#rgt h3 {color: #FFFFFF;text-align: center;font-weight: bold;margin: 0px;padding-top: 5px;padding-right: 0px;padding-bottom: 5px;padding-left: 0px;letter-spacing: 1px;word-spacing: 2px;font-size: 20px;}
h2 {line-height: 53px;background-attachment: scroll;background-image: url(../ig/h2.gif);background-repeat: no-repeat;height: 53px;width: 473px;color: #FFFFFF;margin: 0px;padding: 0px;font-size: 28px;text-align: center;}
.pad {padding-top: 8px;padding-right: 12px; padding-bottom: 8px;padding-left: 12px;letter-spacing: 1px;word-spacing: 2px; text-align: left;}
.tww {background-attachment: scroll;background-image: url(../ig/tww.png);background-repeat: no-repeat;clear: both;height: 15px;width: 980px;background-position: bottom;}
.mww {background-attachment: scroll;background-image: url(../ig/mww.png);background-repeat: repeat-y;
width: 980px;text-align: left;font-size: 13px;line-height: 17px;}
.bww {background-attachment: scroll;background-image: url(../ig/bww.png);background-repeat: no-repeat;background-position: top;height: 12px;width: 980px;}
.mw img {padding-top: 4px;padding-right: 10px;padding-left: 10px;}
.mw a {color: #000000;}
.imgr { float: right;margin-right: 10px;margin-left: 10px;}
.img1 {float: left;margin-right: 10px;margin-left: 10px;}
#legal {text-align: left;color: #000000;}
.bc {font-size: 18px;font-weight: bold;text-align: center;}
.auto {background-attachment: scroll;background-image: url(../ig/autobtn.gif);background-repeat: no-repeat;height: 50px;width: 471px;}
.auto a {font-size: 24px;line-height: 50px;text-decoration: none;color: #000000;font-variant: small-caps;
text-transform: capitalize;font-weight: bold;}
.auto a:hover { color: #FFFFFF;}
#legal h2{text-align: center;color: #000000;background-attachment: scroll;background-image: url(../ig/h2l.png); background-repeat: no-repeat;}
#legal h4{text-align: center;font-size: 18px;}
h4{ font-size: 18px;line-height: 25px;border-top-width: 1px;border-right-width: 1px;
border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: none;border-bottom-style: solid;border-left-style: none;border-top-color: #999933; border-right-color: #999933;border-bottom-color: #999933;border-left-color: #999933;}
h3 {font-size: 25px;}
a {color: #999933;}
a:hover { color: #FFFFFF;}
#smap a {font-size: 16px;line-height: 25px;text-decoration: none;padding-top: 5px;padding-bottom: 5px;padding-left: 35px;}
#nlnk b{color: #999900;font-size: 16px;line-height: 25px;letter-spacing: 8px;word-spacing: 8px;font-weight: bold;padding-right: 10px;padding-left: 10px;}
#nlnk a:hover {color: #999900;text-decoration: none;font-weight: bold;}
#nlnk a {color: #FFFFFF;font-size: 16px;
line-height: 25px;letter-spacing: 8px;text-decoration: none;word-spacing: 8px;padding-right: 10px;padding-left: 10px;font-weight: bold;}

Оптимизиран CSS файл

Оригиналния CSS файл, но оптимизиран. Може да забележите предимството на връзките между елементите на стиловете (особено връзките между цветовете на фоновете)  и ясното предимство на използването на кратки имена на класове и ID-та

Резултат след оптимизирането: 44.25%!

Думи: 143
Символи(без интервали): 3235
Символи: 3315
Редове: 63
3.49 KB

body {font-family:Arial, Helvetica, sans-serif;background-color:#F0F0F0}
#t,#logo,.tb,.tw,#b,#tnav,.rt,.rb,.tww,h2,.auto,#legal h2 {background-repeat:no-repeat}
.bw,.bww,.bb,body{background-repeat:repeat}
#t,#m,#logo,#b,#tnav,.tb,.mb,.bb,.tw,.mw,.bw,.rt,.rm,.rb,.tww,.mww,h2,.auto,#legal h2,.bww{background-attachment:scroll}
#m,.mb,.mw,.rm,.mww{background-repeat:repeat-y}
.rt,.rb,.tb,.tw,.tww{background-position:bottom}
.bb,.bww{background-position:top}
#logo {background-position:center}
#nlnk a,#smap a,.auto a,#ftr a,#tnav a{text-decoration:none}
h1,#tnav a,.pad,#ftr,#ftr a,#logo p,#rgt h3{letter-spacing:1px;word-spacing:2px}
#nlnk b,#nlnk a{letter-spacing:8px;word-spacing:8px}
#legal h2,.rm,#rgt h3,#legal h4,h2,.bc{text-align:center}
.pad,.mww,#logo p,h1,#legal,.mb{text-align:left}
#rgt {text-align:right}
#nlnk a,#tnav a,#rgt h3,#nlnk b,.auto a,.bc{font-weight:bold}
.rm,.mww{font-size:13px}
#left,#ftr{font-size:14px}
#legal h4,h4,.bc,#tnav a{font-size:18px}
.mw a,#legal,#legal h2,.auto a,#ftr a {color:#000}
#tnav a:hover,.auto a:hover,a:hover,h2,#rgt h3,#nlnk a{color:#FFF}

#nlnk a:hover,#nlnk b{color:#999900}
a,#left,.rm{color:#999933}
h4,#nlnk b,#nlnk a,#smap a,#ftr a{line-height:25px}
h4,#tnav{border:1px 0;border-style:solid;border-color:#999933}
#rgt,.rt,.rm,.r{width:243px}
.tb,.mb,.bb,.tw,.mw,.bw,#left{width:727px}
.mww,#t,#m,#b,#tnav,.tww,.mww,.bww,#logo,#wrap{width:980px}
#t {background-image:url(../ig/1t.png);height:53px}
#m {background-image:url(../ig/1m.png)}
#logo {background-image:url(../ig/top.png);height:196px}
h1 {color:#9D9D3D;margin:0px;padding:15px 0 0 230px;font-weight:normal;font-size:40px}
#logo p {color:#9C9A37;margin:0px;padding:0 0 0 230px;font-size:22px;font-family:Georgia, "Times New Roman", Times, serif;font-style:italic}
#b {background-image:url(../ig/1b.png);height:10px}
#wrap {padding-top:5px}
#tnav {background-image:url(../ig/tnav.png);height:47px}
.spc {height:6px}
#left {float:left;line-height:18px}
#rgt {float:right}
.tb {background-image:url(../ig/tb.png);height:15px}
.mb {background-image:url(../ig/mb.png)}
.bb {background-image:url(../ig/bb.png);height:9px}
.vid {background-color:#FFF;width:500px;border:3px double #999933}
.tw{background-image:url(../ig/tw.png);height:12px}
.mw{background-image:url(../ig/mw.png)}
.bw{background-image:url(../ig/bw.png);height:6px}
.rt {background-image:url(../ig/rt.png);height:13px}
.rm {background-image:url(../ig/rm.png)}
.rb {background-image:url(../ig/rb.png);height:43px}
#tnav a{color:#939331;line-height:47px;padding:0 8px}
#ftr {clear:both;line-height:18px;border-bottom:3px double #999933;padding:0 4px}
#ftr a {padding:0 12px;text-shadow:2px 2px 2px #A5A5A5}
#rgt h3 {margin:0px;padding:5px 0px;font-size:20px}
h2 {line-height:53px;background-image:url(../ig/h2.gif);height:53px;width:473px;margin:0px;padding:0px;font-size:28px}
.pad {padding:8px 12px 8px 12px}
.tww {background-image:url(../ig/tww.png);clear:both;height:15px}
.mww {background-image:url(../ig/mww.png);line-height:17px}
.bww {background-image:url(../ig/bww.png);height:12px}
.mw img {padding:4px 10px 0 10px}
.imgr { float:right;margin:0 10px}
.img1 {float:left;margin:0 10px}
.auto {background-image:url(../ig/autobtn.gif);height:50px;width:471px}
.auto a {font-size:24px;line-height:50px;font-variant:small-caps;text-transform:capitalize}
#legal h2{background-image:url(../ig/h2l.png)}
h3 {font-size:25px}
#smap a {font-size:16px;padding:5px 0 5px 35px}
#nlnk b,#nlnk a{font-size:16px;padding:0 10px}

Нов CSS шаблон

Типпичния CSS план използва следните оптимизиращи техники. Не използваните стилове са премахнати.

html,body{height:100%;width:100%}
body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}
#wrap{width:960px}

/* CENTRE */
#wrap{margin:0 auto}

/* MAX 100% */
#lbox2,#lboxcl2{width:100%;min-height:100%}

/* OVERFLOW */
#lboxcl2{overflow:hidden}
{overflow:scroll}
{overflow:auto}

/* POSITION */
#lbox2,#lboxw2{position:fixed}
* html legend{position:absolute}
* html fieldset{position:relative}

/* Z INDEX */
#lboxcl2{z-index:999}
#lboxw2,#lboxct2{z-index:998}

/* BACKGROUND STYLES */
#lboxct2{background-repeat:no-repeat}
{background-attachment:fixed}
{background-attachment:scroll}
{background-position:top}
{background-position:center}
{background-position:bottom}
{background-repeat:repeat-x}
{background-repeat:repeat-y}

{background-image:url(../ig/###.png)}
{background-image:url(../ig/###.png)}
{background-image:url(../ig/###.png)}
{background-image:url(../ig/###.png)}

.blk,#lboxw2,#lboxct2{background-color:#000}
.wht{background-color:#FFF}
tr:nth-child(odd){background-color:#####}
tr:nth-child(even){background-color:######}
.rd{background-color:#900}
.blu{background-color:#009}
.iput{background-color:#F0F0F0}

/* ROUNDED CORNERS */
{border-top-right-radius:15px}
{border-top-left-radius:15px}
{border-bottom-right-radius:15px}
{border-bottom-left-radius:15px}
.r15{border-radius:15px}
.r20{border-radius:15px}

/* FLOATING */
.fr,#lboxcb2{float:right}.fl{float:left}.pc{clear:both}

/* OPACITY */
.op4{opacity:0.4}
.op6{opacity:0.6}
.op{opacity:1}

/* SCROLLING */
{overflow-y:scroll;overflow-x:hidden;}
{overflow-x:scroll;overflow-y:hidden;}

/* FONT STYLES */
{list-style-type:none}
{letter-spacing:1px;word-spacing:2px}
{letter-spacing:normal;word-spacing:normal}
{text-transform:uppercase}
{font-variant:small-caps}
{text-align:left}
{text-align:center}
{text-align:right}
{text-decoration:none !important}
{text-shadow:0 1px 0 #fff}
{text-shadow:0 1px 0 #000}
.rd,.blu{color:#FFF}
#lboxt2,#lboxcb2{font-weight:700}

/* FONT ALIGN */
{vertical-align:top}
{vertical-align:middle}
{vertical-align:bottom}

/* FONT SIZES */
#lboxt2{font-size:16px}
#lboxd2,#lboxd2n{font-size:18px}
#lboxcb2{font-size:20px}
{font-size:22px}
{font-size:24px}
{font-size:26px}
{font-size:28px}

/* MISC */
#lboxp2,#lboxcb2 span{cursor:pointer}

/* BORDERS */
{border:1px solid #000}
#lboxp2{border:1px solid #333}
{border:1px solid #fff}
fieldset{border:0}

/* BOX SHADOWS */
.iput{box-shadow:0 3px 11px 4px #D2D2D2 inset}
{box-shadow:-2px 4px 4px #888}
.ns{box-shadow:0 0 0 #888}

/* SPRITES */
{background-image:url(../ig/#######.png);height:######px;width:######px}
{background-position:###px}
{background-position:###px}
{background-position:###px}

/* IE FIELDSET FIX */
* html legend{top:-.5em;left:.5em}
* html fieldset{margin-top:1em; padding-top:.75em}

/* LIGHTBOX */
#lbox2{display:none;top:0}#lboxw2{left:50%;top:50%}#lboxct2{background-image:url(_ig/loading.gif);background-position:50% 50%}#lboxt2{margin:0 0 5px 10px}#lboxd2{margin-left:10px}#lboxcb2{color:#FFF;font:"arial black",verdana,sans-serif;margin:0 10px 5px 0}#lboxcb2 span{margin-left:5px;padding:0 3px}

/* ANIMATIONS */
.iput{transition:background-color 0.5s ease}

{position:relative;-moz-animation-name:dlogin;-moz-animation-iteration-count:once;-moz-animation-timing-function:ease-in;-moz-animation-duration:0.5s;-webkit-animation-name:dlogin;-webkit-animation-iteration-count:once;-webkit-animation-timing-function:ease-in;-webkit-animation-duration:0.5s;-animation:dlogin 0.5s once;}
@-moz-keyframes dlogin{0%{bottom:-###px}
100%{bottom:###px}
}
@-webkit-keyframes dlogin{0%{bottom:-###0px}
100%{bottom:###0px}
}
@keyframes dlogin{0%{bottom:-###px}
100%{bottom:###px}
}

Sorce:

Публикувано от Мариан Андреев

Коментари (0) Връзки за обратно следене (0)

Няма все още коментари.


Leave a comment

(required)

 

Все още няма връзки за обратно следене.