Next.js'de Global ve Yerel Stil

Karmaşık ön uç projelerini yönetmek için Next.js'yi kullanma konusunda harika bir deneyim yaşadım. Next.js, JavaScript kodunun nasıl organize edileceği konusunda fikir sahibidir, ancak CSS'nin nasıl organize edileceği hakkında yerleşik fikirlere sahip değildir.

Çerçeve içinde çalıştıktan sonra, hem Next.js'nin yol gösterici felsefelerine uyduğuna hem de en iyi CSS uygulamalarını uyguladığına inandığım bir dizi organizasyon modeli buldum. Bu yazıda, bu kalıpları göstermek için birlikte bir web sitesi (bir çay dükkanı!) oluşturacağız.

Not : Temel bir React anlayışına sahip olmak ve bazı yeni CSS tekniklerini öğrenmeye açık olmak iyi olsa da, muhtemelen daha önce Next.js deneyimine ihtiyacınız olmayacaktır.

“Eski Moda” CSS Yazma

Next.js'ye ilk baktığımızda, bir tür CSS-in-JS kitaplığı kullanmayı düşünmek isteyebiliriz. Projeye bağlı olarak faydaları olsa da, CSS-in-JS birçok teknik hususu beraberinde getirir. Paket boyutuna ekleyen yeni bir harici kitaplık kullanılmasını gerektirir. CSS-in-JS, küresel durumda ek oluşturmalara ve bağımlılıklara neden olarak performans üzerinde de etki yaratabilir.

Önerilen okuma : “ React Uygulamalarında Modern CSS-in-JS Kitaplıklarının Görünmeyen Performans Maliyetleri)”, Aggelos Arvanitakis

Ayrıca, Next.js gibi bir kitaplık kullanmanın tüm amacı, mümkün olduğunda varlıkları statik olarak oluşturmaktır, bu nedenle, CSS oluşturmak için tarayıcıda çalıştırılması gereken JS'yi yazmak pek mantıklı değil.

Next.js içinde stili düzenlerken göz önünde bulundurmamız gereken birkaç soru var:

Çerçevenin sözleşmelerine/en iyi uygulamalarına nasıl uyabiliriz?

"Küresel" stil kaygılarını (yazı tipleri, renkler, ana düzenler vb.) "yerel" olanlarla (bireysel bileşenlerle ilgili stiller) nasıl dengeleyebiliriz?

İlk soru için bulduğum cevap, sadece eski moda CSS yazmaktır . Next.js, bunu ek kurulum olmadan yapmayı desteklemekle kalmaz; aynı zamanda performanslı ve statik sonuçlar verir.

İkinci sorunu çözmek için dört parçada özetlenebilecek bir yaklaşım izliyorum:

1. Tasarım belirteçleri
2. Küresel stiller
3. Yardımcı sınıflar
4. Bileşen stilleri

Andy Bell'in CUBE CSS fikrine (“Kompozisyon, Yardımcı Program, Blok, İstisna”) burada minnettarım. Bu organizasyon ilkesini daha önce duymadıysanız, resmi sitesine veya Smashing Podcast'teki özelliğine göz atmanızı tavsiye ederim. CUBE CSS'den alacağımız ilkelerden biri, CSS çağlayanından korkmak yerine benimsememiz gerektiği fikridir. Bu teknikleri bir web sitesi projesine uygulayarak öğrenelim.

Başlarken

Bir çay dükkanı inşa edeceğiz çünkü çay lezzetlidir. Yeni bir Next.js projesi yapmak için thread yarn create next-app app'i çalıştırarak başlayacağız. Ardından, styles/ directory her şeyi kaldıracağız (hepsi örnek koddur).

Not : Biten proje ile birlikte takip etmek isterseniz buradan inceleyebilirsiniz.

Tasarım Jetonları

Hemen hemen tüm CSS kurulumlarında, global olarak paylaşılan tüm değerleri değişkenlerde depolamanın açık bir faydası vardır. Bir müşteri bir rengin değişmesini isterse, değişikliği uygulamak, büyük bir bul ve değiştir karmaşası yerine tek bir astardır. Sonuç olarak, Next.js CSS kurulumumuzun önemli bir parçası, site genelindeki tüm değerleri tasarım belirteçleri olarak depolamak olacaktır.

Bu belirteçleri depolamak için yerleşik CSS Özel Özelliklerini kullanacağız. (Bu sözdizimine aşina değilseniz, “A Strategy Guide To CSS Custom Properties”e bakabilirsiniz.) Belirtmeliyim ki (bazı projelerde) bu amaçla SASS/SCSS değişkenlerini kullanmayı tercih ettim. Gerçek bir avantaj bulamadım, bu nedenle genellikle başka SASS özelliklerine (karma, yineleme, dosyaları içe aktarma vb.) Buna karşılık CSS özel özellikleri de kademeli olarak çalışır ve statik olarak derlemek yerine zaman içinde değiştirilebilir. Bu yüzden, bugün için düz CSS ile devam edelim .

Styles styles/ dizinimizde yeni bir design_tokens.css dosyası oluşturalım:

 :root { --green: #3FE79E; --dark: #0F0235; --off-white: #F5F5F3; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --font-size-sm: 0.5rem; --font-size-md: 1rem; --font-size-lg: 2rem; }

Tabii ki, bu liste zamanla büyüyebilir ve büyüyecektir. Bu dosyayı ekledikten sonra, tüm sayfalarımızın ana düzeni olan page/_app.jsx dosyamıza atlamamız ve şunu eklememiz gerekiyor:

 import '../styles/design_tokens.css'

Tasarım belirteçlerini proje boyunca tutarlılığı koruyan yapıştırıcı olarak düşünmeyi seviyorum. Bu değişkenlere küresel ölçekte ve ayrıca tek tek bileşenler içinde referans vererek birleşik bir tasarım dili sağlayacağız.

Küresel Stiller

Sırada, web sitemize bir sayfa ekleyelim! Sayfalar/index.jsx dosyasına geçelim (bu bizim ana sayfamızdır). Tüm ortak bilgileri sileceğiz ve şunun gibi bir şey ekleyeceğiz:

 export default function Home() { return <main> <h1>Soothing Teas</h1> <p>Welcome to our wonderful tea shop.</p> <p>We have been open since 1987 and serve customers with hand-picked oolong teas.</p> </main> }

Ne yazık ki, oldukça sade görünecek, bu yüzden temel öğeler için bazı genel stiller ayarlayalım, örneğin <h1> etiketleri. (Bu stilleri “makul genel varsayılanlar” olarak düşünmeyi seviyorum.) Belirli durumlarda bunları geçersiz kılabiliriz, ancak istemezsek ne isteyeceğimiz konusunda iyi bir tahmindir.

Bunu style/globals.css dosyasına koyacağım (varsayılan olarak Next.js'den gelir):

 *, *::before, *::after { box-sizing: border-box; } body { color: var(--off-white); background-color: var(--dark); } h1 { color: var(--green); font-size: var(--font-size-lg); } p { font-size: var(--font-size-md); } p, article, section { line-height: 1.5; } :focus { outline: 0.15rem dashed var(--off-white); outline-offset: 0.25rem; } main:focus { outline: none; } img { max-width: 100%; }

Tabii ki, bu sürüm oldukça basit, ancak globals.css dosyam genellikle çok fazla büyütülmeye ihtiyaç duymuyor. Burada, temel HTML öğelerini (başlıklar, gövde, bağlantılar vb.) Bu öğeleri React bileşenlerine sarmaya veya yalnızca temel stili sağlamak için sürekli olarak sınıflar eklemeye gerek yoktur.

Ayrıca varsayılan tarayıcı stillerinin tüm sıfırlamalarını da dahil ediyorum. Bazen, örneğin "yapışkan altbilgi" sağlamak için site çapında bir düzen stilim olacak, ancak bunlar yalnızca tüm sayfalar aynı düzeni paylaşıyorsa buraya ait olacak. Aksi takdirde, tek tek bileşenlerin kapsamına alınması gerekecektir.

Odaklandıklarında klavye kullanıcıları için etkileşimli öğeleri net bir şekilde belirtmek için her zaman bir tür :focus stili eklerim. Bunu sitenin tasarım DNA'sının ayrılmaz bir parçası yapmak en iyisidir!

Artık web sitemiz şekillenmeye başlıyor:

Yardımcı Sınıflar

Ana sayfamızın kesinlikle gelişebileceği bir alan, metnin şu anda her zaman ekranın kenarlarına uzanmasıdır, bu yüzden genişliğini sınırlayalım. Bu sayfada bu düzene ihtiyacımız var, ancak diğer sayfalarda da ihtiyacımız olabileceğini hayal ediyorum. Bu, bir yardımcı program sınıfı için harika bir kullanım örneğidir!

Sadece CSS yazmak yerine yardımcı program sınıflarını idareli kullanmaya çalışıyorum. Bir projeye bir tane eklemenin ne zaman mantıklı olduğuna dair kişisel kriterlerim:

1. Tekrar tekrar ihtiyacım var;
2. Bir şeyi iyi yapar;
3. Bir dizi farklı bileşen veya sayfa için geçerlidir.

Bu vakanın üç kriteri de karşıladığını düşünüyorum, bu yüzden yeni bir CSS dosyası style/utilities.css oluşturalım ve şunu ekleyelim:

 .lockup { max-width: 90ch; margin: 0 auto; }

Daha sonra import '../styles/utilities.css' sayfalarımıza/_app.jsx ekleyelim . Son olarak, sayfalarımızdaki <main> etiketini/index.jsx'i <main className="lockup"> olarak değiştirelim.

Artık sayfamız daha da bir araya geliyor. max-width özelliğini kullandığımızdan, mizanpajımızı mobil uyumlu hale getirmek için herhangi bir medya sorgusuna ihtiyacımız yok. Ve yaklaşık olarak bir karakterin genişliğine denk gelen ch ölçü birimini kullandığımız için, boyutlandırmamız kullanıcının tarayıcı yazı tipi boyutuna göre dinamiktir.

Web sitemiz büyüdükçe, daha fazla fayda sınıfı eklemeye devam edebiliriz. Burada oldukça faydacı bir yaklaşım benimsiyorum: Çalışıyorsam ve bir renk veya başka bir şey için başka bir sınıfa ihtiyacım olduğunu bulursam, onu ekliyorum. Güneşin altına mümkün olan her sınıfı eklemiyorum - CSS dosya boyutunu şişirir ve kodumu kafa karıştırıcı hale getirir. Bazen, daha büyük projelerde, işleri birkaç farklı dosya içeren bir styles/utilities/ dizine bölmeyi severim; projenin ihtiyaçlarına kalmış.

Fayda sınıflarını, küresel olarak paylaşılan ortak, tekrarlanan stil komutlarından oluşan araç takımımız olarak düşünebiliriz. Aynı CSS'yi farklı bileşenler arasında sürekli olarak yeniden yazmamızı engellemeye yardımcı olurlar.

Bileşen Stilleri

Şu an için ana sayfamızı bitirdik, ancak yine de web sitemizin bir parçasını oluşturmamız gerekiyor: çevrimiçi mağaza. Buradaki amacımız , satmak istediğimiz tüm çayların bir kart ızgarasını görüntülemek olacak, bu yüzden sitemize bazı bileşenler eklememiz gerekecek.

Sayfalar/shop.jsx'e yeni bir sayfa ekleyerek başlayalım:

 export default function Shop() { return <main> <div className="lockup"> <h1>Shop Our Teas</h1> </div> </main> }

Ardından, sergilemek için bazı çaylara ihtiyacımız olacak. Her çay için bir isim, açıklama ve resim (genel/ dizinde) ekleyeceğiz:

 const teas = [ { name: "Oolong", description: "A partially fermented tea.", image: "/oolong.jpg" }, // ... ]

Not : Bu, veri alma ile ilgili bir makale değildir, bu nedenle kolay yolu seçtik ve dosyanın başında bir dizi tanımladık.

Ardından, çaylarımızı görüntülemek için bir bileşen tanımlamamız gerekecek. Bir components/ dizin oluşturarak başlayalım (Next.js bunu varsayılan olarak yapmaz). Ardından bir components/TeaList dizini ekleyelim. Birden fazla dosyaya ihtiyaç duyan herhangi bir bileşen için genellikle ilgili tüm dosyaları bir klasöre koyarım. Bunu yapmak, components/ klasörümüzün gezilemez duruma gelmesini önler.

Şimdi bileşenlerimizi/TeaList/TeaList.jsx dosyamızı ekleyelim:

 import TeaListItem from './TeaListItem' const TeaList = (props) => { const { teas } = props return <ul role="list"> {teas.map(tea => <TeaListItem tea={tea} key={tea.name} />)} </ul> } export default TeaList

Bu bileşenin amacı, çaylarımızı yinelemek ve her biri için bir liste öğesi göstermektir, şimdi bileşenlerimizi/TeaList/TeaListItem.jsx bileşenimizi tanımlayalım:

 import Image from 'next/image' const TeaListItem = (props) => { const { tea } = props return <li> <div> <Image src={tea.image} alt="" objectFit="cover" objectPosition="center" layout="fill" /> </div> <div> <h2>{tea.name}</h2> <p>{tea.description}</p> </div> </li> } export default TeaListItem

Next.js'nin yerleşik görüntü bileşenini kullandığımızı unutmayın. alt niteliğini boş bir dizeye ayarladım çünkü bu durumda görüntüler tamamen dekoratif; ekran okuyucu kullanıcılarını burada uzun resim açıklamalarıyla boğmaktan kaçınmak istiyoruz.

Son olarak bir component/TeaList/index.js dosyası oluşturalım, böylece bileşenlerimiz dışarıdan kolayca alınabilir:

 import TeaList from './TeaList' import TeaListItem from './TeaListItem' export { TeaListItem } export default TeaList

Ardından, ../components/TeaList'ten import ../components/TeaList ve Shop sayfamıza bir <TeaList teas={teas} /> öğesi ekleyerek hepsini bir araya getirelim. Şimdi çaylarımız bir listede görünecek ama o kadar da güzel olmayacak.

Stilleri CSS Modülleri Aracılığıyla Bileşenlerle Birlikte Yerleştirme

Kartlarımızı şekillendirerek başlayalım ( TeaListLitem bileşeni). Şimdi, projemizde ilk kez, sadece bir bileşene özgü stil eklemek isteyeceğiz. Yeni bir dosya component/TeaList/TeaListItem.module.css oluşturalım .

Dosya uzantısındaki modülü merak ediyor olabilirsiniz. Bu bir CSS Modülüdür . Next.js, CSS modüllerini destekler ve bunlarla ilgili bazı iyi belgeler içerir. Bir CSS modülünden .TeaListItem gibi bir sınıf adı yazdığımızda, otomatik olarak daha çok benzeri bir şeye dönüştürülür . TeaListItem_TeaListItem__TFOk_ . TeaListItem_TeaListItem__TFOk_ , üzerine bir sürü ekstra karakter eklenmiş. Sonuç olarak, sitemizdeki diğer sınıf adlarıyla çakışacağından endişe duymadan istediğimiz herhangi bir sınıf adını kullanabiliriz .

CSS modüllerinin bir diğer avantajı da performanstır. Next.js, dinamik bir içe aktarma özelliği içerir. next/dynamic, bileşenleri tembel olarak yüklememize izin verir, böylece kodları tüm paket boyutuna eklemek yerine yalnızca gerektiğinde yüklenir. Gerekli yerel stilleri ayrı bileşenlere aktarırsak, kullanıcılar dinamik olarak içe aktarılan bileşenler için CSS'yi tembelce yükleyebilirler . Büyük projeler için, kodumuzun önemli parçalarını tembelce yüklemeyi ve yalnızca en gerekli JS/CSS'yi önceden yüklemeyi seçebiliriz. Sonuç olarak, genellikle yerel stile ihtiyaç duyan her yeni bileşen için yeni bir CSS Modülü dosyası oluşturuyorum.

Dosyamıza bazı başlangıç ​​stilleri ekleyerek başlayalım:

 .TeaListItem { display: flex; flex-direction: column; gap: var(--space-sm); background-color: var(--color, var(--off-white)); color: var(--dark); border-radius: 3px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); }

Ardından, TeaListitem bileşenimizdeki ./TeaListItem.module.css stili içe aktarabiliriz. Stil değişkeni bir JavaScript nesnesi gibi gelir, böylece bu sınıf benzeri style.TeaListItem.

Not : Sınıf ismimizin büyük harfle yazılmasına gerek yoktur. Modüllerin içindeki büyük harfli sınıf adlarının (ve dışındaki küçük harfli adların) bir kuralının yerel ve küresel sınıf adlarını görsel olarak ayırt ettiğini buldum.

Şimdi yeni yerel sınıfımızı alalım ve onu TeaListItem bileşenimizdeki <li> öğesine atayalım:

 <li className={style.TeaListComponent}>

Arka plan renk çizgisini merak ediyor olabilirsiniz (yani var(--color, var(--off-white)); ). Bu snippet'in anlamı, varsayılan olarak arka planın --off-white değerimiz olacağıdır. Ancak, bir kartta --color özel bir özellik ayarlarsak, geçersiz kılar ve bunun yerine bu değeri seçer.

İlk başta, tüm kartlarımızın --off-white olmasını isteyeceğiz, ancak daha sonra tek tek kartların değerini değiştirmek isteyebiliriz. Bu, React'teki aksesuarlara çok benzer şekilde çalışır. Varsayılan bir değer belirleyebiliriz ancak belirli durumlarda diğer değerleri seçebileceğimiz bir yuva oluşturabiliriz. Bu nedenle, bizi CSS'nin props versiyonu gibi CSS özel özelliklerini düşünmeye teşvik ediyorum.

Stil yine de harika görünmeyecek çünkü görüntülerin kapsayıcıları içinde kaldığından emin olmak istiyoruz. Next.js'nin layout="fill" prop içeren Image bileşeni, position: absolute; çerçeveden, böylece konumu bir kapsayıcıya koyarak boyutu sınırlayabiliriz: göreceli;.

TeaListItem.module.css dosyamıza yeni bir sınıf ekleyelim:

 .ImageContainer { position: relative; width: 100%; height: 10em; overflow: hidden; }

Ardından, <Image> dosyamızı içeren <div> üzerine className={styles.ImageContainer} . Bir CSS modülünün içinde olduğumuz için ImageContainer gibi nispeten "basit" adlar kullanıyorum, bu nedenle dış stille çakışma konusunda endişelenmemize gerek yok.

Son olarak, metnin kenarlarına biraz dolgu eklemek istiyoruz, bu yüzden son bir sınıf ekleyelim ve tasarım belirteçleri olarak ayarladığımız boşluk değişkenlerine güvenelim:

 .Title { padding-left: var(--space-sm); padding-right: var(--space-sm); }

Adımızı ve açıklamamızı içeren <div> sınıfına bu sınıfı ekleyebiliriz. Şimdi, kartlarımız o kadar da kötü görünmüyor:

Küresel ve Yerel Tarzı Birleştirme

Ardından, kartlarımızın ızgara düzeninde gösterilmesini istiyoruz. Bu durumda, yerel ve küresel stiller arasındaki sınırdayız. Düzenimizi kesinlikle doğrudan TeaList bileşeninde kodlayabiliriz. Ancak, bir listeyi ızgara düzenine dönüştüren bir yardımcı program sınıfına sahip olmanın başka yerlerde de yararlı olabileceğini hayal edebiliyorum.

Burada global yaklaşımı ele alalım ve style/utilities.css dosyamıza yeni bir yardımcı program sınıfı ekleyelim:

 .grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--min-item-width, 30ch), 1fr)); gap: var(--space-md); }

Artık .grid sınıfını herhangi bir listeye ekleyebiliriz ve otomatik olarak yanıt veren bir ızgara düzeni elde ederiz. Her öğenin minimum genişliğini değiştirmek için --min-item-width özel özelliğini de (varsayılan 30ch ) değiştirebiliriz.

Not : Sahne malzemeleri gibi özel özellikleri düşünmeyi unutmayın! Bu sözdizimi size tanıdık gelmiyorsa, Chris Coyier'in “ minmax() And min() ile Kendinden Duyarlı CSS Izgarasına” göz atabilirsiniz.

Bu stili global olarak yazdığımız için, TeaList bileşenimize className="grid" eklemek herhangi bir fantezi gerektirmiyor. Ancak, bu küresel stili bazı ek yerel mağazalarla birleştirmek istediğimizi varsayalım. Örneğin, "çay estetiğini" biraz daha getirmek ve diğer tüm kartların yeşil bir arka plana sahip olmasını sağlamak istiyoruz. Tek yapmamız gereken yeni bir component/TeaList/TeaList.module.css dosyası oluşturmak:

 .TeaList > :nth-child(even) { --color: var(--green); }

TeaListItem bileşenimizde nasıl --color --color custom bir özellik yaptığımızı hatırlıyor musunuz? Pekala, şimdi belirli koşullar altında ayarlayabiliriz. Alt seçicileri CSS modüllerinde kullanmaya devam edebileceğimizi ve farklı bir modül içinde stil verilmiş bir öğe seçmemizin bir önemi olmadığını unutmayın. Bu nedenle, alt bileşenleri etkilemek için yerel bileşen stillerimizi de kullanabiliriz. Bu, CSS kademesinden yararlanmamıza izin verdiği için bir hatadan ziyade bir özelliktir! Bu efekti başka bir şekilde kopyalamaya çalışırsak, muhtemelen üç satır CSS yerine bir çeşit JavaScript çorbasıyla sonuçlanırdık.

O halde, yerel .TeaList sınıfını da eklerken global .grid sınıfını TeaList bileşenimizde nasıl tutabiliriz? Burada sözdizimi biraz tuhaflaşabilir çünkü style.TeaList gibi bir şey yaparak CSS modülünden .TeaList style.TeaList .

Bir seçenek, şöyle bir şey elde etmek için dize enterpolasyonunu kullanmak olacaktır:

 <ul role="list" className={`${style.TeaList} grid`}>

Bu küçük durumda, bu yeterince iyi olabilir. Daha fazla sınıfı karıştırıyor ve eşleştiriyorsak, bu sözdiziminin beynimi biraz patlattığını görüyorum, bu yüzden bazen sınıf adları kitaplığını kullanmayı tercih edeceğim. Bu durumda, daha mantıklı görünen bir listeyle sonuçlanırız:

 <ul role="list" className={classnames(style.TeaList, "grid")}>

Şimdi, Mağaza sayfamızı bitirdik ve TeaList bileşenimizin hem küresel hem de yerel stillerden yararlanmasını sağladık.

Dengeleme Yasası

Stili işlemek için artık çay dükkanımızı yalnızca düz CSS kullanarak oluşturduk. Özel Web paketi kurulumlarıyla, harici kitaplıkları kurmayla vb. uğraşmak için çok zaman harcamak zorunda olmadığımızı fark etmiş olabilirsiniz. Bunun nedeni, kullandığımız kalıpların kutudan çıktığı gibi Next.js ile çalışmasıdır. Ayrıca, en iyi CSS uygulamalarını teşvik ederler ve Next.js çerçeve mimarisine doğal olarak uyarlar.

CSS organizasyonumuz dört temel parçadan oluşuyordu:

1. Tasarım belirteçleri,
2. küresel stiller,
3. Yardımcı sınıflar,
4. Bileşen stilleri.

Sitemizi oluşturmaya devam ettikçe, tasarım belirteçleri listemiz ve faydalı sınıflar büyüyecek. Yardımcı sınıf olarak eklenmesi mantıklı olmayan herhangi bir stil, CSS modüllerini kullanarak bileşen stillerine ekleyebiliriz. Sonuç olarak, yerel ve küresel stil kaygıları arasında sürekli bir denge bulabiliriz. Ayrıca Next.js sitemizin yanında doğal olarak büyüyen , performanslı, sezgisel CSS kodu da oluşturabiliriz .