Metoda pisania HTML i CSS

Question

Cześć,

Który sposób jest wg. Was lepszy?

1. Napisanie całości HTML i dopiero rozpoczęcie zabawy z CSS

2. Dodawanie CSS do każdego nowego elementu HTML, czyli np: po napisaniu menu w HTML od razu go stylujemy

Answer 1

Ja preferuje opcję numer 2.

Ale staraj się przy tym nie myśleć o stronie jako o całości, lecz o pojedynczych komponentach. Na przykład menu, jakiś box z artykułem, jakiś box ze zdjęciem itp. itd. Myśl o komponencie w taki sposób, abyś mógł go wykorzystać np. w innym projekcie.

Oznacza to np. rezygnację z popularnych kiedyś resetów CSS czy zbyt mocnym uzależnianiu elementów od siebie.

Jednocześnie staraj się tak pisać CSS aby możliwie uniezależnić się od struktury html. To znaczy zamiast:

// html

<ul>
  <li>
    <a>xxx<.a<
  </li>
</ul>

// css
ul {}
ul > li {}
ul > li > a {}

styluj po klasach:

// html

<ul class="list">
  <li class="list__item">
    <a class="list__item__link">xxx<.a<
  </li>
</ul>

// css
.list {
  &__item {
    &__link {}
  }
}

W drugim przypadku dałem w css składnię SCSS ale to tak dla ciekawostki :)

Kod może nie najlepszy pod kątem BEM ale chodzi mi o zasadę. W drugim przypadku gdy np. zmienimy ul na ol to dalej css są ok i nic się nie rozwala.

Stylowanie po tagach osobiście toleruję tylko w przypadku pełnej enkapsulacji komponentu, np. gdy piszę w Angular ale i to nie zawsze.

Comments

W sumie warto wspomnieć ze BEM wspiera najważniejsze praktyki. Czyli wszystko co zostało przez Tomka wymienione. (podział na komponenty oraz stylowanie tylko i wyłącznie po klasach) Z całego serca polecam naukę BEMa. Aby przedstawiony kod dostosować do metodologi BEM wystarczy zmienić klase list__item__link na list__link.

 

---

Dzięki! To na pewno ułatwi mi sposób działania :)

---

Nie zapomnijcie, że w większości przypadków webdeveloper dostaje projekt od grafika, który ma przełożyć na htmla i cssa, więc wszystko jedno, jaka metoda. Choć ja osobiście preferuję metodę pierwszą. Pisząc cssa nie muszę myśleć o htmlu.

---

@shotokan,

z tymi makietami od grafików to racja, co prawda czasami dyskusyjne są makiety RWD ale to poboczny temat, ale przyznam szczerze, że jak dostaję makietę na jakiś fragment aplikacji, który składa się np. z 10-15 komponentów to niezbyt chciałoby mi się dla każdego komponentu najpierw robić logikę, potem html i kończyć css... łatwo się zagubić. Jedyne co to fakt, że czasami dane dla widoków przygotowuję sobie bardziej kompleksowo ale to też zależy od konkretnego przypadku.

Wydaje mi się jednak, że łatwiej zapanować nad aplikacją gdy robi się pojedynczo wszystkie komponenty ale to oczywiście subiektywne oceny, każdy robi jak mu wygodniej i póki wszystko trzyma się w ryzach to jest oki :)

Answer 2

Ja dzielę stronę na segmenty np. Nav/header i najpierw piszę strukturę w Html'u a potem to styluję.