Siema, mam trochę widoczne braki w css i chciałbym coś z tym zrobić, chciałem zapytać o wasze przemyślenia na temat CSS i najlepszych praktyk. Dla przykładu, przygotowując stronę z makiet pod pixel perfect, warto mieć na uwadze dokładną rozdziałkę pod jaką została przygotowana makieta, czy po prostu uznać ją za np. "desktop" i nie przejmować się za bardzo wymiarami? Przy zmienianiu wysokości/szerokości okna przeglądarki naprawiać każdą pierdołę, czy bardziej skupić się na kilku konkretnych breakpointach a resztę zostawić jaka jest? Rozpoczynając pracę z projektem w css zaczynać od widoku mobilnego i dopiero potem w media queries dodawać wyższe rozdzielczości? To kilka takich pytań, które nasunęły mi się podczas kodzenia css'ów. Możecie podzielić się swoimi przemyśleniami i praktykami, które warto stosować, by pisać dobry i pixel perfect css?
Sugeruje się, żeby zaczynać od widoku mobilnego, bo niby smartfony są biedne i słabe i trzeba im dać jak najmniej kodu do przetworzenia, żeby się nie spociły. Osobiście uważam jednak, że przy dobrze zrobionym CSS te kilkanaście kB kodu więcej nie zrobi różnicy, a zaczynanie od widoku mobilnego jako bazy wyjściowej utrudnia pracę.
Dobrze zrobione responsywne CSS będzie działać w każdej rozdzielczości. Skupianie się tylko na kilku wybranych rozmiarach nie ma sensu.
warto mieć na uwadze dokładną rozdziałkę pod jaką została przygotowana makieta, czy po prostu uznać ją za np. "desktop" i nie przejmować się za bardzo wymiarami
Nie rozumiem.
Robisz projekt tak jak dostałeś od grafika. Spotkałem się z tym, że zaczynanie od mobilnego widoku to podobno dobra praktyka. Natomiast wyznaję zasadę, że w tym wypadku dobrą praktyką będzie ta, która pasuje Tobie. Sam jak projektowałem dla siebie UX zaczynałem od desktopu, bo tak dla mnie najwygodniej. Dużo łatwiej mi osobiście było później przerabiać z desktopu na mobile chociaż "specjaliści" krytykowali moje podejście. Czasami po prostu wygodniej jest być ignorantem.
Naprawę każdej pierdoły będziesz mógł ignorować jeżeli ona nie wystąpi. Znam sporo stron, które owszem są mobile friendly ale tylko pod względem skalowania. Często zapomina się o skalowaniu tekstu czy obrazów. I oczywiście przygotowujesz 3 może 4 różne rozdzielczości, a nie 20. Tutaj też dużo zależy od grafika i tego co przygotuje. Tych niestety często ponosi fantazja przez co później musisz siedzieć godzinami nad jakąś pierdołą.
Pixel perfect? A to w ogóle możliwe? Bo jeszcze z rok temu było nieosiągalne chociażby z powodu różnego renderowania fontów w różnych przeglądarkach/systemach. Pamiętam jak ganiłem kolegę, który potrzebował projektu, że źle go zakodował i siedziałem kilka godzin w konsoli żeby dać mu poprawki. Finalnie poległem na fontach.
*Nie jestem frontendowcem więc moje rady mogą być błędne z perspektywy kogoś, kto siedzi w tym dzień w dzień. Bazuję raczej na doświadczeniu.
by pisać dobry i pixel perfect css?
Pixel perfect to dzisiaj antywzorzec - strony nie mają być dzisiaj pixel perfect, a mają być w duchu RWD tak, żeby dopasowywały się do różnych rozdzielczości okna (więc projektowanie z dokładnością do piksela jest wręcz szkodliwe i w duchu stron z początku XXI wieku, gdzie robiło się stronę z dopiskiem "najlepiej działa w rozdzielczosci 1024x768").
Dla przykładu, przygotowując stronę z makiet pod pixel perfect, warto mieć na uwadze dokładną rozdziałkę pod jaką została przygotowana makieta, czy po prostu uznać ją za np. "desktop" i nie przejmować się za bardzo wymiarami? Przy zmienianiu wysokości/szerokości okna przeglądarki naprawiać każdą pierdołę, czy bardziej skupić się na kilku konkretnych breakpointach a resztę zostawić jaka jest?
Pytanie do tego, kto ci dostarczył makietę (grafik? UXowiec? klient?). Bo wietrzę tu problem z komunikacją. Albo polegający na tym, że nie umiecie się dogadać do oczekiwań (w tak normalny ludzki sposób - warto dopytać zawsze, jak nie rozumiesz, czego oczekuje druga strona), albo być może dostajesz jakieś złe/niewystarczające makiety (jeśli z makiet nie wynika jednoznacznie to, co masz zrobić. Chyba, że one są tylko wskazówką, a nie dokładnymi wymaganiami).
czy bardziej skupić się na kilku konkretnych breakpointach a resztę zostawić jaka jest?
Pamiętaj, że breakpointy to tylko jeden ze sposobów na osiągnięcie RWD i masz też inne sposoby (np. użycie %, vh, vw zamiast pikseli).
Ogólnie breakpointy lepiej traktować jako ostateczność.
Przy zmienianiu wysokości/szerokości okna przeglądarki
Pamiętaj też, że urządzenia mobilne to nie do końca to samo, co "zmienianie szerokości/wysokości okna przeglądarki" (chociaż w dev toolsach można włączyć emulator mobilek, ale i tak lepiej to przetestować również na prawdziwym urządzeniu).
Mi pomaga modułowość kodu, części odpowiadające konkretnym widokom (lub ich grupom), funkcjom itp.
Możesz stosować różne metodyki css: OOCSS, BEM czy SMACSS
Możesz używać preprocesory css.
Możesz używać różne gridy.
:)