Scrierea CSS nu este ușoară, pentru că, dacă nu sunteți atent, puteți scrie cod aglomerat, puteți fi lent și puteți petrece mult timp depanând codul în timp ce scrieți codul.

Să trecem la goană: în acest tutorial, am adunat câteva Trucuri pe care îl puteți folosi pentru a vă îmbunătăți performanța la scrierea codului CSS. Le puteți implementa oricând pe proiectele dvs. vechi sau noi.

Vom explora, în special:

1. Colecția de proprietăți

Dacă descoperiți că ați scris aceleași proprietăți de mai multe ori, verificați dacă nu le puteți trunchia eliminând clase și ID-uri inutile. Apoi adăugați toate proprietățile comune într-o singură acoladă.

Dacă vă puteți conecta secțiunile, veți putea crea un fișier care este mai eficient în funcționare și va fi mult mai rapid.

2. Utilizați parola pentru constantelor

Limitarea nefericită a CSS este că nu puteți defini constante, ca în PHP. Constanțele sunt termeni pe care îi puteți defini o dată, care sunt folosiți de restul scriptului, indiferent de scopul codului și incluziunilor.

Puteți opri crearea de stiluri multiple de mai multe ori, pentru a opta pentru un tip pe care îl definiți ca bloc de design. Deoarece CSS nu a fost creat pentru a vă programa site-ul, acesta vă va permite doar să acționați ca designer de interior, ca să spunem așa, nu are capacitatea de a susține constante.

Totuși, acest lucru ar fi cu adevărat util, mai ales în cazul în care gruparea proprietăților dvs. nu va face toată treaba pentru dvs.

Ce puteți face este să creați un ID care să includă toate stilurile de care aveți nevoie. Când trebuie să-l folosiți, adăugați selectorii de care aveți nevoie pentru declarație. Ceea ce vă va face să vă scrieți codul CSS mult mai repede.

3. Comentariu constanta dvs.

Desigur, CSS nu acceptă constante, dar asta nu înseamnă că tot nu poți scrie o referință pentru ceea ce altfel ar fi constante. De ce să nu enumerați stilurile obișnuite într-un comentariu cu mai multe linii?

Depindeți de dvs. să determinați cum veți tasta aceste comentarii, dar puteți crea un fel de tabel cu materiale similare cu acesta:

/ * CSS 'Constante' * * Context: * #ccc9c9 adânc gri, text: * #3a3838 fundal fericit #e7e7e7 mână * * /

Acest lucru este util mai ales pentru mine, deoarece nu este întotdeauna ușor pentru mine să știu rapid care sunt detaliile funcționale ale unui bloc de cod (Constant). A avea un apel invers în apropiere ajută la accelerarea procesului de codificare, deoarece știi exact unde să cauți și nu va trebui să cauți printr-un munte de CSS pentru a găsi punctul în care te-ai referit la un anumit stil.

4. Selectoare grupate

De ce să ne oprim aici? În timp ce vă aflați în el, de ce să nu grupați o mulțime de selectoare care pot fi puse împreună? Acest lucru vă va scuti de probleme de a tasta același stil de mai multe ori:

h1, h2, h3, h4, p {padding: 1 em; font-family: "Times New Roman", timp, serif; } .navigație ul, .navigație li {padding-top: 0,5 em; }

Deși este posibil ca acest lucru să nu funcționeze în toate cazurile, iar exemplul de mai sus cu siguranță nu se va aplica nevoilor dvs. specifice, acesta poate servi drept memento pentru data viitoare când codificați și trebuie să economisiți timp. și în spațiu.

5. Folosiți un preprocesor

Un preprocesor CSS este o extensie a limbajului CSS obișnuit care vă ajută să codificați mai rapid, adăugând în același timp o mulțime de alte caracteristici pe care în mod normal nu le-ați putea adăuga atât de ușor.

Cele mai frecvente preprocesoare CSS în WordPress sunt SASS și LESS și puteți învăța să folosiți ambele.

Preprocesatoarele CSS ușurează mult munca și este destul de normal să vedem cât de mult intră dezvoltatorii în ea odată ce au prins-o.

6. Pseudo-clase

După cum explică specialistul CSS Eric Meyer,  lista stilurilor de legături într-o anumită ordine este important. În caz contrar, ați putea ajunge la linkuri stilizate care nu funcționează așa cum sperați.

Puteți combate acest lucru și puteți economisi timp nefiind nevoit să rezolvați acest tip de problemă în viitor, urmând o ordine simplă pentru pseudo-clasele linkurilor. Vă puteți aminti această comandă cu următorul dispozitiv:

a: link {declarație} a: vizitat {declarație} a: hover {declarație} a: activ {statement}

stilul legăturilor nevizitate este setat mai întâi, apoi vizitat, la mouse-ul și linkurile active. Ca să spun adevărul, ordinea nu contează cu adevărat, scopul este să vă puteți face să vă amintiți această combinație cât mai simplu posibil. Această ordine se numește pseudo-clase „LoVe / HAte”, din cauza literelor utilizate în pseudo-clase.

Din păcate, aceasta nu include pseudo-clasa „focus”, deși ar putea fi considerată pseudo-clasa „activă”. Există, de asemenea, o formulare mnemonică care include această pseudo-clasă, este " LoVe Hurts Fade Departe ":

a: link {declarație} a: vizitat {declarație} a: hover {declarație} a:

7. Utilizați shorthand CSS

Dacă doriți să codificați rapid și eficient, dar fără o curbă de învățare mai abruptă cu ajutorul unui preprocesor, puteți codifica stenograma CSS. Regulile sunt mult mai ușor de învățat, ceea ce vă va facilita utilizarea.

Cu comanda rapidă CSS, puteți condensa mai multe linii într-una singură, fără a pierde funcționalitatea. De exemplu, mai jos veți vedea 3 linii care se aplică la marginea unui element:

#maintain {border-width: 1px; stilul frontal: solid; frontieră-culoare: negru; }

Această linie ar putea fi mult mai simplă:

# mențineți {frontieră: 1px solid negru; }

8. Utilizați comenzile rapide pentru imagini

Comenzile rapide CSS nu pot fi întotdeauna cea mai bună soluție pentru dvs., dar puteți adopta această regulă atunci când lucrați cu culori.

În loc să utilizați un cod hexazecimal din 6 cifre, puteți utiliza doar 3 cifre.

#ffffff = #fff #1144bb = #14b #ffcc44 = #fc4

Cu alte cuvinte, dacă vedeți că un cod de culoare are perechi (prima și a doua valoare, a treia și a patra și ultimele două valori) unde fiecare pereche are același caracter. puteți omite oricare dintre aceste caractere pentru fiecare pereche.

Va dura ceva timp să te obișnuiești, dar sacrificiul va merita. Dacă celelalte forme de comenzi rapide nu sunt obișnuite, nu trebuie să vă faceți griji aici, deoarece comenzile rapide de culoare sunt aproape familiare tuturor.

9. Linkurile nu au nevoie de citare și spațiu

Când adăugați un URI la foaia de stil, formatul regulat și corect include spații simple și duble și ghilimele, ca în acest exemplu:

corp {
background-image: url („Http://www.example.com/deepgray-pattern.png”);
}

După „url („, există un spațiu, ghilimele și un spațiu de închidere care sunt de fapt opționale.

Pentru a vă economisi puțin mai mult timp și spațiu, aceeași linie poate fi scrisă astfel:

corp {
background-image: url (Http://www.example.com/deepgray-pattern.png);
}

Veți observa că spațiul și ghilimelele nu sunt cu adevărat necesare.

10. Analizeaza CSS-ul

Este important saanaliza odată ce ați terminat foaia de stil, pentru a vă asigura că este cât mai curată și ușoară posibil. Acest lucru poate fi dureros, dar, mai important, poate dura ceva timp pentru a finaliza.

Din fericire, există instrumente gratuite cum ar fi Analiza CSS, CSS Dig et CSS Puf. Tot ce trebuie să faceți este să introduceți codul, să selectați unele opțiuni și să faceți clic pe un buton pentru a obține instantaneu un raport pentru codul dvs. CSS.

CSS Lint este și mai sever și vă poate ofensa sensibilitatea în numele progresului, ajutându-vă să vă îmbunătățiți abilitățile de codare.

Oricum, acestea sunt toate opțiunile ușoare disponibile pentru a vă ajuta să simplificațianaliză din foaia de stil pentru a vă asigura că este cât mai sănătoasă posibil.

Asta e tot pentru astea Trucuri pe care le puteți utiliza în diferitele dvs. proiecte CSS. Nu ezitați să ne oferiți Trucuri.