CSS modülleri, CSS sınıfı adlarını yerel olarak kapsamak için bir yol 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ı, neden kullanmanız gerektiğini ve bunları bir React projesinde nasıl uygulayacağınızı öğrenin.

CSS Modülleri Nedir?

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

CSS modül sınıflarını tıpkı normal sınıflar gibi yazarsınız. Ardından derleyici, CSS’yi tarayıcıya göndermeden önce benzersiz sınıf adları üretir.

Örneğin, styles.modules.css adlı bir dosyada şu .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 kılmak 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 saklayabildiğ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ı ele alalım. Bu sınıfı, oluşturmaları kullanarak 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. Ayrıca başka bir CSS modülünden şu şekilde stiller oluşturabilirsiniz:

.submit {

composes:primary from “./colors.css”

background-color: green;

}

Composes 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ırsanız, CSS modülleri kutudan çıkar çıkmaz kurulur. 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 kurulu olan düğüm.

ES6 modülleri hakkında temel bir anlayış.

Temel bir React anlayışı .

React Uygulaması Oluşturma

İşleri basitleştirmek için, bir React uygulamasını oluşturmak için create-react-app’i 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-modules 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. Button bileşenini ve stillerini bu klasöre ekleyeceksiniz.

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

export default function Button() {

return (

<button>Submit</button>

)

}

Ardından, Button.module.css adlı 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 button öğesinin sınıf adında şu şekilde referans verin:

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 ve hatta sınıfları birleştirmek isteyebilirsiniz. Bunun için daha önce bu yazıda bahsedildiği gibi composes anahtar kelimesini 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. Bu nedenle, düğme bir gönder düğmesiyse, sınıf adı “gönder” olacaktır. Eğer “hata” ise, sınıf adı “hata” olur ve bu şekilde devam eder.

Her düğme için tüm stilleri sıfırdan yazmak yerine composes anahtar sözcüğünü kullanmak için, Button.module.css dosyasına aşağıdakini 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.

Uygulamada kullanılan renkleri içeren ve color.module.css adlı harici bir CSS modülü ile bunu daha da ileriye taşıyabilirsiniz. Daha sonra bu modülü diğer modüllerde kullanabilirsiniz. Örneğin, Components klasörünün kök dizininde color.module.css dosyasını aşağıdaki kodla 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ı kullanmak için birincil ve ikincil sınıfları şu şekilde 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 yoluyla yeniden kullanabilirsiniz.

CSS modüllerini kullanımınızı güçlendirmek için Sass’ı kullanın. Sass—Syntactically Awesome Style Sheets—bir ton özellik sağlayan bir CSS ön işlemcisidir. İç içe yerleştirme, değişkenler ve CSS’de bulunmayan kalıtım desteği içerirler. Sass ile uygulamanıza daha karmaşık özellikler ekleyebilirsiniz.