Dwie strony jeden plik CSS

pytanie zadane 11 lipca 2020 w HTML i CSS przez gmcode Gaduła (3,120 p.)

Posiadam jedna stronę glowna i podstronę, style znajdują sie w jednym pliku css

Jak powinienem napisać poprawnie podstronę aby moje style nie przeskakiwały ze strony głównej. Czy wystarczy nadać stronie głównej i podstronie classy i sie do nich odwołać czy to rozwiązuje problem ?

komentarz 11 lipca 2020 przez Comandeer Guru (601,550 p.)

Co to znaczy "przeskakiwały?

komentarz 11 lipca 2020 przez Tomek Sochacki Ekspert (227,510 p.)

a dlaczego nie są to osobne bundle css ze stylami tylko dla konkretnej strony? Jakie jest uzasadnienie aby wrzucać wszystkie style od razu mimo, że user może czasami w ogóle nie wykorzystać jakiegoś procenta z nich jeśli nie wejdzie na inne podstrony?

komentarz 11 lipca 2020 przez gmcode Gaduła (3,120 p.)

@Comandeer, podstrona odziedzicza style ze strony głównej , ponieważ style sa w jednym pliku.

Np body strony głównej przerzuca te same wartości na body podstrony. Żeby to naprawić wystarczy nadać klasy czy utworzyć dwa pliki CSS ?.

Poniżej repozytorium

https://github.com/gmzych/Project_Web_Zaliczenie

2 odpowiedzi

odpowiedź 11 lipca 2020 przez Comandeer Guru (601,550 p.)
wybrane 11 lipca 2020 przez gmcode

Najlepsza

Najprostszym rozwiązaniem faktycznie byłoby dodanie klasy do html i na podstawie tego stylowanie.

Niemniej ja przemyślałbym cały sposób stylowania. Dobrą praktyką jest niestylowanie bezpośrednio po elementach, bo tworzy to właśnie takie problemy. Najlepiej po prostu nadawać klasy poszczególnym elementom i na podstawie tych klas stylować. Wówczas nic się nie będzie nakładać, bo style będą przypisane do różnych klas, a nie np. do nav, który wystąpi na każdej stronie.

odpowiedź 11 lipca 2020 przez CubeStorm Pasjonat (15,020 p.)

Opiszę Ci sposób w jaki ja to robię z pomocą SCSS'a, może się zainspirujesz Jeśli do tej pory nie korzystałeś z niego to serdecznie polecam, nieźle ułatwia pracę.

Każda podstrona ma podłączony global.css, w którym jest, np. body lub scrollbar - ogólnie takie elementy, które występują na każdej podstronie. Teraz chcę zacząć stylować index.html, więc tworzę index.scss, w którym nie piszę css'a (ewentualnie parę linijek). Załóżmy, że w index.html ma być newsletter. Tworzę kolejny plik o nazwie _newsletter.scss i dołączam go do index.scss. Tak działam z każdą większą sekcją na stronie.

Po przeczytaniu tego opisu sposób może wydawać się dość chaotyczny, ale bardzo ułatwia pracę między innymi przez to, że kod staje się przejrzysty dla programisty. Każda sekcja na stronie ma swoje miejsce w repozytorium, dzięki czemu np. gdy taki newsletter chcesz sobie dodać jeszcze do innej podstrony to wystarczy, że tylko zaimportujesz od niego style.