Czy mogę tego używać?

Question

Witam forumowiczów!

Więc teraz chciałem się tylko dowiedzieć jednej rzeczy. A mianowicie:

Z racji że używanie znaczników <center></center> jest przestarzałe chciałbym wiedzieć czy aby wyśrodkować jeden element w html mogę użyć <div style="text-align: center"></div>

Answer 1

Móc technicznie możesz, ale od tego są style w arkuszach CSS. Rozdziel sobie wyraźnie semantykę czyli HTML i stylowanie czyli CSS.

Tworząc takie style inline bardzo trudno je potem nadpisać jeśli zajdzie taka potrzeba i masz bałagan w kodzie.

Generalnie polecam zrobić tak:

HTML - semantyka, czyli np. robisz element <p>Tekst</p>

CSS - wygląd, np. poprzez dodanie do tego <p> klasy css

JS - interakcja, wymiana danych itp.

To tak bardzo ogólnie, ale na początek powinno wystarczyć.

Comments

@Comandeer a czy jeżeli stylizuję po id to muszę to zmieniać w tym layoucie? Ponieważ mam już wszystko ostylizowane po id i teraz jeżeli bym chciał to zmienić na klasy wszystko bym musiał robić od początku 

---

Jeżeli jesteś na Notepad++, to naciśnij ctrl+H i dalej w "find what" wpisz "#", a w "replace with", to ".", później naciśnij "replace all". Dalej wpisz (1. pole) "id", (2. pole) "class" i znów "replace all" i tyle.

Oczywiście bez cudzysłowów wpisz te znaki.

---

Ale wtedy się zmienia to trochę i wygląda inaczej niż przy id

---

@Hiskiel poczytaj o metodologiach typu BEM.

@Layoutowiec nie ma prawa wyglądać inaczej – chyba że jest skopana specyficzność.

---

mam już wszystko ostylizowane po id i teraz jeżeli bym chciał to zmienić na klasy wszystko bym musiał robić od początku 

Refaktoryzacja kodu czasem może zająć więcej czasu niż napisanie pierwotnej wersji :) A jeśli apka nie ma dobrych testów to już w ogóle... ale tego też trzeba się nauczyć... więc może akurat masz dobrą ku temu okazję :)

Answer 2

Mozesz, ale nie jest to uznawane za dobra praktyke. Chyba ze tworzysz w np React.js.

Comments

a co ma do tego React bo niezbyt rozumiem? W React również style tworzysz oddzielnie po za HTML, albo jako cssinjs albo w osobnych plikach css i potem odpowiednio obrabiasz webpackiem itp. ale i tak nie zaleca się pracować ze stylami inline.

---

Chodzilo mi o to ze tworzac komponent czasem latwiej zapanowac nad cssem dodajac np background-color bezposrednio na elemencie, zamiast dodawac klase, ktora trzeba pozniej zmieniac w css. Zalezy od sytuacji

---

Różne są szkoły, ja obecnie pracuję sporo w Angular 5/6 i powiem Ci, że nawet w swoich własnych projektach zawsze stosuję zasadę plik widoku, plik scss i kontroler js. Nawet, jeśli w widoku miałbym tylko znacznik <p>{{coś tam z @Input}}</p> i w css ostylowałbym go po tagu czy w jakikolwiek inny sposób.

Ale to moje założenia, które gwarantują mi to, że zawsze mam jeden styl, jeden schemat tworzenia każdego komponentu i nie martwię się, że za chwile komponent może się nieco rozrosnąć i zacznie się robić bałagan.

Jedyne odstępstwo od tego to gdy potrzebuję dodawać dynamicznie background-image z jakimś url np. ustawianym w iteracji dyrektywy *ngFor itp. Ale to też tylko dla ustawień url, pozostałe style dla background robię już w CSS.

Jak pisałem, kwestia wyboru i własnego podejścia, ale przede wszystkim warto trzymać się w całym projekcie jednego stylu.

---

ale przede wszystkim warto trzymać się w całym projekcie jednego stylu.

Amen

Answer 3

Tworzysz klasę .center-block{ display: block; margin: 0 auto;} i .center-text{display: inline-block; text-align: center} i dodajesz jak należy tam gdzie potrzeba.