codeART

Ha CSS-t szeretnénk írni, már az elején érdemes bizonyos szempontokat figyelembe vennünk annak érdekében, hogy minél rövidebb és egyszerűbb végeredményt kapjunk.

A cikkben leírt optimalizációs trükkök látszólag nem tűnnek túlságosan fontosnak, de egy több száz vagy akár több ezer soros css esetében már látványos eredményt lehet elérni az alkalmazásukkal.

Tudniillik minél kisebb méretű egy css annál könnyebb azt betölteni a böngészőnek és weboldalunk gyorsasága is pozitív irányba fog billenni az alacsony mérettől.

Cikkünk a hirdetés után folytatódik!

Háttérbeállítások egy sorban

A külön sorokba írt háttérbeállítások helyett…

 background: url(pelda.png);
 background-color: #eaeaea ;
 background-repeat: repeat-x;
 background-position: top left;

nyugodtan használjuk ezt a módszert.

background: #eaeaea url(pelda.png) repeat-x top left;

Szegély beállítások

A border tulajdonságok formázására is van egyszerűbb megoldás,

border-color: red;
border-width: 1px;
border-style: solid;

mégpedig a következő.

border: 1px solid red;

Lista tulajdonságok

A listatulajdonságok is könnyen leegyszerűsíthetők.

list-style-position: outside;
list-style-image: none;
list-style-type: disc;

list-style: disc outside;
/* list-style: [list-style-type] [list-style-position] [list-style-image];*/

Betűtípus és sorköz beállítások

A betűtípussal is rengeteg helyet spórolhatunk meg.

font-family: Arial, Helvetica;
font-weight: bold;
font-style: italic;
font-size: 1em;
line-height: 1.5em;

5 sor helyett 1-el elintézzük az egészet.

font: bold italic 1em/1.5em Arial, Helvetica;

Margó és belső margó

A margó és belső margó (padding) értékek az óramutató járásával megegyezően írandók (top, right, bottom, left). De több variációjuk is létezik.

/* top=10px, right=5px, bottom=15px, left=20px */
margin: 10px 5px 15px 20px;
 
/* top=10px, right=5px, bottom=10px, left=5px*/
margin: 10px 5px;
 
/* top=10px, right=5px, bottom=15px, left=5px*/
margin: 10px 5px 15px;

A “0″ legyen “0″

Ha valaminek 0 az értéke, nem szükséges a mértékegységet is utána írni, a böngészők e nélkül is felismerik.

margin: 0px;
padding: 0em;

Használjuk inkább így.

margin: 0;
padding: 0;

Használj rövidítést a hexadecimális színeknél

A fehéret általában #ffffff színkóddal írjuk, de nyugodtan használhatjuk így is #fff, vagy a #aabbcc rövidítése #abc és így tovább.

A nem egész számok leegyszerűsítése

A 0.5em értéket rövidíthetjük .5em-nek, vagy a 0.5px-t .5px-nek.

Az utolsó pontosvessző elhagyása

Az utolsó beállítás után nem kötelező a pontosvessző használata, viszont ügyelni kell ha utólag egészítjük ki valamivel az osztályt vagy azonosítót.

div
{
margin: 0;
padding: 0 /* nyugodtan elhagyható az utolsó beállításunknál a pontosvessző */
}

Zárszó

Érdemes megjegyezni és alkalmazni ezeket a módszereket minden egyes munkánál, kivétel nélkül. Manapság eléggé elterjedtek a villámgyors internet-hozzáférések és hajlamosak vagyunk megfeledkezni arról, hogy bizony sok helyen még mindig viszonylag lassú kapcsolattal böngésznek.

Mit gondolsz a fent bemutatott dolgokról, esetleg tudsz e hasonló optimalizációs trükköt? Oszd meg a véleményed vagy saját módszereidet egy hozzászólásban.