Bölüm 3: Sass Mimarimizi İnşa Etmek

Faydalı Alternatif Metin Yazma

Önceki iki makalede, NPM komut dosyalarını kullanarak bir proje başlatıcı deposunu yapılandırdık ve Parsel. Her proje için aşağı yukarı aynı Sass mimarisini kullanma eğilimindeyim, bu yüzden hemen kod yazmaya başlamak için ihtiyacım olan SCSS dosyalarını ve klasörlerini ortak plakamın içermesini istiyorum. Bu benim tercih ettiğim mimari, gevşek bir şekilde Harry Roberts’ın ITCSS (Ters Üçgen CSS) ve önceki ajansımdaki ortak çalışmamız, Çamur:

  1. yapılandırma Bu genellikle üç dosya içerir: Proje boyunca kullanmak için tüm Sass değişkenlerini, karışımları ve işlevi burada tanımlıyorum. Değişkenlerim için genellikle kesme noktalarını, renkleri, boşlukları ve diğer her şeyi kapsayan tek bir dosya kullanırım. Ancak değişkenler dosyasının birkaç dosyaya bölünememesi için hiçbir neden yoktur, bu büyük projeler için iyi bir fikir olabilir.

  2. Temel Buradaki hemen hemen her şey, sınıflardan ziyade eleman seçicilere stil yazmayı içerir. Herhangi bir sıfırlamayı içerir (örn. * { box-sizing: border-box; }) ve bazıları daha sonra bileşen düzeyinde geçersiz kılınabilecek tipografi ve form öğeleri için temel stiller.

  3. nesneler Birden çok bileşende görünebilecek küçük, yeniden kullanılabilir kullanıcı arabirimi parçaları buraya aittir. bir ile başlıyorum düğmeler.scss dosya çünkü, hemen hemen her projenin düğmeleri var! Ama sadece ihtiyacım olduğunda başkalarını ekleme eğilimindeyim.

  4. küreseller Üstbilgi ve altbilgi gibi her sayfada kullanılacak bileşenleri diğer bileşenlerden ayrı bir klasörde tutmayı seviyorum. Ayrıca, örneğin birçok yerde kullanmak istediğim bir ızgaram varsa, buraya genel düzen sınıfları da ekliyorum. Daha az soyutlama düzeyi olduğu için, bunlar için karışımlar yerine sınıfları kullanmayı tercih ederim.

  5. Bileşenler Bu, kahraman bölümleri, kartlar, medya nesneleri ve daha fazlası gibi daha büyük kullanıcı arayüzü parçaları içindir. CSS’imin büyük bir kısmının yazılacağı yer burası, ancak başlangıçta boş bırakıyorum, böylece tek tek bileşen dosyalarını ihtiyaç duyduğumda ve gerektiğinde ekleyebilirim.

  6. Araçlar Bu, herhangi bir öğeye uygulanabilen tek amaçlı, yeniden kullanılabilir atomik (veya yardımcı program) sınıfları içindir. Örneğin, bu sınıfın uygulandığı tüm öğelerde dikey dolguyu ayarlamak için aşağıdakiler kullanılabilir:

.padding-v {
padding-top: var(--pad);
padding-bottom: var(--pad);
}

Bunların çoğunu kullanmama eğilimindeyim, bu yüzden ihtiyacım olana kadar bu dosyayı boş bırakacağım.

Bu nedenle, proje başlatıcımızı bitirmek için aşağıdaki dosya yapısını ekleyeceğim. kaynak/scss dizin:

01-config
	_variables.scss
	_functions.scss
	_mixins.scss
02-base
	_resets.scss
	_typography.scss
	_forms.scss
03-objects
	_buttons.scss
04-globals
	_header.scss
	_footer.scss
	_layout.scss
05-components
06-utilities

Her klasörün sayısal bir ön eki olduğunu fark edebilirsiniz – bu, dosya sisteminde görüntülendiğinde görsel sıranın içe aktarma sırasını yansıtması içindir. Bu, istediğim dosyayı bulmayı çok daha hızlı ve kolay hale getirecek ve herhangi bir karışıklığı önlemeye yardımcı olacaktır.

Muhtemelen kendi tercih ettiğiniz Sass mimarisine sahip olacaksınız, bu yüzden en azından standart bir klasör yapısı eklemenizi tavsiye ederim – veya bunu değiştirmekten çekinmeyin. Atomik bir CSS çerçevesi kullansanız bile (gibi arka rüzgar), muhtemelen biraz CSS yazmanız gerekebilir, bu nedenle mimarinin yerinde olması mantıklıdır.

Çözüm

Bu, Modern Bir Ön Uç İş Akışı’ndaki mini diziyi tamamlıyor. NPM paketlerini kurmayı, görevleri çalıştırmak için komut dosyaları yazmayı, daha kolay otomasyon için Parsel’i kullanmayı ve temel bir Sass mimarisi eklemeyi öğrendik. Bu başlangıç ​​deposu ele aldığımız her şeyi içerir. Kendi projeleriniz için klonlamaktan veya çatallamaktan – ve eklemekten – çekinmeyin.

Bu serideki diğer makalelere bakın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.