Modular CSS

Modular CSS ölçüləbilir kod yazmaq üçün olan prinsiplər toplusudur.

Yahoo və Yandex developerləri tərəfindən böyük kod bazasını idarə etmək üçün yaradılmışdır.

CSS-də ölçüləndirmə çətindir.

Modular CSS-in yaranmasında əsas məqsəd CSS-in ölçülməsindəki çətinlikdir. Kod yazmaq asandır. Lakin bunu texniki problemlərlə üzləşmədən etmək lazımdır.

Başadüşülə bilən kod yazmaq çətindir.

Kiçik bir nümunə verək. Aşağıdakı kod parçasında bunu yazan developerdən başqa heçkəs bunun nə olduğunu anlamır.

<div class="box profile pro-user">
  <img class="avatar image" />
  <p class="bio">...</p>
</div>

Yəni kimsə box və profile classlarının bir biri ilə necə bağlı olduğunu bilmir və ya avatar ilə image classları bir birinə uyğun olurmu. Bio olmadan pro-user classı mövcud ola bilərmi?

Bunu etmək üçün siz CSS faylında dedektivlik etməlisiniz.

Yenidən istifadə edilə bilən kod yazmaq çətindir.

Məsələn bir kodu götürüb başqa bir səhifədə işlətmək istəyəndə görürsünüz ki bu kod ancaq ilk səhifə üçün yazılıb. Amma siz kodlar üzərində dəyişiklik etməmək üçün onun ikinci versiyasını yazırsınız və buda kod təkrarını gətirib çıxarır.

Bəs nədir bu Modularity?

Modular CSS istifadə etmədən necə kod yazığımızı bir şəkillə sizə izah edim.

Bu səhifəyə baxırıq və düşünürük ki: Tamam səhifə əlimizdəir. İlk olaraq Bir Əsas card elementi var. Onun içində izah mətni altında isə bəyəni və koment düymələri var. Ekranda sağ tərəfdə sidebar var və onun daxilində bir neçə şəkil. Sol tərəfdə isəyenə bir sidebar və daxlində tab elementi və video elemnti var.

Lakin bu düşüncə o qədərdə doğru deyil. Çünu bu bizim saytı tək səhifə şəklində görməyimiz və bəzən kiçik bitlər istifadə edərək kodunu yazdığımız elementi yanlız bu səhifə üçün uyğunlaşdırmağımız deməkdir. Bu isə yazdığımız kodu yenidən istifadə etməmizə imkan vermir.

İndi isə gəlin Modular CSS gözü ilə baxaq . Modular CSS sizdən kodladığınız şeyə səhifə olaraq deyildə kiçik itemlər olaraq baxmanızı istəyir. Yəni bu bir sayt deyil elementlər toplusudur.

Sizin əlinizdə logo, search bar, navigation, Şəkil listi, a secondary nav, a tab qutusu , a video player və s var. Bunlar saytınızın diskret elementləriir və səytınızın istədiyiniz yerində istifadə edə bilərsiniz.

Yəni qısaca Modular CSS ilə baxdığımızda Elementləri lego parçaları kimi görməliyik. Bu həm kodlarınızın oxunaqlığını artırır həm də yenidən istifadəyə kömək edir.

Bunu ən məhşur nümunə Nicole Sullivan rəisin göstərdiyi media bloklarıdır. Bu bloklar bütün səhifələrdə istifadə edilən ən kiçik elementlərdir. Yəni yazdığımız kodun ən kiçik parçasına qədər nəzərə almalıyıq.

Modular Frameworks

1. OOCSS

Obyekt yönümlü CSS və ya OOCSS, 2009-cu ildə Nicole Sullivan tərəfindən yaradılmış və Yahooda istifadə edilmişdir. Modul CSS-in başlanğıc nöqtəsidir. Onun əsas konsepsiyası obyektlərin vizual görünüşü kontekst ilə müəyyənləşdirilməyən təkrar istifadə olunan nümunələr olması idi.

OOCSS haqqıda ətraflı öyrənmək üçün məqaləmə göz ata bilərsiniz

OOCSS nədir? (Object Oriented CSS)

2. BEM

BEM nədir?

3. SMACSS

SMACSS nədir? (CSS metodologiyası 2)

Modular qaydalar:

• Id istifadə etməyin
• CSSləri bir səviyyədən sonra çox iç içə istifadə etməyin
• Child elementlərədə class əlavə edin
• Adlandırma konvensiyasına əməl edin
• Prefiks sinif adlarından istifadə edin (javascript classı üçün js-)