Stats preview card component | SCSS, BEM

Community feedback

• 

  Karol Binkowski•1,640

  @GrzywNPosted almost 2 years ago

  Siema @P4ZD4N

  Staraj się używać remów zamiast px. Pixeli nie używa się ze względu na skalowanie treści, czyli jak ktoś ma w przeglądarce ustawionego zooma albo większy rozmiar czcionki to wtedy pixel jest pixelem i nie skaluje się w żaden sposób. Dlatego lepiej używać remów i emów, choć emów ja raczej nie używam. Remy odnoszą się do font-size nadanego w tagu html, a emy do odziedziczonego font-size z nadrzędnych elementów. Domyślnie 1 rem to 16px, więc można albo ręcznie to policzyć albo użyć wtyczki px to rem w VS Code i wtedy jednym skrótem zmieniasz px na remy i odwrotnie. Wszystkie deklaracje wielkości czcionki powinny być w rem, a nie w px ani em. Czasami używa się px dla jakiś małych wielkości typu border na 3px albo box-shadow. Poza tym większość designów jest tworzona w wielokrotnościach czwórki typu margin 32px, czyli 2 remy, co ułatwia prace na remach.

  Zamiast clampa to polecam ci używanie max-width i width: 100% (jeśli potrzebne). Clamp nadaje min-width, a tego raczej nie powinno się używać ze względu na mniejsze ekrany. Jeśli bardzo chcesz używać nowoczesnych funkcji to możesz sobie dać coś takiego width: min(100%, 24rem). Wtedy masz to samo, ale bez tego min-width. Używanie max-width jest kozackie, bo możesz sobie wrzucić ile jakiś element może mieć i masz właściwość często uniwersalną dla mobile, tabletu i desktopa bez większego zastanawiania się jak to będzie wyglądać na danych szerokościach.

  Raczej odradzam używania procentowych wartości dla paddingów, marginów, szerokości itp. Jak zmniejszysz sobie szerokość na twojej stronce to tekst zaczyna wchodzić na obraz, a raczej powinien stale być oddalony od obrazka o te np. 2 remy. Kiedyś używałem procentowych szerokości dla paragrafów i headingów, żeby tekst się tak samo zawijał jak w designie, ale teraz raczej zrobiłbym to za pomocą max-width. W tailwindzie często używam czegoś takiego jak max-w-prose czyli w CSSie max-width: 65ch; Generalnie jest to fajny sposób, żeby zmniejszyć szerokość tekstu niezależnie od wielkości jego czcionki dla np. paragrafów.

  pracuj pracuj xd naura

  Marked as helpful

  0
• 

  Mamadou Mar•550

  @Mar1362Posted about 2 years ago

  hi, good job, you succeed it. the site is well done but you have to change your layout breakpoint to something like 700px at least.

  Thanks and good continuation

  Marked as helpful

  0