Monolitik CSS kodunuzu, CSS modüllerinin yardımıyla küçük, yeniden kullanılabilir parçalara bölün.

CSS modülleri, CSS sınıf adlarını yerel olarak kapsamanın bir yolunu sağlar. Aynı sınıf adını kullandığınızda stilleri geçersiz kılma konusunda endişelenmenize gerek yoktur.

CSS modüllerinin nasıl çalıştığını, bunları neden kullanmanız gerektiğini ve bunları bir React projesinde nasıl uygulayacağınızı öğrenin.

CSS Modülleri Nelerdir?

CSS modülleri belgeleri, bir CSS modülünü, sınıf adları varsayılan olarak yerel olarak kapsanan bir CSS dosyası olarak tanımlar. Bu, farklı CSS dosyalarında aynı ada sahip CSS değişkenlerini adresleyebileceğiniz anlamına gelir.

Normal sınıflar gibi CSS modül sınıfları yazıyorsunuz. Ardından derleyici, CSS’yi tarayıcıya göndermeden önce benzersiz sınıf adları oluşturur.

Örneğin, style.modules.css adlı bir dosyada aşağıdaki .btn sınıfını düşünün:

.btn {

    width: 90px;

    height: 40px;

    padding: 10px 20px;

}

Bu dosyayı kullanmak için onu bir JavaScript dosyasına aktarmanız gerekir.

import styles from “./styles.module.js”

Şimdi, .btn sınıfına başvurmak ve onu bir öğede kullanılabilir hale getirmek için sınıfı aşağıda gösterildiği gibi kullanırsınız:

class=”styles.btn”

Oluşturma işlemi, CSS sınıfını _styles__btn_118346908 gibi benzersiz bir biçim adıyla değiştirecektir.

Sınıf adlarının benzersizliği, farklı bileşenler için aynı sınıf adını kullansanız bile bunların çakışmayacağı anlamına gelir. Bir bileşenin CSS stillerini o bileşene özel tek bir dosyada saklayabileceğiniz için daha fazla kod bağımsızlığını garanti edebilirsiniz.

Bu, özellikle birden çok stil sayfasıyla çalışıyorsanız hata ayıklamayı basitleştirir. Yalnızca belirli bir bileşen için CSS modülünü izlemeniz gerekir.

CSS modülleri ayrıca, composes anahtar sözcüğü aracılığıyla birden çok sınıfı birleştirmenize olanak tanır. Örneğin, yukarıdaki .btn sınıfını düşünün. Besteleri kullanarak bu sınıfı diğer sınıflarda “genişletebilirsiniz”.

Gönder düğmesi için şunlara sahip olabilirsiniz:

.btn {

    /* styles */

}

.submit {

    composes: btn;

    background-color: green;

    color:#FFFFFF

}

Bu, .btn ve .submit sınıflarını birleştirir. Bunun gibi başka bir CSS modülünden stiller de oluşturabilirsiniz:

.submit {

    composes:primary from “./colors.css”

    background-color: green;

}

Oluşturma kuralını diğer kurallardan önce yazmanız gerektiğini unutmayın.

React’te CSS Modülleri Nasıl Kullanılır?

React’te CSS modüllerini nasıl kullandığınız, React uygulamasını nasıl oluşturduğunuza bağlıdır.

Create-react-app kullanıyorsanız, CSS modülleri kutudan çıkar. Ancak uygulamayı sıfırdan oluşturacaksanız, webpack gibi bir derleyici ile CSS modüllerini yapılandırmanız gerekecektir.

Bu eğiticiyi takip etmek için şunlara sahip olmalısınız:

• Makinenizde yüklü düğüm.
• ES6 modüllerinin temel bir anlayışı.
• Temel bir React anlayışı .
• Bir React Uygulaması Oluşturma
• İşleri basit tutmak için, bir React uygulamasını desteklemek için create-react-app kullanabilirsiniz.

React -css-modules adlı yeni bir React projesi oluşturmak için bu komutu çalıştırın :

npx create-react-app react-css-modules

Bu, React’i kullanmaya başlamak için gereken tüm bağımlılıkları içeren tepki-css-modülleri adlı yeni bir dosya oluşturacaktır.

Düğme Bileşeni Oluşturma

Bu adımda bir Button bileşeni ve Button.module.css adında bir CSS modülü oluşturacaksınız. src klasöründe Bileşenler adlı yeni bir klasör oluşturun. Bu klasörde Button adlı başka bir klasör oluşturun. Düğme bileşenini ve stillerini bu klasöre ekleyeceksiniz.

src/Components/ Button’a gidin ve Button.js’yi oluşturun.

export default function Button() {

    return (

        <button>Submit</button>

    )

}

Ardından Button.module.css adında yeni bir dosya oluşturun ve aşağıdakileri ekleyin.

.btn {

    width: 90px;

    height: 40px;

    padding: 10px 20px;

    border-radius: 4px;

    border: none;

}

Bu sınıfı Button bileşeninde kullanmak için onu stiller olarak içe aktarın ve aşağıdaki gibi button öğesinin sınıf adında referans alın:

import styles from “./Button.module.css”

export default function Button() {

    return (

        <button className={styles.btn}>Submit</button>

    )

}

Bu, tek bir sınıfın nasıl kullanılacağını gösteren basit bir örnektir. Stilleri farklı bileşenler arasında paylaşmak veya hatta sınıfları birleştirmek isteyebilirsiniz. Bunun için bu makalede daha önce bahsedildiği gibi composes anahtar sözcüğünü kullanabilirsiniz.

Kompozisyonu Kullanma

İlk olarak, Button bileşenini aşağıdaki kodla değiştirin.

import styles from “./Button.module.css”

export default function Button({type=”primary”, label=”Button”}) {

    return (

        <button className={styles[type]}>{label}</button>

    )

}

Bu kod, bir tür değerini prop olarak kabul ederek Button bileşenini daha dinamik hale getirir. Bu tür, düğme öğesine uygulanan sınıf adını belirleyecektir. Yani bu buton bir gönder butonu ise, sınıf adı “gönder” olacaktır. Eğer “hata” ise, sınıf adı “hata” olacaktır, vb.

Her düğme için tüm stilleri sıfırdan yazmak yerine composes anahtar sözcüğünü kullanmak için Button.module.css’ye aşağıdakileri ekleyin.

.btn {

    width: 90px;

    height: 40px;

    padding: 10px 20px;

    border-radius: 4px;

    border: none;

}

.primary {

    composes: btn;

    color: #FFFFFF;

    background-color: #6E41E2;

}

.secondary {

    composes: btn;

    color: #6E41E2;

    background-color: #FFFFFF;

}

Bu örnekte, birincil sınıf ve ikincil sınıf, btn sınıfını kullanır. Bunu yaparak, yazmanız gereken kod miktarını azaltırsınız.

Bunu, uygulamada kullanılan renkleri içeren color.module.css adlı harici bir CSS modülü ile daha da ileri götürebilirsiniz . Daha sonra bu modülü diğer modüllerde kullanabilirsiniz. Örneğin, aşağıdaki kodla Components klasörünün kökünde color.module.css dosyasını oluşturun:

.primaryBg {

    background-color: #6E41E2

}

.secondaryBg {

    background-color: #FFFFFF

}

.primaryColor {

    color: #FFFFFF

}

.secondaryColor {

    color: #6E41E2

}

Şimdi Button/Button.module.css dosyasında, yukarıdaki sınıfları aşağıdaki gibi kullanmak için birincil ve ikincil sınıfları değiştirin:

.primary {

    composes: btn;

    composes: primaryColor from “../colors.module.css”;

    composes: primaryBg from “../colors.module.css”;

}

.secondary {

    composes: btn;

    composes: secondaryColor from “../colors.module.css”;

    composes: secondaryBg from “../colors.module.css”;

}

CSS Modülleri ile Sass

Kod tabanınızın modülerliğini geliştirmek için CSS modüllerini kullanabilirsiniz. Örnek olarak, bir düğme bileşeni için basit bir CSS sınıfı oluşturabilir ve CSS sınıflarını kompozisyon aracılığıyla yeniden kullanabilirsiniz.

CSS modülleri kullanımınızı güçlendirmek için Sass kullanın. Sass — Sözdizimsel Olarak Müthiş Stil Sayfaları — bir ton özellik sağlayan bir CSS ön işlemcisidir. CSS’de bulunmayan iç içe yerleştirme, değişkenler ve kalıtım için destek içerirler. Sass ile uygulamanıza daha karmaşık özellikler ekleyebilirsiniz.