Cateva trucuri si sfaturi pentru CSS
91. Scrieti codul grupat
Orice web site este format din Header, Content si Footer, ar trebui pastrata aceeasi ordine si in fisierul CSS.
/* Header Section */ #header { width: 100%; } /* Content Section */ #content { float: left; width: 970px; } /* Articles Section */ .article { float: left; width: 500px; } /* Sidebar Section */ #sidebar { float: left; width: 470px; } /* Footer Section */ #footer { width: 100% }
2. Folositi prescurtari
Folosirea prescurtarilor in CSS este foarte importanta, nu numai ca salveaza timp dar si marimea fisierului.
/* NEPRESCURTAT */ .neprescurtat { margin-top: 5px; margin-right: 6px; margin-bottom: 7px; margin-left: 8px; padding-top: 5px; padding-right: 6px; padding-bottom: 7px; padding-left: 8px; } /* PRESCURTAT */ .prescurtat { margin: 5px 6px 7px 8px; /* top - right - bottom - left */ padding: 5px 6px 7px 8px; /* top - right - bottom - left */ }
3. Formatarea Textului
<p class="litereMari">textul va fi afisat cu litere mari</p> <p class="litereMici">TEXTUL VA FI AFISAT CU LITERE MICI</p>
/* Litere Mari */ .litereMari { text-transform: uppercase; /* Textul va fi scris cu litere Mari*/ } /* Litere Mici */ .litereMici { text-transform: lowercase; /* Textul va fi scris cu litere Mici*/ }
4. Centrarea Layoutului
Sunt destul de multe moduri de a centra un Layout in CSS dar cel care il prezint eu este cel mai usor dupa parerea mea, si cel mai des folosit.
body { width: 970px; margin: 0 auto; /* 0 = top bottom | auto = right left */ }
5. Utilizarea unui Reset
…sau Reset Browser Default este o metoda extrem de buna care rezolva multe probleme cu anumite browsere.
/* Resets Browser defaults */ body { font-size: 62.5%; /* Resets 1em to 10px */ font-family: 'Lucida Grande', Helvetica, Arial, sans-serif; margin: 0; background: #fff url('images/bg.png') repeat-x; } * :focus { outline: 0; } p, b, span, h1, h2, h3, h4, h5, h6, b, ol, ul, li, div, a, a:hover, img, input, textarea, small { margin: 0; padding: 0; border: none; list-style: none; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } a { color: #0072ff; text-decoration: none; } a:hover { color: #313131; text-decoration: underline; } .clearfix { clear: both; line-height: 1px; }
6. Scrieti codul intr-un anumit mod.
O sa prezit doua din cele mai folosite moduri de scriere, personal il prefer pe primul pentru ca mi se pare mult mai usor de citit.
/* Primul mod de scriere */ .text { font-size: 1.2em; color: #ccc; padding: 3px 5px; }
/* Al doilea mod de scriere */ .text { font-size: 1.2em; color: #ccc; padding: 3px 5px; }
7. Nu folositi acelasi atribut de doua ori.
.text { font-size: 1.2em; color: #ccc; padding: 3px 5px; } .text a { font-size: 1.2em; text-decoration: nonel }
Nu este necesar sa folosim font-size: 1.2em; de doua ori pentru ca deja .text a a luat acea valuoare de la .text , aceasta este o greseala foarte des intalnita de mine.
Autor : thiefunu
[…] This post was mentioned on Twitter by HardCoders. HardCoders said: RT @worldIT: [WorldIT] Cateva trucuri si sfaturi pentru CSS http://bit.ly/6go3n […]
Thanks for all this stuffs, Vlad! 😀
Sper ca nu te superi daca vin cu mici completari 🙂
De obicei imi fac structura si nu schimb alte proprietati (font-size, color etc) decat dupa ce introduc continut (dummy content, lorem ipsum, orice ca sa-mi fac o idee cum arata). Asa sunt sigur ca nu rescriu proprietati inherited.
Cat despre structura, este foarte usor de urmarit o structura cat de cat ordonata:
spre deosebire de o structura aliniata la stanga:
Probabil e o un obicei ramas de la programarea in C/C++, PHP, de la structuri if – else, for etc imbricate.
O alta idee ar fii sa tii layoutul intr-un fisier separat, apoi sa incarci stylesheeturi diferite in functie de pagina, ca sa nu incarci pe o pagina stiluri pe care nici macar nu le folosesti.
Another thing, de obicei vad unde am gresit dupa ce termin layout-ul si sunt multumit de el. Firebug pentru Mozzila iti arata exact pentru fiecare element ce proprietati are elementul, inclusiv proprietatile suprascrise. Daca vad proprietati suprascrise identice cu cele active, atunci e clar ca e o greseala 🙂
Si ultimul lucru pe care as vrea sa-l mentionez e in legatura cu „Reset browser defaults”. Da, este foarte bine de folosit unul ca sa evitam „surprizele”, dar ai o mica greseala.
„font-size: 62.5%; /* Resets 1em to 10px */”
62.5% e o marime relativa, la fel ca em. Proprietatile in procente sunt relative la marimea elementului parinte, iar em sunt relative la marimea standard a fontului.
Linia care ai scris-o tu este aproximativa, iar normal ar fii 62.8% daca vrei sa fii mai exact (dar tot aprox). Este ok pentru paragrafe, dar cand trebuie sa faci un design pixel-perfect nu te poti baza pe asa ceva. O alta problema e in IE. Degeaba scrii jos un fix pentru IE cand ii dai in cap cu prima linie. Cand deschide o pagina, IE iti va lua 62.5% ≈ 1em ≈ 10 px ca marime medium. Daca medium e 10px, iti dai seama pana la ce marime poti mari fontul… cam nasol pentru cei cu monitoare mari sau vedere slaba.
Other than that, great list of tricks 😉 Keep up!
^ imi face trim la spatiu sus, nu am apucat sa editez 🙁
Ti-am editat eu comentariul si l-am formatat cum am considerat eu ca ai vrut sa sugerezi,daca nu a fost asta corecteaza-ma.
BTW : Multumesc de competari!!! 😀
Multumesc! Dar, daca poti, mai editeaza odata 🙂 Uite aici un exemplu:
#header {
……..}
#header .logo {
……………}
#content {
…….}
#rightcol {
…….}
Inclusiv formatarea proprietatilor cum ai editat deja 🙂
P.S.: Ce tag-uri accepta textboxul? Ce ai folosit pentru formatare, pre?
@Claudiu : Accepta tagurile clasice de html. Eu folosesc <pre class=”brush:css”> pentru formatare. E bine acum ? 😀
@Claudiu eu mai mult prefer formatarea:
#wrapper {
width: 960px;
margin: 0 auto;
}
…decat…
#wrapper {
width: 960px;
margin: 0 auto;
}
Ma rog acum depinde de preferintele fiecaruia 😀
ar merge completat si body,html{height:100%} in caz ca vei avea overlay-uri cat ferestra documentului web sau sidemenu ce vrei sa ajunga perfect de sus pana jos, fara scrollbar. si poate si mark{background:transparent} pt ca firefox 6 iti pune background galben de highlight la acest tag si ar mai fi si altele, dar mi-e lene sa ma gandesc la toate acum :))