CSS layout için en iyi yöntem? 😕 lütfen yardım

Selamun aleykum, uzun süredir kabataslak CSS öğrenmeye çalışıyorum. Kişisel olarak bir şey yaparken "en iyi yöntemi" bilmezsem rahat edemiyorum, stres yapıyorum

2 tane sorum var lütfen üstadlar açıklığa kavuşturursa beni büyük bir yükten kurtarırlar.

1) CSS layout (site düzeni - header, footer ve content yerleşimi)
2) bloglarda content içerisinde son gönderiler kısmı.

Bu 2 şey için ayrı ayrı hangi CSS düzeni en mantıklı, performanslı ve modern?

Yani kafamın karışması normal, düzen için - float, Flex (eski flexbox), grid, table-cell vb çok fazla yol var. Hangisi üzerine yoğunlaşmak gerekiyor?

Burada bir sürü etken var. Her birinin kullanım amacı farklı demeyin lütfen evet farklı. Ama bu 2 düzeni de hepsiyle de yapabiliyoruz. Hangisini seçmek daha iyidir. Hiç kaynak yok.

Google bile bu CSS lerin tarayıcıda derlenme performansını paylaşmıştı geçen senelerde. Yani o kadar fark var aralarında.

Hangisini tercih etmek lazım ve neden? Benim için Flex daha mantıklı ve modern geliyor ama kararsızım. Her tema farklı bir yöntem seçmiş.

BEM standartını araştırın hocam. Tüm html ve css adlandırmalarınız hem daha anlamlı hem css ve sass için kullanması ve okuması çok daha kolay.

yanliş anlamadıysam konuyu SASS deneyın performaz hız coklu kod yapısını aynı netra ıcınde kulanma.

Teşekkürler hocam incelicem. Yani hangi yöntemi kullanmak en iyisi, layout düzeninde ve content içeriklerinde?
Getbem e baktım şimdi ama html isimlendirmeleriyle ilgili bir standart gibi.


Hocam sorun CSS değil, layout düzenini hangi yöntemle yapmak mantıklı? Yoksa css, sass, scss, less birbirinden başka diller değil.

Şu en iyi düzendir demek yanlış olur. Flexbox ile CSS Grid aynı şey değil. Her ne kadar benzer işleri yapıyor olsalarda kullanım alanları farklı. Float kullanımından kaçının fakat kurtulamazsınız. Bazı problemlerin günümüz koşullarında float dışında çözülmesi imkansız.

Tarayıcı desteğinden dolayı Flexbox diyeyim. IE 11 ve bazı az bilinen tarayıcılar benim için önemsiz diyorsanız CSS Gridi de projeye dahil edin. Çok büyük zaman zaman kazandırıyor bu ikisini kombine edip kullanmak.

BEM denilen şey syntax standardı oluşturmaktan başka bir şey değil.