Kolejność wpisywania właściwości styli CSS

pytanie zadane 22 kwietnia 2015 w HTML i CSS przez Ithrasil Obywatel (1,820 p.)

Tak jak w temacie, gdy wpisujemy jakieś właściwości w stylach CSS, czy obowiązuje jakaś kolejność? np.

Div {
       color: green;
       height: 500px;
       background-color: blue;
}

będzie tak samo poprawne, jak

Div {
      background-color: blue;
      color: green;
      height: 500px;
}

Ciekawi mnie, czy niektóre właściwości mają większy priorytet od innych i muszą być wyżej(w kodzie) nad pozostałymi lub odwrotnie. Pozdrawiam!

4 odpowiedzi

odpowiedź 22 kwietnia 2015 przez Wilczu Mądrala (5,190 p.)
wybrane 22 kwietnia 2015 przez Ithrasil

odpowiedź 22 kwietnia 2015 przez niezalogowany

odpowiedź 22 kwietnia 2015 przez nefil1m Stary wyjadacz (10,690 p.)

Właściwie to jest kolejność: z góry na dół. I jest to trochę zdradliwe czasami. Np.:

.div1 {
  margin-left: 20px;
  margin: 0 0 0 0;
}

.div2 {
  margin: 0 0 0 0;
  margin-left: 20px;
}

W takim przypadku .div1 nie będzie miał marginesów a .div2 będzie miał 20px z lewej.

Jeśli chodzi o czytelność to stosuje się kolejność zazwyczaj taką -> pozycja i rozmiar elementu -> marginesy, paddingi -> font, bg -> reszta.

komentarz 22 kwietnia 2015 przez nefil1m Stary wyjadacz (10,690 p.)

Tak samo jak sobie dasz @media na początku pliku to je później nadpiszesz resztą styli (jeśli się pokrywają)

odpowiedź 22 kwietnia 2015 przez testerius Pasjonat (23,960 p.)

Nie ma żadnej zasady odnośnie kolejności właściwości, możesz wpisywać je dowolnie tak jak ci się podoba. Owszem istnieją pewne zasady stworzone przez różne osoby, ale nie ma konieczności dostosowywania się do tych reguł czy sugestii, choć część z nich może okazać się przydatna.

komentarz 23 kwietnia 2015 przez Ithrasil Obywatel (1,820 p.)

Właśnie chodziło o te zasady i chodziło, bo czasem można się pogubić, gdy w każdej regule stylów właściwości mają inną kolejność. Taki syf w kodzie się zaczyna robić. Masz może link do tego jak wyglądają takie zasady? Jakiś opis albo coś :D

komentarz 23 kwietnia 2015 przez testerius Pasjonat (23,960 p.)

No ustal sam sobie co chcesz jak wpisywać, czy np. najpierw margin, padding, potem font, background etc.

Ale jeśli już to masz tutaj: https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/ oraz http://codeguide.co/