Niyə sadə bir vergül kodu kodlaşdırmağı asanlaşdırır?
CSS, və ya Cascading Style Sheets, veb-dizayn sənayesinin bir sayta vizual üslubları əlavə etmək üçün qəbul edilmiş üsuludur. CSS ilə səhifə düzeni, rənglər, mətbəə , fon imicini və daha çoxunu idarə edə bilərsiniz. Əsasən, bir vizual üslub olsa, onda CSS bu üslubları veb saytınıza gətirmək yoludur.
Sənədə CSS üslubları əlavə edərkən, sənədin daha uzun və daha uzun olmağa başlayacağını görürsünüz. Yalnız bir neçə səhifədən ibarət olan kiçik bir sayt hətta böyük CSS faylları ilə sona çatdıra bilər və çoxlu sayda və çoxlu səhifələrlə unikal məzmunlu səhifələr çox böyük CSS fayllarına malik ola bilər. Bu, görsellərin görünüşünü və səhifənin müxtəlif ekranlar üçün necə göründüyünü dəyişdirmək üçün stillərə daxil olan çoxlu media sorguları olan həssas saytlar tərəfindən mürəkkəbdir.
Bəli, CSS faylları uzun ola bilər. Hətta uzun bir CSS faylı olduqca kiçik olacağı ehtimalı (bu həqiqətən yalnız bir mətn sənəd olduğundan) sayt performansına və yüklənmə sürətinə gəldikdə bu, böyük bir problem deyil. Hələ, hər bir az sayda səhifə sürətinə gəldikdə sayılır, buna görə də stilinizə daha yaltaq olarsa, yaxşı bir fikirdir. Bu, "vergül" stilinizdə çox faydalı ola bilər!
Commas və CSS
Virgülün CSS seçici sintaksisində hansı rol oynadığını merak etmiş ola bilərsiniz. Cümlələrdə olduğu kimi, virgül ayıranlara deyil, aydınlıq gətirir. CSS seçicisindəki virgül eyni stillər içərisində çoxlu seçiciləri ayırır.
Məsələn, aşağıdakı CSS-ə baxaq.
th {rəng: qırmızı; }
td {rəng: qırmızı; }
p.red {rəng: qırmızı; }
div # firstred {rəng: qırmızı; }
Bu sözdizimlə, th tags, td tags, paraqraf etiketlərini sinfi qırmızı ilə istəməyiniz və ID ilə div etiketinin stil rənginin qırmızı olması üçün hər kəsi ilk etdiyini söyləyirsiniz.
Bu mükəmməl məqbul CSS, lakin bu şəkildə yazmaq üçün iki əhəmiyyətli çatışmazlıq var:
- Gələcəkdə, bu xüsusiyyətlərin font rəngini maviyə dəyişdirməyi qərara alırsanız, bu dəyişməni stilinizdə dörd dəfə dəyişməlisiniz.
- Stilinizə lazım olmayan bir çox əlavə simvol əlavə edir. Bu 4 üslub aşkillə görünməyəcək, amma bunu bütün üslubda düzəltməyə davam etsəniz, xəttlər əlavə ediləcək və o hesabat çox olacağından daha çox olacaqdır.
Bu çatışmazlıqlar qarşısını almaq və CSS dosyanızı düzəltmək üçün virgül istifadə etməyə çalışacağıq.
Ayrı ayrı seçicilərə aid spamlardan istifadə etmək
4 ayrı CSS seçiciləri və 4 qaydaları yazmaq əvəzinə fərdi seçiciləri virgüllə ayıraraq bütün bu üslubları bir qayda xüsusiyyətinə birləşdirə bilərsiniz. Bunun necə ediləcəyi belədir:
th, td, p.red, div # firstred (rəng: qırmızı; }
Virgül xarakteri əsasən selector içərisində "və" sözü kimi çıxış edir. Beləliklə, bu, t h tags və TD tags və paraqraf etiketləri üçün sinif qırmızı və div the firstred ID ilə etiket üçün aiddir. Bu, əvvəlki kimi, amma 4 CSS qaydalarına ehtiyacımız olmasa, bir çox seçicilərlə bir qayda var. Verginin selektorda verdiyi budur, bir qayda olaraq birdən çox seçiciyə sahib olmaq imkanı verir.
Bu yanaşma yalnız daha təmiz, daha təmiz CSS faylları üçün deyil, gələcək yenilikləri də asanlaşdırır. Rəngləri qırmızıdan maviyə dəyişdirmək istəyirsənsə, indi yalnız orijinal 4 üslub qaydalarımızın əvəzinə bir yerdə dəyişiklik etmək lazımdır! Bütün bir CSS faylında bu zaman qənaətlərini düşünün və bu da uzun müddətdə həm vaxtınızı həm də yerinizi necə qurtaracaqlarını görə bilərsiniz!
Sintaksis Varyasiyası
Bəzi insanlar CSS-ni hər bir seçicini öz xəttinə ayıraraq daha aydınlaşdırmaq üçün seçirlər. Bunu necə edəcəyik?
th,
td,
p.red,
div # ləqəbli
{
rəng: qırmızı;
}
Hər bir selektordan sonra bir vergül qoyduğunuza və sonrakı selektorun öz xəttinə keçmək üçün "daxil edin". Son seçicidən sonra vergül əlavə etmirsiniz.
Seçiciləriniz arasında vergüllər istifadə edərək, gələcəkdə yeniləmə daha asan və bu gün oxumaq daha asandır daha kompakt stil yaratmaq!
Jennifer Krynin tərəfindən hazırlanan əsər. Jeremy Girard tərəfindən 5/8/17 tarixində ediləcək