Prawidłowe zapisanie znaczniku

Question

Witam,

może na wstępnie zaznaczę, że aktualnie uczę się przejrzystego, dobrego kodu, zgodnego ze aktualnymi standardami.

1. Powinno się używać:

a) <span style="color: red (...)">Treść</span>

b) <span class="font-red">Treść</span>    CSS: font-red { color: red; }

2. Kiedy powinno używać się <strong> , a kiedy <b>?

3. Czy powinno używać się w html <center> czy jednak CSS: text-align: center;?

4. Jeżeli strona jest w języku polskim, to należy - nazwa.html pisać tak jak jego wartość w nawigacji np. zakładka o nazwie o nas, to powinna nazywa się about-us.html, czy o-nas.html, czy jednak to nie ma znaczenia ( tak wiem, nie że nazwy class i id w j. ang)

5. Jakieś wasze tipy podobne do tych, wymienionych na górze

Z góry dziękuję za wszystkie odpowiedzi pod tym postem.

Pozdrawiam

Comments

Nigdy CSS łącznie z HTML w formie style="". Po pierwsze primo łączysz dwie kwestie - semantykę i wygląd. Znacznie łatwiej trzymać wszystkie reguły wizualne w oddzielnym pliku CSS (lub plikach komponentach, ale do tego dojdziesz w trakcie nauki).

A po drugie styl przypisany bezpośrednio do elementu bardzo trudno nadpisać... powiedziałbym nawet, że to niewykonalne, chyba, że stworzysz CCS'owego potworka...

To samo dotyczy znaczników typu <center>. Unikaj ich! Zamiast tego stosuj stylowanie w plikach CSS. Poczytaj sobie również o RWD i tematy takie jak css flex czy @media.

Answer 1

1. Nie używamy w HTML stylów inline, od tego mamy osobny plik CSS ;)
Dodatkowo klasa font-red nie byłaby poprawna, bo nie powinniśmy podawać tego, jak wygląda dany element tylko raczej czym jest. Mógłbyś sobie poczytać o metodologiach CSS, np w BEM można dodawać modyfikatory i do jednego elementu mógłbyś mieć dwie klasy button button--cancel i jakiś inny kolor dać sobie w .button--cancel
Polecam sobie poczytać:

• OOCSS
• SMACSS
• BEM
• Atomic Design

2. <b> to jest po prostu dodatkowy styl dla elementu i właściwie chyba już się rzadko tego używa. Równie dobrze mógłbyś dać font-weight: bold i dostaniesz ten sam efekt ;) <strong> za to ma chyba głównie znaczenie dla osób niewidomych lub słabowidzących bo czytniki inaczej czytają, to co jest umieszczone w tym znaczniku. stackoverflow

4. <center> został wycofany z użycia mdn

Answer 2

3. CSS
4. Możesz po polsku (bez polskich znaków oczywiście), ale i tak radziłbym wszystko po angielsku, bo to podstawa  dzisiejszym świecie.
5. https://github.com/bendc/frontend-guidelines

Answer 3

ad. 1) Ani jednego, ani drugiego. Zamiast myśleć, jak dana rzecz ma wyglądać, myśl raczej, co ma przekazywać. Jeśli to jest jakaś uwaga, to bardziej pasuje klasa .warning. Wówczas, gdy zmieni się design, nie zostaniesz nagle z klasą .font-red, która będzie w tym momencie oznaczać biały tekst w żółtej ramce.

ad. 2) b używasz, gdy chcesz w wizualny sposób oznaczyć jakiś fragment tekstu – ot,tak wyróżnić, żeby było wiadomo, że to nie jest normalny tekst, a np. słowo kluczowe czy nazwa działu w menu. strong używa się natomiast do oznaczania tych fragmentów, które są ważne, np.

Nie zapomnij, by <strong>wyłączyć prąd</strong> przed wymianą żarówki!

ad. 3. Tylko CSS.

ad. 4) URL jest częścią UI. Jeśli strona jest po polsku, adresy również powinny.

ad. 5) http://kot-zrodlowy.pl/goscinne/programowanie/2017/09/11/najczeste-bledy-poczatkujacych-i-nie-tylko-webdeveloperow.html