CSS - korzystanie z klasy na wielu podstronach

pytanie zadane 8 lipca 2018 w HTML i CSS przez Justyna Obywatel (1,210 p.)

Cześć

Czy stylując strony gdzie mamy np ich 8. To czy istnieje taka zasada, że tworzone klasy na danej podstronie nie możemy użyć na innych? No bo nawiązuje do tego, że chcąc kiedyś zmodyfikować taka klasę, nie będziemy mieli pewności czy nie zepsuje się styl na jakiejś z podstron.

Jakieś rady?

(korzystam z .scss)

2 odpowiedzi

odpowiedź 8 lipca 2018 przez imklau Nałogowiec (42,090 p.)

Trochę nie rozumiem problemu chyba. Dlaczego chcesz tworzyć klasy i koniecznie nie używać ich na innej podstronie? Wymyślasz sobie jakąś klasę, która nadaje Ci jakieś tam określone style dla elementu i jeśli potrzebujesz tak samo ostylowanego elementu na innej stronie to używasz tej samej klasy, a jak potrzebujesz czegoś innego to wymyślasz nową klasę i tyle ;)

Jak tworzysz przycisk i używasz go na kilku podstronach to normalne, że przy zmianie czegoś w '.button { ... }' zmieni Ci się wszędzie tam, gdzie on występuje. Jeśli chcesz, żeby mimo wszystko na jednej podstronie wyglądał inaczej to po prostu potrzebujesz innej klasy. Możesz też dawać jakieś modyfikatory - poczytaj sobie o czymś takim jak BEM.

A mogłabyś podać jakiś przykład tego o co Ci chodzi? Może łatwiej będzie pomóc.

komentarz 8 lipca 2018 przez Justyna Obywatel (1,210 p.)

A jeśli mamy ostylowany element z dodanymi marginesami, paddingami. Później używamy tego na 7 stronach z 26 i na jednej stronie będą wadziły te marginesy / paddingi i zajrzy do kodu nowa osoba i nie będzie wiedziała na ilu stronach ta klasa jest wykorzystywana no i co zmieni, żeby akurat na tej stronie było dobrze ale na pozostałych się wysypie.Albo poprawi jeszcze na 3 ale wciąż na 4 stronach będzie popsute,

Jak uniknąć takich sytuacji /\ ? (oprócz motywu, przed zmianą każdej klasy wyszukiwać użycia jej na wszystkich stronach). <- czy to jedyne wyjście ?

komentarz 8 lipca 2018 przez imklau Nałogowiec (42,090 p.)

Hmm no to właśnie ja do takich sytuacji używam BEMa. W pliku button.scss często mam coś w tym stylu:

.button {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  outline: 0;
  padding: .8rem 2rem;
  color: get-color(white);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 4px;

  @media (min-width: get-breakpoint(medium)) {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  &--flat {
    padding: 0;
  }

  &--wide {
    padding-left: 2.5rem;
    padding-right: 2.5rem;

    @media (min-width: get-breakpoint(medium)) {
      padding-left: 3rem;
      padding-right: 3rem;
    }
  }

  &--expanded {
    width: 100%;
  }

  &--primary {
    background-color: get-color(primary);
  }

  &--secondary {
    background-color: get-color(secondary);
  }
}

I w sytuacji, gdy na jednej podstronie potrzebuje czegoś innego to dodaje kolejny modyfikator. Poza tym tak jak @Mariusz08 napisał - powinien być ten sam szablon na podstronach, mniej więcej zachowane te same odstępy, te same rozmiary itd.

2	komentarz 8 lipca 2018 przez pablop76 VIP (123,180 p.) Odpiwiedź już padła Jeśli chcesz, żeby mimo wszystko na jednej podstronie wyglądał inaczej to po prostu potrzebujesz innej klasy. -Noemi

1	komentarz 8 lipca 2018 przez Comandeer Guru (602,340 p.) ↑ lub modyfikatora, jeśli myślimy BEM-em.

komentarz 8 lipca 2018 przez Justyna Obywatel (1,210 p.)

Ok dzięki, a primary to parametr ? Czy jest gdzieś taki poradnik by się nauczyć tworzyć style w ten sposób w jaki zrobiłaś ten button ?

komentarz 8 lipca 2018 przez Comandeer Guru (602,340 p.)

BEM: https://www.smashingmagazine.com/2018/06/bem-for-beginners/

komentarz 8 lipca 2018 przez imklau Nałogowiec (42,090 p.)

jeśli chodzi o "--primary" to jest właśnie modyfikator z BEMa, o którym już wcześniej wspomniałam i naprawdę polecam :)

a jeśli chodzi o "get-color(primary)" to po prostu funkcja która zwraca mi wartość z:

$colors: (
  primary: #00264d,
  primary-light: #7e96ad,
  secondary: #ec4f2d,
  secondary-dark: #cb4123,
  text: #737373,
  black: #434343,
);

co zdefiniowałam sobie w pliku "_variables.scss"

odpowiedź 8 lipca 2018 przez Mariusz08 Maniak (62,300 p.)

To czy istnieje taka zasada, że tworzone klasy na danej podstronie nie możemy użyć na innych?

Taka zasada nie istnieje (z tego co mi wiadomo)

No bo nawiązuje do tego, że chcąc kiedyś zmodyfikować taka klasę, nie będziemy mieli pewności czy nie zepsuje się styl na jakiejś z podstron.

Ale zauważ, że na każdej z podstron powinieneś mieć ten sam szablon (aby użytkownik wiedział, że jest na tej stronie, a nie na jakiejś innej) i jeśli chcesz zmienić coś na jednej, to powinieneś zmienić to na drugiej.