Media Tag nedir nasıl kullanılır.

css-3-medya-sorgulari/ yenilenmis-flex-modulu/

Ölçeklenebilir css

https://webmaster.kitchen/itcss-olceklenebilir-ve-erisilebilir-css-mimarisi/

BLOCK__ELEMENT — MODIFIER

BEM, CSS tarafında arayüzümüzde bulunan nesneleri 3 ana başlık altında toplar; Block: Arayüz üzerinde diğer nesnelerden bağımsız tek başına bir bütün oluşturan arayüz elemanlarımızdır. Header elamanımız, iletişim formumuz vb. nesneler bizim blok nesnelerimizdir. Ana komponentlerimiz de diyebiliriz aslında. İsimlendirmek için anlamsal bir class ismi tanımlamak yeterlidir.

Element: Elementler, blok nesnelerin içerisinde yer alıp onların iç elementleri olan nesnelerdir. Class isminden sonra iki alt tire (“__”) kullanılıp gerekli metinsel ek getirilerek kullanılır.

Modifier: Arayüz elemanlarımızın farklı durumlardaki hali için yapısal olmayan değişikleri için kullanırız. Aktif-pasif , büyük-küçük element gibi örnekler verebiliriz. Art arda gelen iki orta çizgi (“ — ”) ve gerekli metinsel ek getirilerek kullanılır.

• Okunabilir, tahmin edilebilir kod yapısı
• Sürdürülebilir kod yapısı
• İç içe geçmiş tanımlamalardan kurtulmuş kod yapısı
• Tekrar kullanılabilir, kopyala yapıştır azaltan kod yapısı
• Karmaşıklığı azaltan kod yapısı

Ben için incelediğimiz yazı

BEM ALTERBATIVE SOURCE http://getbem.com/naming/

DİĞER CSS yaklaşımları ITCSS, SMACSS, OOCSS, Atomic CSS;

OOCSS

SMACSS Atomic CSS

Diğer Linkler

Reset.Css SCSS/SASS Media Tag Example FlexGrid Example