Reguli CSS refolosibile

Pe un site web exista de obicei maxim 2-3 tipuri de fonturi, in caz contrar am putea vorbi de un stil incoerent de tipografie. 2-3 stiluri CSS n-ar fi rau, si ar rezulta intr-un fisier CSS ultramic, dar de obicei folosim diferite variante ale aceluiasi stil, ceea ce presupune de obicei reguli CSS diferite pentru fiecare. Putem crea reguli generale CSS pentru aceste tipuri de fonturi, astfel incat de cate ori avem nevoie de cateva proprietati des folosite pentru textul prezentat, facem referire la stilul generic pentru a nu repeta 5-6 randuri de proprietati la infinit.

Astfel, putem avea o regula generala:

.museo_generic {
display: inline;
float: left;
font-family: MuseoSans, arial, sans-serif;
font-size: 12px;
color: #FFF;
}

la care putem adauga fiecare sub-stil care are nevoie de aceste proprietati:

.museo_generic, .heading1, .heading2, .heading3, .lettertitle {
display: inline;
float: left;
font-family: MuseoSans, arial, sans-serif;
font-size: 12px;
color: #FFF;
}

Astfel, am evitat sa rescriem de fiecare data aceleasi proprietati. Poate ca pare o chestie banala, dar poate micsora cu mult marimea fisierului CSS, si implicit, reduce load-time-ul, ceea ce conteaza pentru SEO. Diferentele de proprietati se pot apoi defini in reguli CSS separate, dar in care nu repetam proprietatile comune.

Aceste reguli se pot folosi pentru orice grup de proprietati care se vor refolosi in mai multe reguli CSS, pentru a optimiza fisierul de stiluri.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>