Merhaba, uzun zamandır CSS çalışmıyorum. Aklıma takılan bir konuyu sizlere sormak istedim.
<article id="article">
<div id="icerik">
<h1>Yazı Başlığı</h1>
<img src="avatar.jpg">
<p id="icyazi">Lorem ipsum dolar sit amet. Lorem ipsum dolar sit
amet.Lorem ipsum dolar sit amet. Lorem ipsum dolar sit amet.
Lorem ipsum dolar sit amet. Lorem ipsum dolar sit amet.
Lorem ipsum dolar sit amet. Lorem ipsum dolar sit amet.
Lorem ipsum dolar sit amet. Lorem ipsum dolar sit amet.
Lorem ipsum dolar sit amet. Lorem ipsum dolar sit amet.
Lorem ipsum dolar sit amet. Lorem ipsum dolar sit amet.
</p>
</div>
</article>
Yukarıda oluşturduğum içerik kısmında yazı başlığı, yazı görseli ve yazı metni yer alacak. Sizce buradaki başlık, resim ve içerik yazısını bir div içine mi almalıyım? Örneğin:
<article id="article">
<div id="icerik">
<div id="baslik">Yazı Başlığı</div>
<div id="resim"><img src="avatar.jpg"></div>
<div id="icerik"><p id="icyazi">Lorem ipsum dolar sit amet. Lorem ipsum dolar sit
amet.Lorem ipsum dolar sit amet. Lorem ipsum dolar sit amet.
Lorem ipsum dolar sit amet. Lorem ipsum dolar sit amet.
Lorem ipsum dolar sit amet. Lorem ipsum dolar sit amet.
Lorem ipsum dolar sit amet. Lorem ipsum dolar sit amet.
Lorem ipsum dolar sit amet. Lorem ipsum dolar sit amet.
Lorem ipsum dolar sit amet. Lorem ipsum dolar sit amet.
</p>
</div>
</div>
</article>
Bunu şundan ötürü soruyorum, bir div içine alıp kutu muamelesi gösterince, istediğim gibi konumlandırabiliyor ve şekillendirebiliyorum. Ancak bu şekilde bıraktığım zaman yerleşim ayarları vs zorlanıyorum. Mesela, başlık etiketini bir div içine alınca, divin kendisini ayrı, yazısını ayrı bir şekilde düzenleyebiliyorum. Sadece hangi kullanım doğrudur onu öğrenmek istedim.
Bu div’lerin default olarak display: block olmasından kaynaklanıyor, yani kutu muamelesi yapmak için illa etikete ihtiyacınız yok.
Ben olsam amaca göre değişir ama şunun gibi bir şey yapardım herhalde:
<article id="article">
<div class="content">
<div class="content--header">
<h1>Yazı Başlığı</h1>
<img src="avatar.jpg" />
</div>
<div class="content--body">
<div class="content-text">
<p id="icyazi">
Lorem ipsum dolar sit amet. Lorem ipsum dolar sit amet.Lorem ipsum
dolar sit amet. Lorem ipsum dolar sit amet. Lorem ipsum dolar sit
amet. Lorem ipsum dolar sit amet. Lorem ipsum dolar sit amet. Lorem
ipsum dolar sit amet. Lorem ipsum dolar sit amet. Lorem ipsum dolar
sit amet. Lorem ipsum dolar sit amet. Lorem ipsum dolar sit amet.
Lorem ipsum dolar sit amet. Lorem ipsum dolar sit amet.
</p>
</div>
</div>
</div>
</article>
Açıkçası bildiğim kadarıyla bu ve bu gibi şeylerin herhangi bir standardı yok, tamamen sizin sisteminiz. Bu arada belki faydası olur, div ismi division’dan geliyor. Bölme demek. https://github.com/Unreol-Freedom/unreol-freedom.github.io
Benim html kodlama stilimi buradan görebilirsiniz. Ben html kodlarken sayfanın inspect edilirken nasıl görüneceğini de hayal etmeye çalışıyorum ve bazen ona göre kod yazıyorum. Mesela bir post container’ı hayal edin, bu bir div olsun. Bu post container’ı inspect edildiğinde altından bir kaos çıkmamalı, <h1> bir yerde, <span> bir yerde, X bir yerde, Y bir yerde olmamalı, hepsi aynı anda görülmemeli, divlere ayrılıp sınıflandırılmalı ve kolayca anlamlandırılabilmeli ki rahatça okunsun. Böyle düşünüyorum, böyle bir prensip oluşturdum.
Linkini bıraktığım bir React projesi ancak yine de kodları rahatça okuyabileceğinizi düşünüyorum. JSX adı altında html/css/js’i aynı anda kodluyorsunuz aslında. Son zamanlarda div kullanımına ya da genel anlamda html kodlamaya yoğunlaşmışsınız, umarım faydası olur.
Hocam, öncelikle cevabınız için teşekkür ederim. Şunu sormak istiyorum: mesela içerik bölümünde classlar ile çalışmışsınız. Ben class kullanımını daha çok çeşitli yerlerde ortak olarak kullanılan etiketleri barındırmak için kullanmalıyım, diye düşünüyordum. Yani örneğin sayfadaki tüm p etiketlerini veya h1 etiketlerini bir sınıfa dahil etmek gibi. Bu şekilde spesifik olarak genel divlerin dışında kullanabileceğim bir alan bulamamıştım doğrusu. Bu konuda ne düşünüyorsunuz?
Bir diğer konu da şu, bu mantık çerçevesinde aslında block:display olarak tanımlanmış tüm etiketleri, illa ki bir div içinde düzenlemek gereksiz diyebilir miyiz? Zaten bir kutu görevi görüyor yani? Örneğin ben şöyle bir kod yazarak başlığı şekillendirsem, saçma olur mu?:
.content--header h {
margin-left:10px;
margin-top:10px;
font-family:arial;
}
Kendimi izah edemediysem kusuruma bakmayın… Ayrıca kodlarınızı da inceleyeceğim, böyle detaylı projeler görünce takdir etmemek elde değil
Bu cümleyi anlayamadım ama sanırım class ve id’lerle ilgili şunu demek istiyorsunuz, sayfadaki <element> sayısı 1 tane ise buna id, 2 tane ise class verilmeli.
Ben sayfada 1 tane bulunacağını herkesin bilebileceği şeylere id girerim, onun dışında full class’larla çalışırım. Mesela <main> semantic tag’i sayfada 1 tane bulunur, <nav> de aynı şekilde. Tabii bunların sayfada sadece 1 kere bulunabileceğini söyleyen bir standart yok, bunu da ben diyorum. Yani aslında bu konu da bir noktada tamamen sizin terchinizle, sisteminizle alakalı bir konu.
Demek istediğinizi anlayamadım." <h1> de block şeklinde görüntülenen bir element, <div> de. <h1>'i <div> içine koymama gerek yok" gibi bir şey mi demek istiyorsunuz ? Açıkçası bu da tamamıyla size bağlı bir şey. Tamamen işlevsel yaklaşacak olursak evet, <h1>'i <div> içine almanın bir gereği yok, tabii bazı css kodları istisna yaratabilir. Ama olaya sadece işlevsel yaklaşmamalıyız diye düşünüyorum.
Bu arada
Bu ve bu gibi yorumlarımdan şüpheliyim, belki de frontend geliştirme de aynen dil gibi yaşayan bir varlık da olabilir. Türkçe’de “kalem” arapça kökenlidir, asıl Türkçe’si "yazgaç"tır ancak günümüzde hepimiz “kalem” kullanırız. İkisi de doğrudur, kullanılabilirlerdir ama biri daha çok tercih edilir. HTML kodlarken ya da daha genel bir tanımla frontend geliştirirken de belki de buna benzer durumlar söz konusudur. Kısacası “standart” ya da “stil” diye bahsettiğim konuya ben de çok uzağım, sadece kendimce felsefe yapıyorum üzerinde. Ama şundan emin olun, zamanla siz de herkes gibi html kodlamaya başlarsınız.
Umarım anlatabilmişimdir, biraz karmaşık yazmış gibi hissettim.
