diff options
Diffstat (limited to 'files/tr/learn/css/building_blocks/organizing/index.html')
| -rw-r--r-- | files/tr/learn/css/building_blocks/organizing/index.html | 376 |
1 files changed, 376 insertions, 0 deletions
diff --git a/files/tr/learn/css/building_blocks/organizing/index.html b/files/tr/learn/css/building_blocks/organizing/index.html new file mode 100644 index 0000000000..383d4db9e5 --- /dev/null +++ b/files/tr/learn/css/building_blocks/organizing/index.html @@ -0,0 +1,376 @@ +--- +title: CSS planlama +slug: Öğren/CSS/CSS_yapi_taslari/Organizing +tags: + - Acemi + - Beginner + - CSS + - CodingScripting + - Eğitim + - Learn + - biçimlendirme + - comments + - formatting + - methodologies + - organizing + - post-processor + - pre-processor + - stil rehberi + - styleguide + - yorumlar +translation_of: Learn/CSS/Building_blocks/Organizing +--- +<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>Projelerin büyüdükçe, projenle birlikte büyüyen CSS Stil sayfalarınla çalışmanın ne kadar zor olacağını tecrübe edeceğin zamanlar gelecek. Bu derste, CSS Stil sayfalarında tecrübeli geliştiriciler tarafından kullanılan; sana yol gösterip, zorlanmadan geliştirme ve bakım yapabilmene yardımcı olacak bazı çözümlere göz atacağız.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Stil sayfalarını organize etmeye yönelik bazı ipuçlarını ve CSS en iyi şekilde planlama uygulamalarını öğrenmek, ekip çalışmasına yardımcı olacak ortak adlandırmalar ve araçlar hakkında bilgi edinmek.</td> + </tr> + </tbody> +</table> + +<h2 id="CSSi_düzenli_tutmak_için_ipuçlar">CSS'i düzenli tutmak için ipuçlar</h2> + +<p>Düzenli stil sayfaları yazmak ve stül sayfalarını düzenli tutmak için bazı genel öneriler</p> + +<h3 id="Projende_kodlama_stili_rehberin_var_mı">Projende kodlama stili rehberin var mı?</h3> + +<p>mevcut bir proje üzerinde bir ekiple çalışyorsan, kontrol etmen gereken ilk şey, projenin CSS için mevcut bir stil reberine sahip olup olmadığıdır. Takım stil rehberi her zaman kendi kodlama tercihlerine sahip olmalıdır. Çoğu zaman bir şeyler yapmak için doğru veya yanlış bir yol yoktur, ancak tutarlılık önemlidir.</p> + +<p>Örneğin, <a href="/tr/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">MDN kod örnekleri için CSS yönergelerine</a> bir göz atın.</p> + +<h3 id="Tutarlı_olmasını_sağlayın">Tutarlı olmasını sağlayın</h3> + +<p>Projede bir takımla veya yanlız çalışıyor olsan bile, yapman gereken ilk iş kendine tutarlı bir yol belirlemektir. Buradaki tutarlılık, sınıflar için aynı adlandırma kurallarını kullanmak, rengi tanımlamak için bir yöntem seçmek veya biçimlendirmeyi sabitlemek (örn. kodunuzu girintilemek için sekmeler mi yoksa boşluklar mı kullanacaksın? Girinti kaç karakter olacak?)</p> + +<p>Her zaman uygulayacağın bir dizi kurala sahip olduğunda, CSS yazarken gereken zihinsel ek yükten kurtulursun. Bu kuralı oluşturmak için illaki bir projeye başlaman gerekmiyor. Bu eğitim serisi devam ederken dahi, bu kurallarının ilk adımlarını belirleyebilirsin.</p> + +<h3 id="CSS_biçimlendirmen_okunabilir_olsun">CSS biçimlendirmen okunabilir olsun</h3> + +<p>CSS'i biçimlendirmenin birkaç yolu vardır. Bazı geliştiriciler, tüm kuralları tek bir satıra koyar. Örneğin:</p> + +<pre class="brush: css notranslate">.box { background-color: #567895; } +h2 { background-color: black; color: white; }</pre> + +<p>Diğer geliştiriciler her şeyi yeni bir satıra ayırmayı tercih ediyor:</p> + +<pre class="brush: css notranslate">.box { + background-color: #567895; +} + +h2 { + background-color: black; + color: white; +}</pre> + +<p>Tarayıcılar, hangi CSS biçimlendirmesini kullandığınızı önemsemez. Kişisel olarak her bir özellik ve değer çiftinin yeni bir satırda bulunmasının okunurluluğu arttırdığını düşünüyorum.</p> + +<h3 id="CSS_hakkında_yorumlarda_bulun">CSS hakkında yorumlarda bulun</h3> + +<p>CSS'ine yorum eklemek, diğer geliştiriciclerin CSS dosyanızda çalışmasına yardımcı olmasının yanında kendi yazmış olduğun kodları ne için ve neden yazıldığını hatırlanmanda da yardımcı olacaktır.</p> + +<pre class="brush: css notranslate">/* Bu bir CSS yorumudur +Birden fazla satıra bölünebilir. */</pre> + +<p>Bir ipuçu, Stil sayfandaki mantıksal bölümler kullanmak, sayfanda arama yaparken bölümler arasında hızlı bir şekilde ilerlemeni hatta direk o bölüme atlamana olanak sağlayacaktır. Yorumlarında bir dizge kullanmayı alışkanlık haline getirirsen, onu arayarak bölümlerinin arasında aradığın bölüme rahatlıkla atlayabilirsin. Bölümler için aşağıda <code>||</code> mantıksal işaretini kullandım.</p> + +<pre class="brush: css notranslate">/* || Genel stiler */ + +... + +/* || Yazıları şekillendir */ + +... + +/* || Üst bilgi ve ana gezinti bölmesi */ + +... + +</pre> + +<p>CSS'indeki her kuralı yorumlamana gerek yok, çünkü çoğu kendi kendini açıklayıcı olacaktır. Yorumlaman gerekenler, vermiş olduğun bir kararın sebebini veya diğer bildirimlerden bariz bir şekilde ayrılmış olanlar hakkında olacaktır.</p> + +<p>Eski tarayıcı uyumsuzluklarını aşmak için eski tarayıcıların desteklediği bir bildirimde bulunmuş olabilirsin. Örneğin:</p> + +<pre class="brush: css notranslate">.box { + background-color: red; /* linear-gradient değerini desteklemeyen tarayıcılar için arka plan rengi */ + background-image: linear-gradient(to right, #ff0000, #aa0000); +} +</pre> + +<p>Belkide bir işin üstesinden gelebilmek için başka bir kaynaktan yardım aldın ve CSS biraz kafa karıştırıyor. Bu durumda, kaynağın URL'sini yorumlarak ekleyebilirsin. Bir süre sonra bu projeye geri döndüğünde kendine teşekkür edeceksin. Çünkü işin üstesinden gelebilmek için bir yerden yardım aldım ama nerede? diyer türlü bunu hatırlamak zaman alacaktı.</p> + +<h3 id="Stil_sayfanda_mantıksal_bölümler_oluştur.">Stil sayfanda mantıksal bölümler oluştur.</h3> + +<p>Tüm ortak stillerin, stil sayfanda ilk olarak bildirilmesi iyi bir fikirdir. Bu, o öğeyle özel bir tasarım yapmadığın sürece tüm projende standart bir tasarımı elde etmeni sağlayacaktır. Genellikle şunlar için oluşturduğun kuralların olacak:</p> + +<ul> + <li><code>body</code></li> + <li><code>p</code></li> + <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li> + <li><code>ul</code> ve <code>ol</code></li> + <li><code>table</code> özellikleri</li> + <li>Bağlantılar</li> +</ul> + +<p>Stil sayfasının bu bölümünde, sitedeki yazı için varsayılan stil sağlıyoruz, veri tabloları ve listeler içinde varsayılan bir stil bildiriminde bulunoyor vb.</p> + +<pre class="brush: css notranslate">/* || Genel Stiller */ + +body { ... } + +h1, h2, h3, h4 { ... } + +ul { ... } + +blockquote { ... } +</pre> + +<p>Daha sonra, birkaç yardımcı sınıf tanımlayabiliriz. Örneğin, esnek öğeler olarak veya başka bir şekilde göstereceğimiz listeler için varsayılan liste stilini kaldıran bir sınıfımız olsun. Ayrıca birçok farklı öğeye uygulamak isteyeceğimizi bildiğimiz birkaç tanımlamamız da varsa, bunları da bu bölümde tanımlayabiliriz.</p> + +<pre class="brush: css notranslate">/* || Araçlar */ + +.nobullets { + list-style: none; + margin: 0; + padding: 0; +} + +... + +</pre> + +<p>Sonra site genelinde her sayfada kullanmayı planladığımız tüm kurallarıda şuraya ekleyebiliriz. Bunlar, temel sayfa düzeni, başlık, gezinme stili vb. gibi bölümler için olabilir.</p> + +<pre class="brush: css notranslate">/* || Site geneli */ + +.main-nav { ... } + +.logo { ... } +</pre> + +<p>Son olarak; içeriğe, sayfaya ve hatta kullanıldıkları bileşene göre ayrılmış belilirli kısımlar için CSS ekleyeceğiz.</p> + +<pre class="brush: css notranslate">/* || Site sayfaları */ + +.product-listing { ... } + +.product-box { ... } +</pre> + +<p>Çalışmamazı bu şekilde sıralayarak, en azından stil sayfasında değişiklik yapmak istediğimizde, değiştireceğimiz bildirimlerin/kuralların hangi bölümde olduğu hakkında bir fikrimiz olur.</p> + +<h3 id="Aşırı_karakteristik_seçicilerden_kaçının">Aşırı karakteristik seçicilerden kaçının</h3> + +<p>Çok özel seçiciler oluşturulduğunda; aynı kuralın başka bir öğeye de uygulanması gerektiğinde, CSS kuralının çoğaltıldığını sıklıkla göreceksin. Örneğin, <code>main</code> sınıfına dahil <code><article></code> öğesinin torunlarından <code>box</code> sınıfına dahil <code><p></code> öğeleri için bir kuralımız olabilir.</p> + +<pre class="brush: css notranslate">article.main p.box { + border: 1px solid #ccc; +}</pre> + +<p>Fakat daha sonra aynı kuralları <code>main</code> sınıfına dahil olmayan ebeveyne sahip öğeye veya <code><p></code> öğesi dışındaki bir öğeye uygulamak isteyebiliriz. Bu durumda, bu kurala ya yeni bir seçici ekleyecek yada tamamen yeni bir kural kümesi oluşturmamız gerekecek. Bunun yerine, bu stil için <code>.box</code> seçiciye sahip bir kural oluşturur ve bu kuralı uygulamak istediğimiz tüm öğeleri <code>box</code> sınıfına dahil ederiz.</p> + +<pre class="brush: css notranslate">.box { + border: 1px solid #ccc; +}</pre> + +<p>Daha karakteristik seçiciler oluşturacağımız mantıklı zamanlarımız olacaktır, ancak bu genellikle normal uygulamadan ziyade istisnaî bir durum olacaktır.</p> + +<h3 id="Büyük_stil_sayfalarını_daha_küçük_parçalara_bölün">Büyük stil sayfalarını daha küçük parçalara bölün</h3> + +<p>Farklı tasarlanmış veya özellikli sayfalara sahip sitelerde, genel kuralların bulunduğu stil sayfalarınla, her web sayfasının kendine has kurallarının olduğu stil sayfalarını bir birinden ayırmak geliştirme ve düzeltmelerde yararlı olacaktır. Bir stil sayfasında birden çok stil sayfasına bağlanabilirsin. Stil sayfasına bağladığınız diğer stil sayfasının içindeki kurallar, bağlantı yapılan satırdan itibaren asıl stil sayfanıza yazılmış gibi işlem görür ve art arda kontrol şartları gereği bağlandığı noktadan sonra kuralınızı geçersiz kılacak diğer kurallar için dikkat etmeniz gerekir.</p> + +<p>Örneğin, bir mağaza için hazırlanmış bir sitenin parçası olarak ürün listelerinin ve formların olduğu iki sayfamızın olduğunu düşünelim. Ürün listeleri ve formlar için farklı CSS kuralları olacağı için bu iki sayfa için gerekli stil sayfalarını birbirinden ayırıp, ürün listelerinin olduğu web sayfası yüklenirken sadece bu sayfa için gerekli CSS'lerin indirilmesi sağlanarak internet trafiğinden de tasarruf yapmış oluruz.</p> + +<p>CSS'inizi ayrı dosyalarda tutmanız, kodlarınızı düzenli tutmanızı kolaylaştırabilir. Aynı zamanda da birden fazla kişinin çalıştığı projelerde CSS üzerinde çalışan kişilerin, aynı anda aynı CSS dosyası üzerinde çalışma olasılığıyla daha az karşılaşılır ve bu da kaynak kontrolünde daha az çakışmalara yol açacağı anlamına gelir.</p> + +<h2 id="Yardımcı_olabilecek_diğer_araçlar">Yardımcı olabilecek diğer araçlar</h2> + +<p>CSS'inin kendi içinde yerleşik organizasyon şeklinde bir yeteneği yoktur, bu nedenle CSS'i nasıl yazdığınla ilgili tutarlılık ve ilkeler oluşturmak için çalışman gerekir. Web topluluğu daha büyük CSS projelerini yönetmene yardımcı olabilecek çeşitli araçlar ve yaklaşımlar geliştirmiştir. Araştırmanız için size yardımcı olabileceklerinden ve diğer insanlarla çalışırken bunlarla karşılaşmanız muhtemel olduğundan, bazıları hakkında kısa bir rehber ekledim.</p> + +<h3 id="CSS_metodolojileri">CSS metodolojileri</h3> + +<p>CSS yazmak için kendi kurallarınızı oluşturmak yerine, topluluk tarafından halihazırda tasarlanmış ve birçok projede test edilmiş yaklaşımlardan yararlanabilirsin. Bu metodolojiler temelde CSS kodlama kılavuzlarıdır ve CSS yazmak ve düzenlemek için çok iyi yapılandırılmış bir yaklaşım benimserler. Tipik olarak, her seçiciyi o proje için özel bir kurallar kümesine yazıp optimize ettiyseniz, gereksinim duyduğunuzdan daha ayrıntılı bir CSS kullanımına neden olma eğilimindedirler.</p> + +<p>bununla birlikte, birini benimseyerek çok fazla yapı kazanırsınız ve bu sistemlerin çoğu çok yaygın olarak kullanıldığından, diğer geliştiricilerin kullandığınız yakşalımı anlaması ve CSS'lerini aynı şekilde yazması daha olasıdır. Sıfırdan kendi kişisel metodolojinizi geliştirmek zorunda kalmazsınız.</p> + +<h4 id="OOCSS">OOCSS</h4> + +<p>Karşılaşacağın yaklaşımların çoğu, <a href="https://github.com/stubbornella/oocss/wiki">Nicole Sullivan'ın çalışmasıyla</a> popüler hale gelen Nesne Yönelimli CSS (OOCSS) kavramına bir şeyler borçludur. OOCSS'in temel fikri, CSS'ini sitenizde ihtiyaç duyduğunuz her yerde kullanabileceğiniz, yeniden kullanılabilir nesnelere dönüştürmektir. OOCSS'in standart örneği, <a href="/tr/docs/Web/CSS/Layout_cookbook/Media_objects">Media Nesnesi</a> olarak tanımlanan modeldir. Bu, bir tarafında sabit boyutlu bir görüntü, video veya başka bir öğe ve diğer tarafında esnek içerik bulunan bir modeldir. Yorumlar, listeler vb. tüm web sitelerinde gördüğümüz bir modeldir.</p> + +<p>OOCSS yaklaşımını benimsemesende, bu tür modellerin kullanıldığı yerler için özel CSS oluşturabilirsin, örneğin bileşen parçaları için bir dizi kurala sahip <code>comment</code> adlı bir sınıf ve neredeyse <code>comment</code> sınıfıyla arasında bazı farklılıklar haricinde aynı olan <code>list-item</code> sınıfı oluşturalım. Bu iki bileşen arasındaki fark, liste öğesinin bir alt kenarlığa sahip olması ve yorumlardaki resimlerin kenarlığı varken, liste öğesindeki resimlerin kenarlıklarının olmamasıdır.</p> + +<pre class="brush: css notranslate">.comment { + display: grid; + grid-template-columns: 1fr 3fr; +} + +.comment img { + border: 1px solid grey; +} + +.comment .content { + font-size: .8rem; +} + +.list-item { + display: grid; + grid-template-columns: 1fr 3fr; + border-bottom: 1px solid grey; +} + +.list-item .content { + font-size: .8rem; +}</pre> + +<p>OOCSS'de, her iki bileşen içinde ortak CSS'e sahip olan <code>media</code> adlı tekbir model oluştururuz. Daha sonra küçük farklılıkların üstesinden gelmek için ek sınıflar ekleyip CSS'imizi genişlettik.</p> + +<pre class="brush: css notranslate">.media { + display: grid; + grid-template-columns: 1fr 3fr; +} + +.media .content { + font-size: .8rem; +} + +.comment img { + border: 1px solid grey; +} + +.list-item { + border-bottom: 1px solid grey; +} </pre> + +<p>HTML'emizdeki yorum kısmının hem <code>media</code>, hem de <code>comment</code> sınıflarına dahil edilmesi gerekir:</p> + +<pre class="brush: html notranslate"><div class="media comment"> + <img /> + <div class="content"></div> +</div> +</pre> + +<p>Liste öğelerinin de hem <code>media</code>, hem de <code>list-item</code> sınıfklarına dahil edilmesi gerekir:</p> + +<pre class="brush: html notranslate"><ul> + <li class="media list-item"> + <img /> + <div class="content"></div> + </li> +</ul></pre> + +<p>Nicole Sullivan'ın bu yaklaşımını açıklarken ve onu teşvik ederken yaptığı çalışma, bugün OOCSS yaklaşımını sıkı bir şekilde takip etmeyen kişlerin bile, CSS yaklaşımını bir gün bir şekilde kullanacağı anlamına geliyor — genel olarak olaylara yaklaşmanın iyi bir yolu olarak görünüyor.</p> + +<h4 id="BEM">BEM</h4> + +<p>BEM, Blok Öğe Değiştirici anlamına geliyor. BEM'de bir blok, düğme, menü veya logo gibi bağımsız bir nesnedir. Bu öğe, bir liste elamanı veya bulunduğu bloğa bağlı bir başlık gibi bir şeydir. CSS sınıflarında çizgi ve alt çizlerin yoğun kullanımı nedeniyle BEM yaklaşımı kullanan kodu heryerde tanıyacaksın. Örneğin, <a href="http://getbem.com/naming/">BEM Adlandırma kuralları</a> sayfasındaki HTML'ye uygulanan sınıflara bakın:</p> + +<pre class="brush: html notranslate"><form class="form form--theme-xmas form--simple"> + <input class="form__input" type="text" /> + <input + class="form__submit form__submit--disabled" + type="submit" /> +</form></pre> + +<p>Ek sınıflar, OOCSS örneğinde kullanılanlara benzer, ancak BEM katı adlandırma kuralları kullanır.</p> + +<p>BEM, daha büyük web projelerinde yaygın olarak kullanılmaktadır ve birçok kişi CSS'lerini bu şekilde yazmaktadır.</p> + +<p>Sistem hakkında daha fazla bilgi edinmek için CSS Hileleri üzerine <a href="https://css-tricks.com/bem-101/">BEM 101'i</a> okuyun.</p> + +<h4 id="Diğer_yaygın_sistemler">Diğer yaygın sistemler</h4> + +<p>Kullanımda olan bu sistemlerden daha fazlası da vardır. Diğer popüler yaklaşımlar arasında Jonathan Snook tarafından oluşturulan <a href="http://smacss.com/">Ölçeklenebilir ve Modüler CSS Mimarisi(SMACSS)</a>, Harry Roberts'tan <a href="https://itcss.io/">ITCSS</a> ve Yahoo! tarafından oluşturulan <a href="https://acss.io/">Atomic CSS (ACSS)</a> bulunmaktadır. Bu yaklaşımlardan birini kullanan bir projeyle karşılaşırsan, o zaman avantajın aynı tarzda kodlamayı anlamana yardımcı olabilecek bir çok makale ve rehbere ulaşabilmendir.</p> + +<p>Böyle bir sistemi kullanmanın dezavantajı, özellikle küçük projeler için aşırı derecede karmaşık görünebilmeleridir.</p> + +<h3 id="CSS_için_bir_sistem_oluşturun.">CSS için bir sistem oluşturun.</h3> + +<p>CSS'i düzenlemenin bir başka yolu da, arayüz geliştiricileri için mevcut olan bazı araçlardan yarlanmaktır; bu CSS yazmak için biraz daha programlı bir yaklaşım benimsemene olanak tanır. Ön işlemci ve son işlemci olarak adlandırdığımız bir dizi araç vardır. Bir ön işlemci, ham dosyalarınız üzerinde çalışır ve onları bir stil sayfasına dönüştürür, oysa bir son işlemci bitmiş stil sayfasını alır ve ona bir şeyler yapar — daha hızlı yüklenmesi için onu optimize edebilir.</p> + +<p>Bu araçlardan herhangi birini kullanmak için, geliştirme ortamının ön ve son işlemeyi yapan komut dosyalarını çalıştırabilmesi gerektirir. Birçok kod düzenleyici bunu sizin için yapabilir veya yardımcı olması için komut satırı araçları yükleyebilirsiniz.</p> + +<p>En popüler ön işlemci <a href="https://sass-lang.com/">Sass</a>'tır. Bir bir Sass öğreticisi değildir, bu yüzden diğer Sass özelliklerinden herhangi birini kullanmasanız bile, Sass'ın yapabileceği, planlama açısından gerçekten yarlı olan birkaç konuyu kısaca açıklayacağım. Sass hakkında daha çok şey öğrenmek istiyorsanız, <a href="https://sass-lang.com/guide">Sass Temelleri</a> makalesi ile başlayın ve ardından diğer belgelerine geçin.</p> + +<h4 id="Değişken_tanımlama">Değişken tanımlama</h4> + +<p>CSS artık yerel <a href="/tr/docs/Web/CSS/Using_CSS_custom_properties">özel özelliklere</a> sahiptir ve bu Sass'ın özelliğini, giderek daha az önemli hale getirir, ancak Sass'ı kullanmamızın nedenlerinden biri, bir projede kullanılan tüm renkleri ve yazı tiplerini bir dosyada tanımlayabilmek ve ardından bu değişkeni tüm proje içerisinde kullanmaktır. Bu, mavinin yanlış tonunu kullandığınızı fark ettiğinde, yanlış tanımı sadece bir yerde değiştirmenin yeterli olacağı anlamanı gelir.</p> + +<p>Aşağıdaki ilk satırdaki gibi bir <code>$base-color</code> değişkeni tanımlarsak, onu stil sayfası aracıyla bu rengi kullanmamız gereken her yerde kullanabiliriz.</p> + +<pre class="brush: css notranslate"><code>$base-color: #c6538c; + +.alert { + border: 1px solid $base-color; +}</code></pre> + +<p>CSS derlendikten sonra aşağıdaki gibi gözükecektir.</p> + +<pre class="brush: css notranslate"><code>.alert { + border: 1px solid #c6538c; +}</code></pre> + +<h4 id="Birleşen_stil_sayfalarını_derlemek">Birleşen stil sayfalarını derlemek</h4> + +<p>Yukarıda CSS'i planlamanın bir yolununda stil sayfalarını daha küçük stil sayfalarına bölmek olduğundan bahsetmiştim. Sass'ı kullanırken bunu başka bir seviyeye taşıyabilir ve çok sayıda çok küçük stil sayfalarına sahip olabilirsin — hatta her bileşen için ayrı bir stil sayfasına sahip olacak kadar ileri gidebilirsin. Sass(kısımlar-partials) içerme işlevini kullanarak, web sitenizde kullanmak istediğiniz stil sayfalarını bir birine bağlayarak bir veya daha fazla stil sayfasını kullanabilirsin.</p> + +<p>Örneğin, <a href="https://sass-lang.com/documentation/at-rules/use#partials">partials(kısımlar)</a> ile bir dizin içerisinden birkaç stil dosyaların olabilir: Diyelim ki <code>foundation/_code.scss</code>, <code>foundation/_lists.scss</code>, <code>foundation/_footer.scss</code>, <code>foundation/_links.scss</code> vb. dosyaların olsun. Bunları Sass'da kullanmak için <code>@use</code> bildirimini kullanabilirsin:</p> + +<pre class="brush: css notranslate">// foundation/_index.sass +@use 'code' +@use 'lists' +@use 'footer' +@use 'links'</pre> + +<p>Kısımların tümü, yukarıda belirtildiği gibi bir dizin dosyasına yüklenirse, daha sonra tüm dizini tek seferde başka bir stil sayfasına bağlayabilirisin:</p> + +<pre class="brush: css notranslate">// style.sass +@use 'foundation'</pre> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: Sass'ı denemenin basit bir yolu <a href="https://codepen.io">CodePen</a> kullanmakttır. CSS'in için Sass'ı ayarlardan etkinleştirerek, CodePen'nin web sayfanı normal şekilde görebilmen için Sass aracını kullanmasını sağlayabilirsin. Bazen CSS öğreticilerinin CodePen demolarında düz CSS yerine Sass kullandığını göreceksin, bu sebeble bu konuda bilgi sahibi olman faydalı olacaktır.</p> +</div> + +<h4 id="Optimizasyon_için_son_işlem">Optimizasyon için son işlem</h4> + +<p>Örneğin, çok sayıda ek yorum ve boşluk ekleyerek stil sayfalarının boyutunun artmasından endişe ediyorsan, üretim sürümünde gereksiz olan her şeyi kaldırarak CSS'i optimize etmek için bir işlem sonrası yapılması gerekenler olabilir. Bunu yapmak için son işlemci çözümüne bir örnek <a href="https://cssnano.co/">cssnano</a>.</p> + +<h2 id="Bundan_sonra">Bundan sonra</h2> + +<p>Bu, CSS'i öğrenme rehberinin son bölümüdür ve görebileceğin gibi CSS'i keşfinin bu noktadan sonra devam edebileceği birçok yol vardır.</p> + +<p>CSS'de mizanpaj hakkında daha fazla bilgi edinmek için <a href="/tr/docs/Learn/CSS/CSS_layout">CSS Mizanpajını Hakkında</a> bölümüne bakabilirsin.</p> + +<p>Artık <a href="/tr/docs/Web/CSS">MDN CSS</a> materyalinin geri kalanını keşfetme becerisine sahip olmalısın. özellikleri ve değerleri arayabilir, kullanılacak kalıplar için <a href="/tr/docs/Web/CSS/Layout_cookbook">CSS YemekKitabını</a> inceleyebilir ve <a href="/tr/docs/Web/CSS/CSS_Grid_Layout">CSS Izgara Düzeni Rehberi</a> gibi bazı özel kılavuzlardan daha fazlasını okuyabilirsin.</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'inizi düzenleme</a></li> +</ol> |