search

eser / acikkaynak-website

acik-kaynak.org 1.0
https://acik-kaynak.org/
Apache License 2.0
111 stars 20 forks source link

Bulma yerine Styled System? #18

Closed MrPeker closed 5 years ago

MrPeker commented 5 years ago

Ne kadar doğru bir karar olur bilmiyorum ancak uzun uzun bulmaStyles dan sınıfları yazmaktansa yol yakınken projeyi styled-system'a geçirmek ne kadar mantıklı olur?

MrPeker commented 5 years ago

Styled System kullanmak Rebass ile birlikte oldukça işimizi kolaylaştırabilir bence, ayrıca bir sürü bulmaStyles dan kurtulmuş oluruz :) Siz ne düşünüyorsunuz?

eser commented 5 years ago

Merhaba,

Styled System'e karşı şahsen en büyük çekincem stillendirmeyi de layout'u belirlediğin kod seviyesinde belirtiyor olman.

Bu arada olmaz değil, hatta iyi bir soyutlama yaparsan presentation component ve container component ayrımı ile gayet güzel bir yapı da oluşturabiliriz. O nedenle biraz arada kaldım, halihazırda hem styled system hem de farklı şeyler denemiş kişilerden yorum bekliyorum aslında. Daha geniş katılımla konuyu ele alalım :)

@f @muratcorlu

muratcorlu commented 5 years ago

Beni bu tartışmaya dahil etmen ne kadar doğru bilmiyorum @eserozvataf ama, mevzuyu anlamak için şu soruyu sorabilirim: Mevcut durumda problem nedir tam olarak? "uzun uzun bulmaStyles dan sınıfları yazmak" derken kastedilene bir örnek verebilir misin @MrPeker ?

MrPeker commented 5 years ago

@muratcorlu aslında bir çok açıdan yararlı olabilir, şöyle bir şey var özellikle sayfaların render kısmına baktığımızda o divin ne işe yaradığını anlayabilmek için sınıfına bakmamız gerekiyor, sınıfına bakarken uzunca yazılmış bir sürü bulmaStyles yorucu olabiliyor, bu tarz oldukça benzer componentlerin kullanıldığı bir sistemde websitesini styled system üzerine inşa edip hem kod tekrarını azaltmış olup hem de daha okunabilir yapabiliriz diye düşünüyorum.

muratcorlu commented 5 years ago

Valla react dünyasının bu çözümlerine benim kafam ermiyor zaten. Bana kalsa stil, class vs işlerini hiç JS'ye bulaştırmasanız keşke derdim. <div class="article"> yazın, sonra gidin stil dosyanızda da .article { color: black; } diye stil verin. JS'nin ne işi var renkle, fontla. :)

MrPeker commented 5 years ago

Şöyle düşünebilirsin, eğer iyi bir şekilde kurgularsan hem CSS'i hemde JS'i sadece gerekli olduğu zaman o component için yüklüyorsun, ayrıca bunu yaparken ayrı ayrı dosyalar oluşturup bunlarda sass kullanmaktansa iyi kurgulanmış bir mimaride kullanılan componentin ihtiyaç duyduğu kendi cssi ile birlikte gelip ikisininde aynı dosya içerisinde yer alması bana göre oldukça mantıklı. Ayrıca theme provider gibi yapılarda oldukça kullanışlı olabiliiyor kimi zaman.

muratcorlu commented 5 years ago

Ben artık Sass vs kullanmayı da sorguluyorum gerçekten gerekli mi diye. Theme provide etmek icin CSS Variable öneririm. Direkt tarayıcı tarafından canlı olarak çözümlendiği için, tarayıcıda anlık değişiklik de mümkün. Sadece variable'ları değiştiren bir css dosyası import ederek arayüzünüzü baya değiştirebilirsiniz. CSS'in bir çok nimetini(calc, transform, transition, animation vs) es geçiyoruz.

eser commented 5 years ago

Uzun süre bakma fırsatım olmadı, ancak ara ara styled-system inceledim.

@muratcorlu 'nun bahsettiği gibi yalınlıktan da çok uzaklaşmak gerek. evet bir CSS framework iyi bir iskelet oluyor, ancak komple bir soyutlama katmanı iyi mi? halen emin olamıyorum.

geçtiğimiz hafta @f ile yüzyüze konuşma şansı buldum. Semantic UI ve Material UI övdü. @emrehayirci ile görüştüğümde de Material UI övmüştü.

Ben ise şu anda Semantic UI React'a denk geldim ve optimal bir çözüm olacağı kanısındayım.

Yorumları memnuniyetle dinlerim :)

eser commented 5 years ago

Şu an https://preview.acikkaynak.info 'da kullanıldığı üzere Semantic UI React ile devam edebiliyoruz geliştirmeye. Gayet güzel bir HTML çıktısı ve esnek/modern bir CSS çatısı sunuyor. Şimdilik issue'yu kapatıyorum. Yine dilediğinizde değerlendirmeye açabiliriz.