Ö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:
-
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.
-
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. -
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.
-
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.
-
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.
-
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.
