Önce Model Kitaplığı: CSS'yi Yönetmek İçin Bir Yaklaşım

Bu makalede, Toronto'daki Smashing Konferansı'nda verdiğim konuşmaya dayanarak, projelerim arasında CSS'yi yönetmeme yardımcı olan, son iki yılda benimsediğim bir çalışma yöntemini anlatacağım.

CSS'nizi bileşen bazında yönetmek ve zaten aşina olduğunuz araçları kullanmanıza izin vermek için model kitaplığı aracı Fractal'ı nasıl kullanacağınızı göstereceğim. Bu, Fraktal'a ve neden bu özel model kitaplığını seçtiğimize bir giriş olarak hizmet etse de, bu çalışma şeklinin diğer çözümlere geçmesi muhtemeldir.

Projelerimiz

Şirketimin birkaç ürünü var - Perch ve Perch Runway CMS ve Notist, halka açık konuşmacılar için bir hizmet uygulaması olarak yazılım. Bu ürünler, özellikle Perch'in kendi kendine barındırılan bir sistem olduğu ve Notist'in SaaS olduğu göz önüne alındığında oldukça farklıdır, ancak her ikisinin de geliştirilecek çok sayıda kullanıcı arayüzü vardır. Ayrıca, bu ürünlerle ilgili tüm web sitelerine ve belgelere ve ayrıca 24 Ways web sitesi gibi üzerinde çalıştığımız diğer şeylere sahibiz. İki yıl önce Fractal'ı keşfettikten sonra, büyük ve küçük her yeni projeyi Fractal'a taşıdık.

Çözmek istediğimiz problemler

Model kitaplığı çözümlerini araştırmaya iki yıl önce sürüm 3 için Perch Kullanıcı Arayüzü'nü yeniden oluşturmaya başladığımda başladım. Perch'in bir özelliği, web sitenizdeki içeriğin çıktısı için oluşturduğunuz şablonların yönetici kullanıcı arayüzünün şeması haline gelmesidir. Bu, bir şablonda kullanılan herhangi bir alan türünün diğer herhangi bir alan türünün yanında var olabilmesi gerektiği anlamına gelir. Müşterilerimizin bunları nasıl birleştirebileceğini bilmiyoruz ve çok sayıda olası kombinasyon var. Aynı zamanda bir "web sitesi" değil ve kalıp kitaplığını web sitesi kalıplarını düzenlemek için tasarlanmış bir şeye zorlamak istemedim.

Perch kendi kendine barındırıldığından (insanlar onu indirip kendi sunucularında barındırdığından), birçoğu bir bilgisayar kullanmaya yeni başlayan insanların önüne giriş için herhangi bir ek engel koymamak için mümkün olan en basit teknoloji yığınını kullanmamız gerekiyor. İYS. Ekstra bir eğlence düzeyi eklemek için Internet Explorer 9'u destekliyoruz, ancak Grid Layout gönderilmeden önce olduğu gibi çok fazla Flexbox kullanmayı amaçladım.

Ayrıca, nasıl çalıştığımızı yeniden öğrenmek ve sürecimizi tamamen değiştirmekle birlikte gelen araçları kullanmaktan kaçınmaya da hevesliydim. Projeleriniz üzerinde çalışma şeklinize yönelik herhangi bir ek araç veya değişiklik, beraberinde yeni sürtüşmeler getirir. Bir sorunu çözebilirsiniz, ancak çalışma şeklinizde büyük değişiklikler yaparsanız yepyeni bir dizi sorun ortaya çıkar. Bizim durumumuzda, Sass'ı oldukça sınırlı bir şekilde kullanıyorduk ve bunu Gulp kullanarak işliyorduk. Projelerimizin hiçbiri Javascript çerçevesi kullanmıyor, sadece HTML, CSS ve JavaScript yazıyoruz.

Fraktal ihtiyaçlarımıza mükemmel şekilde uyuyor. Geliştirme şekliniz veya kullanmak istediğiniz araçlar konusunda agnostiktir. Önemli olan, amaçlarımız açısından, bir web sitesi oluşturduğumuzu varsaymamasıdır. Deney o kadar başarılıydı ki, CSS üzerinde çalışma sürecini çok daha basit hale getirdiğinden, kendimizi büyük veya küçük her proje için Fractal'ı kullanırken bulduk. Kendi başıma oluşturduğum küçük siteler bile genellikle Fraktal'da hayata başlar, çünkü bir model kitaplığıyla çalışmak açısından düşündüğünüzden daha fazla fayda vardır ve bu faydaların çoğu, büyük bir ekip kadar tek kişilik bir ekip için anlamlıdır. .

Fractal kullanarak nasıl geliştirme yapacağımızı ve bunun neden büyük projeler kadar küçük projeler için de mantıklı olduğunu düşünmeden önce, ortamın nasıl kurulacağına bir göz atalım.

Fraktal ile Başlarken

Fractal ile çalışmak için en basit yaklaşım, Fractal web sitesine gitmek ve Başlangıç ​​Kılavuzuna bakmaktır. Önce Fractal'ı global olarak kurmanız gerekecek, ardından yeni bir Fractal projesi oluşturmak için burada listelenen adımları takip edebilirsiniz.

Yeni projeniz yüklendiğinde, komut satırında az önce oluşturduğunuz klasöre geçin ve komutu çalıştırın:

 fractal start --sync

Bu, 3000 numaralı bağlantı noktasında küçük bir sunucu başlatacaktır, bu nedenle bir web tarayıcısında https://localhost:3000 adresine gidip projenizi görebilmelisiniz.

Artık projeniz çalışıyor ve çalışıyor, favori metin düzenleyicinizde proje klasörünü açın ve components/example altında örnek bileşeni bulun. Bir yapılandırma dosyası ve example.hbs adlı bir dosya bulacaksınız. example.hbs şablonu, bileşeninizin HTML'sidir, buna biraz daha HTML ekleyebilirsiniz ve Fractal onu otomatik olarak yeniden yükleyecek ve gösterecektir. Dosyayı şu şekilde değiştirin:

 <h1>This is my heading</h1> <p>{{ text }}</p>

Başlığın tarayıcıda göründüğünü görmelisiniz. Yapılandırma dosyası, içerik eklemek ve bileşeninizi başka şekilde yapılandırmak için kullanılabilir. Bu dosyadan başlık metninizi okumak istiyorsanız, o dosyayı aşağıdaki örneğe benzeyecek şekilde düzenleyin:

 title: Example component context: text: This is an example component! heading: My heading

Şimdi, bu metinde okumak için example.hbs dosyanızı değiştirin.

 <h1>{{ heading }}</h1> <p>{{ text }}</p>

Ek Bileşenler Ekleme

Kendi bileşeninizi eklemek için örnek bileşenin modelini takip edebilirsiniz. En azından bir klasöre (bileşenin adı) ve aynı adı kullanan bir .hbs dosyasına ihtiyacınız vardır. Yapılandırma seçeneklerini ayarlamak istiyorsanız yapılandırma dosyasını ekleyebilirsiniz.

Bileşenler, belirli bileşenlerin bulunmasını kolaylaştırmak için klasörlerin içine yerleştirilebilir ve klasörleri nasıl yapılandıracağınız tamamen size bağlıdır.

Not : Bileşenlerinizi nasıl adlandıracağınız konusunda endişelenerek çok zaman harcamak gerçekten çok kolay. En azından Fraktal'da, bileşenleri klasörler halinde yeniden adlandırmak ve yeniden düzenlemek basittir. Bunları yeniden adlandırabilir veya taşıyabilirsiniz ve Fraktal yeni yapıyı gösterecek şekilde güncellenecektir. İdeal yapının genellikle ben geliştikçe belirginleştiğini görüyorum, bu yüzden başlangıçta çok fazla endişelenmeyip daha sonra sağlamlaştırıyorum.

CSS İş Akışı Ekleme

Şimdiye kadar, gidon şablonları olarak HTML bileşenleri ve veri eklemek için bir yapılandırma dosyası oluşturabiliyoruz, ancak herhangi bir CSS eklemedik. İdeal olarak, her bileşen için CSS'yi, bileşen dosyalarının geri kalanıyla aynı klasöre eklemek ve ardından hepsini birleştirmek istiyoruz.

Fractal'ın iş akışınız hakkında çok az varsayımda bulunduğundan bahsetmiştim; bu nedenle, sizi belirli bir çalışma şekline zorluyor olsaydı, kutudan çok daha az şey çıkarır. Ancak, Fraktal'ı bir Gulp kurulumuyla oldukça kolay bir şekilde çalıştırabiliriz.

Fraktal, Sass ve Gulp'u Birleştirme

Aşağıda, tek bir çıktı CSS dosyası oluşturmak için Gulp ve Sass kullanan minimum kurulum açıklanmaktadır. Umarım, normalde Gulp'ta yapacağınız her şeyi yapmak için bu süreci takip edebilirsiniz. Unutulmaması gereken en önemli şey, bunların çoğunun Fraktal'e özgü olmamasıdır, bu nedenle Fraktal parçayı çalıştırdıktan sonra, aynı kalıpları izleyerek başka herhangi bir şey ekleyebilirsiniz. Başka bir oluşturma aracına aşina iseniz, benzer bir süreç oluşturmanız olasıdır; yaparsanız ve paylaşmaktan memnuniyet duyarsanız, yorumlarda bize bildirin.

Öncelikle bazı kurulumlar, aşağıdakiler bu eğitimde listelenen kodla birlikte takip etmenizi sağlayacaktır, Sass dosyalarınızın konumları ve CSS çıktısı sonuçta benimkinden farklı olabilir. Önemli olan, çıktı CSS dosyasının ortak klasörde bir yerde olması gerektiğidir.

1. Fraktal kurulumunuzdaki ortak klasörün içine css adlı bir klasör ekleyin.
2. Fractal'ınızın kök klasörüne, içinde scss klasörü olan bir klasör varlıkları ekleyin. Bu klasörün içinde global.scss adlı bir Sass dosyası oluşturun. Bu dosyanın içine aşağıdaki satırı ekleyin:
   

    @import "../../components/**/*.scss";

3. example bileşen dizininizde example.scss adlı bir dosya oluşturun.
4. Fractal projenizin kök dizininde gulpfile.js oluşturun ve aşağıdaki kodu ekleyin.

 'use strict'; const gulp = require('gulp'); const fractal = require('./fractal.js'); const logger = fractal.cli.console; const sass = require('gulp-sass'); const sassGlob = require('gulp-sass-glob'); const plumber = require('gulp-plumber'); const notify = require('gulp-notify'); const path = require('path'); gulp.task('sass',function() { return gulp.src('assets/scss/**/*.scss') .pipe(customPlumber('Error running Sass')) .pipe(sassGlob()) .pipe(sass()) .pipe(gulp.dest('public/css')) }); gulp.task('watch', ['sass'], function() { gulp.watch([ 'components/**/*.scss', 'assets/scss/**/*.scss' ], ['sass']); }); function customPlumber(errTitle) { return plumber({ errorHandler: notify.onError({ title: errTitle || "Error running Gulp", message: "Error: <%= error.message %>", }) }); } gulp.task('fractal:start', function(){ const server = fractal.web.server({ sync: true }); server.on('error', err => logger.error(err.message)); return server.start().then(() => { logger.success(`Fractal server is now running at ${server.url}`); }); }); gulp.task('default', ['fractal:start', 'sass', 'watch']);

Daha sonra dosyanın en üstünde listelenen bağımlılıkları kurarım. Bunları komut satırına kuracak olsaydınız, şunu çalıştırırdınız:

npm install gulp gulp-sass gulp-sass-glob gulp-plumber gulp-notify

sass işlevi, varlıklardan Sass'ı tek bir dosyada derler ve bunu public içindeki klasöre çıkarır.

 gulp.task('sass',function() { return gulp.src('src/assets/scss/**/*.scss') .pipe(customPlumber('Error running Sass')) .pipe(sassGlob()) .pipe(sass()) .pipe(gulp.dest('public/css')) });

Daha sonra, Sass'ımı assets ve ayrıca bireysel bileşenlerde izleyecek ve onu genel klasörde derleyecek bir watch işlevi oluşturuyorum.

 gulp.task('watch', ['sass'], function() { gulp.watch([ 'components/**/*.scss', 'assets/scss/**/*.scss' ], ['sass']); });

Bu benim CSS binam. Şimdi bunu yapmak istiyorum, böylece yudum çalıştırabilirim ve fraktal başlatmanın yanı sıra CSS dosyasının izlenmesini başlatacak. Bunu, fraktal start komutunu çalıştırmak için bir yudum görevi oluşturarak yapıyorum.

 gulp.task('fractal:start', function(){ const server = fractal.web.server({ sync: true }); server.on('error', err => logger.error(err.message)); return server.start().then(() => { logger.success(Fractal server is now running at ${server.url}); }); });

Son olarak, gulp ve komut satırını çalıştırdığımda Sass binasının ve Fractal'ın çalışmaya başladığından emin olmam gerekiyor:

gulp.task('default', 'fractal:start', 'sass', 'watch');

Bu benim tamamladığım gulpfile.js . Bunu varsayılan Fraktal projenize eklerseniz, belirtilen yollar için klasörlerin yerinde olduğundan emin olun. Komut satırına gidebilmeli, gulp komutunu çalıştırabilmelisiniz ve Fraktal başlayacaktır.

global.scss dosyasına bir değişken ekleyerek Sass'ımızı test edebiliriz; değişkenin bu bileşenler için kullanılabilir olması için bunu bileşenleri içeren satırın üstüne eklemeniz gerekir.

 $color1: rebeccapurple;

Ardından, example.scss daha önce eklediğimiz 1. düzey başlık için bir kural ekleyin:

 h1 { color: $color1; }

Her şey doğru ayarlanmışsa, public/css içinde kuralı içeren bir .css dosyanız olduğunu görmelisiniz:

 h1 { color: rebeccapurple; }

Oluşturduğumuz CSS'yi kullanarak bileşenlerimizi önizleyebilmemiz için bir şey daha yapmamız gerekiyor. Ortak klasörden stil sayfasında bağlantı oluşturacak bir önizleme dosyası oluşturmamız gerekiyor.

Bileşenler klasörünüzün içinde _preview.hbs adlı bir dosya oluşturun.

Önizleme dosyası esasen bir HTML belgesidir ve CSS'mize ve eklemeniz gereken diğer her şeye bağlantı verir. Gövdede {{ yield }} etiketi bulunur ve burası bir bileşenin yerleştirileceği yerdir.

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Preview Layout</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="{{ path '/css/global.css' }}"> </head> <body> {{{ yield }}} </body> </html>

Not : Ortak klasör ayrıca görüntüler, yazı tipleri vb. gibi bileşenlerde görüntülemeniz gereken diğer varlıkları da barındırabilir.

Gerçeğin Kaynağı Olarak Desen Kitaplığı

Gördüğümüz gibi, Fraktal CSS'imizi oluşturabilir. Projelerimizde, site için CSS ve diğer varlıkları oluşturduğumuz ve işlediğimiz tek yer Fractal olacak şekilde yapıyoruz. Bunun anlamı, kalıp kitaplığımızın ve sitemizin veya uygulamamızın sürüklenmemesidir. İnsanlar sitenin CSS'sini düzenlemeye başlarsa ve bu değişiklikleri kalıp kitaplığına geri getirmezlerse, siteyi dağıttıktan sonra sürüklenme gerçekleşir. Kalıp kitaplığını CSS'nin işlendiği yer yapabilirseniz, değişikliklerin oradan başlaması gerekir - bu da canlı site ile kitaplık arasında kaymayı önler.

Her şeyi Fractal'da oluşturuyoruz ve ardından bu kamu varlıklarını dağıtılacak canlı sitelere kopyalıyoruz. Sistemler arasında kaymayı önlemenin yanı sıra kaynak kontrolünde CSS yönetimini de çok daha kolay hale getirir. Bir CSS dosyası üzerinde birden fazla kişi çalıştığında, birleştirme çakışmalarıyla baş etmek oldukça zor olabilir. Kalıp kitaplığındaki tek tek bileşenler üzerinde çalışan kişilerle, genellikle iki kişinin aynı dosyada aynı anda değişiklik yapmasını önleyebilirsiniz ve eğer yaparlarsa bu, CSS'nizin tamamı değil, yalnızca küçük bir dosyanın düzenlenmesidir.

Geri Dönüşleri Yönetmek İçin Bir Model Kitaplığı İlk Yaklaşımını Kullanma

Çalışma düzeni kitaplığının ilk önce kodunuzdaki geri dönüşlerle uğraşmayı, bir kerede eksiksiz bir siteyi veya uygulamayı düzeltmeye çalışmaktan çok daha basit ve daha az bunaltıcı hale getirdiğini buldum. Ayrıca, mümkün olan en iyi duruma konsantre olmamıza ve desteklenmeyen tarayıcılarda nasıl iyi çalışmasını sağlayacağımız konusunda endişe duyduğumuz için yaptıklarımızı sınırlamak yerine yeni tekniklerle yaratıcı olmamıza olanak tanır.

Bunun nasıl çalıştığını görmek için basit bir medya nesnesi bileşeni örneğine bakabiliriz. Devam etmek için, Fractal'da bileşenlerin içinde bir medya klasörü oluşturun ve media.hbs ve media.scss dosyalarını ekleyin.

İyi İşaretlemeyle Başlayın

Başlangıç ​​noktanız her zaman iyi yapılandırılmış işaretleme olmalıdır. Model kitaplığında, bu bileşeni bir dizi işaretleme ile kullanacaksınız, örneğin, içeriği bir yerde şekil olarak işaretlenmiş ve başka bir yerde sadece div'lerle işaretlenmiş bir bileşen kullanabilirsiniz. Ancak içeriğiniz mantıklı ve yukarıdan aşağıya okunabilecek şekilde yapılandırılmalıdır.

Bu, içeriğinizin çok temel düzeyde erişilebilir olmasını sağlar, ancak aynı zamanda normal akıştan yararlanabileceğiniz anlamına gelir. Normal Akış, tarayıcıların içeriğinizi varsayılan olarak görüntüleme şeklidir; blok öğeleri blok boyutunda birbiri ardına ilerler ve satır içi öğeler (bir cümledeki sözcükler gibi) satır içi eksen boyunca ilerler. Tam istediğiniz gibi bir çok içerik için ve normal akışla savaşmak yerine ondan yararlanarak mizanpajınızı oluştururken işinizi çok daha kolay hale getirirsiniz.

Bu nedenle, bileşenim media.hbs öğesine eklediğim aşağıdaki biçimlendirmeye sahip.

 <div class="media"> <div class="img"> <img src="/img/placeholder.jpg" alt="Placeholder"> </div> <h2 class="title">This is my title</h2> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p> </div> <div class="footer"> An optional footer goes here. </div> </div>

Bunun Fraktal içinde nasıl görüntülendiğini görebilirsiniz:

İstediğim işaretlemeyi elde ettikten sonra, aklımdaki masaüstü ekranı üzerinde çalışacağım. Bunu yapmak için CSS Grid Layout ve grid-template-areas yöntemini kullanacağım. Aşağıdakileri media.scss'e ekleyin.

 img { max-width: 100%; } .media > .title { grid-area: title; } .media > .img { grid-area: img; } .media > .content { grid-area: bd; } .media > .footer { grid-area: ft; } .media { margin-bottom: 2em; display: grid; grid-column-gap: 20px; grid-template-columns: 200px 3fr; grid-template-areas: "img title" "img bd" "img ft"; }

Artık basit bir medya nesnesi düzenine sahibiz:

Fraktal'da yapabileceğiniz bir şey, bir bileşenin varyasyonlarını eklemektir. Görüntü sağda olacak şekilde medya nesnesini çevirmek isteyebilirsiniz.

Şimdi mizanpajı çevirmek için CSS'yi media.scss dosyasına ekleyin:

 .media.media-flip { grid-template-columns: 3fr 200px ; grid-template-areas: "title img" "bd img" "ft img"; }

Varyant oluşturmanın iki yolu vardır: dosya tabanlı ve yapılandırma tabanlı. Dosya tabanlıdır ve varyantınız farklı biçimlendirmeye sahipse de kullanışlıdır. Dosya tabanlı bir türev oluşturmak için, medya klasöründeki bileşeninizin bir kopyasını media --flip.hbs adıyla yapın (dosya adındaki iki tire).

Bu bileşen, ilk satıra eklenen media-flip sınıfı ile aynı işaretlemeye sahip olmalıdır ve daha sonra her iki sürümü de görebileceksiniz.

 <div class="media media-flip">

Alternatif olarak, bu durumda tek yapmamız gereken bir sınıf eklemek olduğu gibi, bir yapılandırma dosyası kullanarak bir varyant oluşturabilirsiniz.

Bunu yapmak istiyorsanız, varyant dosyanızı kaldırın ve bunun yerine aşağıdaki kodu içeren media.config.json adlı bir yapılandırma dosyası ekleyin:

 { "title": "Media Object", "context": { "modifier": "default" }, "variants": [ { "name": "Flipped", "context": { "modifier": "flip" } } ] }

Ardından media.hbs dosyasının ilk satırını aşağıdaki gibi değiştirin:

<div class="media media-{{ modifier }}">

Not : İstediğiniz kadar varyant ekleyebilirsiniz (daha fazla bilgi için varyantların belgelerine bakın).

Şimdi, düzeni ekran boyutuna göre değiştirmek için biraz CSS eklemeyi düşünebiliriz. Oluşturduğumuz düzeni bir medya sorgusuna sarmak ve bunun üzerine daha küçük cihazlar için tek bir sütun düzeni oluşturmak.

 img { max-width: 100%; } .media > .title { grid-area: title; } .media > .img { grid-area: img; } .media > .content { grid-area: bd; } .media > .footer { grid-area: ft; } .media { display: grid; grid-column-gap: 20px; grid-template-areas: "title" "img" "bd" "ft"; } @media (min-width: 600px) { .media { margin-bottom: 2em; display: grid; grid-column-gap: 20px; grid-template-columns: 200px 3fr; grid-template-areas: "img title" "img bd" "img ft"; } .media.media-flip { grid-template-columns: 3fr 200px ; grid-template-areas: "title img" "bd img" "ft img"; } }

Ardından, bileşenimizdeki daha küçük cihazlar için görünümü yönettiğimiz gibi, ızgarayı desteklemeyen eski tarayıcıların düzenini de yönetebiliriz.

Bu durumda, kayan nokta tabanlı bir geri dönüş oluşturacağım (bu, hemen hemen tüm eski tarayıcılar için işe yarayacaktır). Sadece daha geniş ekran boyutları için endişeleneceğim ve bileşenin eski mobil cihazlar için normal akışta görüntülenmesini sağlayacağım.

Medya sorgusunun hemen içine aşağıdaki CSS'yi ekleyin:

 .media:after { content: ""; display: table; clear: both; } .media > .media { margin-left: 160px; clear: both; } .media .img { float: left; margin: 0 10px 0 0; width: 150px; } .media.media-flip .img { float: right; margin: 0 0 0 10px; } .media > * { margin: 0 0 0 160px; } .media.media-flip > * { margin: 0 160px 0 0; }

Bu, ızgara olmayan tarayıcılarda ekranı düzenlemelidir. Izgarayı destekleyen tarayıcılar için, kayan noktalar hakkında endişelenmenize gerek yoktur, yani kayan öğe bir ızgara öğesi olduğunda, kayan nokta kaldırılır. Sorun ne olacak, herhangi bir marj. Izgarayı destekleyen tarayıcılardaki düzen, artık fazladan kenar boşlukları nedeniyle aralıklı olacak.

Tarayıcımızın ızgarayı desteklediğini biliyorsak, kenar boşluklarını kaldırarak bir özellik sorgusu ekleyebileceğimiz yer burasıdır.

 @supports(display: grid) { .media > *, .media.media-flip > * { margin: 0; } .media .img, .media.media-flip .img { width: auto; margin: 0; } .media:after { content: none; } }

Bu bizim küçük bileşenimiz bitti. Basit bir örnek olsa da - ve bir geri dönüşe ihtiyacınız varsa gerçekten ızgaraya ihtiyaç duymayan bir örnek olduğu iddia edilebilir - bu, büyük ve küçük tüm projelerimde uyguladığım yaklaşımı gösteriyor.

CSS dosyamı üretime almak için, CSS dosyasını ortak klasörden alıp üretim sitemize ekleyebiliriz. Hatta bu işlemi, oluşturulurken site klasörünüze kopyalamak için komut dosyası oluşturabilirsiniz.

Azaltılmış Test Senaryosu İlk Geliştirme

Bu şekilde çalışmanın önemli bir faydası olarak keşfettiğim bir şey, bulmacanın tarayıcı destek parçasını gerçekten kolaylaştırmasıdır. Bu bileşene hangi yedek CSS'nin dahil edildiğini görmek daha kolay olmakla kalmaz, aynı zamanda bir tarayıcıyla ilgili sorun yaşıyorsak, bunların hatalarını ayıklamayı çok daha kolay hale getirir.

Bir tarayıcı sorunuyla mücadele ederken, genellikle yapmanız söylenecek olan şey, azaltılmış bir test senaryosu oluşturmaktır. Sorunu, sorunu sergileyen en küçük şeye kadar azaltın. Bir model kitaplığındaki bir bileşen, genellikle zaten bu azaltılmış test durumuna çok yakındır. Web sitenizin tamamına bakarken bir problemde hata ayıklamaya çalışmaktan kesinlikle çok daha yakın.

Tarayıcı hata ayıklamasını kolaylaştırmanın yanı sıra, geri dönüşlerinizin CSS'nin geri kalanına dahil edilmesi, artık gerekmediğinde geri dönüş kodunun kaldırılmasını kolaylaştırır, bu yedek kodun bu bileşen için olduğu açıktır. Kaldırmanın başka hiçbir şeyin görüntülenme şeklini değiştirmeyeceğini biliyorum.

Kodumuzu düzenlemenin bu kolaylığı, Fractal'ın küçük projelerde bile mantıklı olmasının nedenidir. Gulp ve Sass'ı her halükarda kullanma eğiliminde olduğumuz göz önüne alındığında (daha küçük projelerde bile), karışıma Fraktal eklemek büyük bir ek yük değil. Küçük bir sitenin bile makul miktarda CSS'si olabileceğinden, bunu yalnızca daha büyük projelerimiz için görmemize gerek yok.

Kodu Gör

Makalede bahsedilen tüm kodları içeren bir GitHub Projesi oluşturdum. Makalede açıklandığı gibi Fraktal'ı kurmanızı ve ardından havuzumdan gulpfile veya önizleme düzeni gibi herhangi bir biti almanızı öneririm.

Ek bir referans olarak ve yayınlanmış bazı Fraktal projelerini görmek için, Perch Pattern Library'nin yayınlanmış versiyonuna ve ayrıca bir göz atabileceğiniz 24 Ways için Model Kütüphanesine (Paul Robert Lloyd tarafından yapılmıştır) sahibiz. Bunlar, web sitesi olmayan bir kalıp kitaplığına ve bir site için kullanılan daha geleneksel bir kitaplığa iyi örneklerdir.

CSS'yi Nasıl Yönetirsiniz ?

Bu çalışma şeklini gerçekten seviyorum; CSS'yi basit, aşamalı olarak geliştirilmiş bir şekilde yazmama izin veriyor. Projeye bağlı olarak, dosyaların çok daha fazla takımlanmasını ve işlenmesini içerebiliriz. Veya basit bir site inşa ediyor olabilirim, bu durumda kurulum, bu makalede gördüğümüz gibi olacak - bazı hafif Sass işlemleriyle. Fraktal, büyük ve küçük siteler, web uygulamaları veya web siteleri için aynı sürece sahip olabileceğimiz anlamına gelir. Bu, her zaman tanıdık bir şekilde çalışabileceğimiz anlamına gelir.

Bu bizim için işe yarar ve umarım bu makale size denemeniz için bazı şeyler verebilir. Ancak, sizin ve ekibinizin projelerinizde CSS'yi yönetmeye nasıl yaklaştığınızı ve denediğiniz yaklaşımların güçlü ve zayıf yönlerini bilmek isterim. Başka bir model kitaplığı çözümü kullanarak benzer bir süreç geliştiren herkesten özellikle haber almak isterim. Deneyimlerinizi yorumlara ekleyin.