Jump to content
Sign in to follow this  
-n3veR

7 złych praktyk CSS, których musisz unikać

Recommended Posts

W tym artykule poznasz 7 złych praktyk, których musisz unikać podczas pisania stylów CSS. Obok złych praktyk umieszczone są również ich przeciwieństwa - dobre praktyki. Dzięki temu możesz natychmiast poprawić jakość Twojego kodu.

  1. Nadużywanie deklaracji !important

  2. Opisywanie stylów w nazwach selektorów

  3. Powiązanie selektorów ze strukturą HTML

  4. Pisanie długich selektorów

  5. Ignorowanie kolejności elementów HTML

  6. Ignorowanie specyficzności w kolejności selektorów

  7. Używanie stylów inline

 

Źródło i więcej informacji: https://devcorner.pl/zle-praktyki-css-ktorych-musisz-unikac/

  • Like 6

Share this post


Link to post

Szkoda, że opisał to wszystko tak krótko, bo jednak nic nowego w tym nie ma. Od kilku lat się powtarza ciągle to samo i nie wiem co za cel jest w tym, żeby "nadpisywać" innych. Ostatni punkt to nie tak do końca zgodny jestem, bo jak podał autor do emaili trzeba tak stosować, a po drugie niektóre style po prostu też można wstawić inline, żeby nie blokować renderowania strony + było mniej zapytań do serwera. Widziałem strony, gdzie jest praktycznie każdy komponent/moduł rozpisany na osobny CSS...

 

Ogólnie spoko, że to wrzuciłeś. Komuś na pewno się przyda.

Share this post


Link to post

Odnośnie samego stylowania, to style inline są niedopuszczalne. Wyjatkiem są maile - o czym zostało wspomniane - oraz czasami potrzeba ich także użyć przy manipulacji DOMem dokumentu.

Share this post


Link to post

Ale tam jest informacja o zewnętrznych plikach CSS - poza serwerem strony, na którym jesteś. I Google chodziło o umieszczenie takiego "czegoś" (to nie jest styl inline):

<style>
  .blue{color:blue;}
</style>

w głowie strony, a nie takiego (to jest inline):

<div style="color:blue"></div>

Poza tym, podzielenie CSSa na te dotyczące modułów i te dotyczące samej strony, to bardzo praktyczny pomysł, ale raczej wykorzystuje się to przy pracy z preprocesorami.

  • Like 1

Share this post


Link to post
11 godzin temu, Salva napisał:

 


<div style="color:blue"></div>

Widziałem też przykłady z inline.

11 godzin temu, Salva napisał:

Poza tym, podzielenie CSSa na te dotyczące modułów i te dotyczące samej strony, to bardzo praktyczny pomysł, ale raczej wykorzystuje się to przy pracy z preprocesorami.

Z preprocesorami dzielisz sobie na kilka modułów, ale w końcowym efekcie i tak na FTP leci jeden plik CSS, a nie podzielone na 100 różnych.

Share this post


Link to post

No tak, plik wynikowy masz jeden. Nigdzie nie napisałem, ze powstaje taka sama ilość. Natomiast to o czym pisałeś - dzielenie na osobne CSSy, to też logiczne i praktyczne działanie. Tylko trzeba się liczyć z tym, że załadowanie kilkudziesięciu stylów jest wolniejsze niż załadowanie jednego, większego.

 

Dodatkowo na pewno powstanie nadpisanie, co generuje kolejny problem.

  • Like 2

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×
×
  • Create New...