Własny framework CSS [ankieta]

Question

Witam,

Chciałbym Wam oddać pod ocenę własny framework CSS. Jest to już druga próba stworzenia takiego frameworka, lecz kod jest napisany całkowicie od nowa. Framework oparty jest na CSS Flexbox. Prosiłbym o wszelkie uwagi.

Inspiracją jest ociężałość Bootstrapa, ale przede wszystkim Bootstrap 4. Chciałem zobaczyć, czy zrobię coś podobnego szybciej niż Twitter ;) Zminifikowany plik CSS waży około 2KB ;)

Projekt na GitHubie:
https://github.com/jpacanowski/CSSFramework

Możliwe odpowiedzi:

podoba mi się (7 głosów, 88%)

nie podoba mi się (1 głos, 13%)

Answer 1

https://github.com/jpacanowski/CSSFramework/blob/master/framework.css#L16 → do przemyślenia: https://nicolas-hoizey.com/2016/03/people-don-t-change-the-default-16px-font-size-in-their-browser.html (nie mówię, że tak jest lepiej, ale warto to wiedzieć!)

https://github.com/jpacanowski/CSSFramework/blob/master/framework.css#L24-L26 → https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

https://github.com/jpacanowski/CSSFramework/blob/master/framework.css#L35 → itd. Strasznie dużo magic numbers, które nie wiadomo skąd się biorą. Tutaj pomógłby preprocesor przeliczający to albo – jeszcze lepiej – relatywne jednostki → https://css-tricks.com/rems-ems/

https://github.com/jpacanowski/CSSFramework/blob/master/framework.css#L201 → takie selektory nie mają prawa pojawić się we frameworku: za duża specyficzność i równocześnie za mała szczegółowość. IMO we frameworkach wszystko powinno być jak najbardziej spłaszczone (patrz: BEM).

Brakuje mi też podziału na sensowne moduły.

Comments

Woow, wielkie dzięki. Muszę też ogarnąć em, bo póki co w ogólę tego nie łapię ;)

Answer 2

Nawet, nawet, tylko klasy @media możesz trzymać w jednym miejscu ;)

Comments

IMO nie bardzo. Bardziej czytelnie jest wsadzić media queries do "modułu", którego dotyczą (a jak będą prawdziwe moduły, to tym bardziej ma to sens ;)).

Answer 3

Toż to czysty grid, ten 'framework' to trochę nad wyraz użyty ;)

Poczytaj o emach jako breakpointach przy rwd.

Rozważ jakiś preprocesor, żeby łatwiej się to później customizowało.

Answer 4

Co tu wielce oceniać i czy w ogóle to można nazwać frameworkiem (tak , widze w nazwie ze to mikro fw). Grid i ledwie kilka klas na dodatek mało użytecznych, jak na przykład ta:

.footer {
	padding: 18px 0;
	background: #333;
	color: #777;
}

Ustawiony na sztywno padding w px i kolor.

Dodać można też że nie korzystasz z żadnego preprocessora ani z jednostek EM i RM.

Comments

Muszę ogarnąć em, bo póki co w ogólę tego nie łapię ;)

---

Zbyt wiele logiki tam nie ma :)

https://css-tricks.com/rems-ems/