Napisany przez: luis2luis 3.03.2021, 12:57:15
Witam.
Przez spory okres czasu używałem polskie nazwy indeksów, i klas w css. Dojrzałem do tego, aby używać jednak angielskich nazw tych elementów.
Proszę o informacje, czy znacie jakieś kursy tutoriale, mogą być po angielsku w których są pokazane obecne standardy nazewnictwa elementów dla css?
Np mam stopke strony element element footer.
Np:
#footer_container { } //trzyma cały element na cala szerokosc strony
#footer { } //docelowy div z zawartoscia
.footer_col { } //dla wszystkich kolumn
#footer_col_1 { } //poszczegolne kolumny
#footer_col_2 { }
#footer_col_3 { }
#footer_col_4 { }
...
mam problem jak później w takim którymś zagnieżdżeniu dawać indeksy dla ikonek, dla paragrafów itd. Wchodzi tutaj troche
Napisany przez: viking 3.03.2021, 13:03:31
Dalej najlepiej chyba stosować BEM. Zwłaszcza jak jeszcze dołączysz SASS czy inne pre/post procesory.
Napisany przez: LowiczakPL 3.03.2021, 14:33:41
Używanie indeksów przydaje się przy wykorzystywaniu JavaScript w innym przypadku jak dla mnie jest zbędne.
jeśli chcesz stylować jakieś elementy to nie musisz nadawać im nazw w stylu 1,2,3, 500, zrób jeden selektor items
a następnie dowolny z nich możesz stylować za pomocą
items:nth-child(2) {
color: black;
}
:nth-child( <nth> [ of <complex-selector-list> ]? )where <nth> = <an-plus-b> | even | odd<complex-selector-list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!<combinator> = '>' | '+' | '~' | [ '||' ]where <type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [ <ident-token> | '*' ]? | <id-selector> = <hash-token><class-selector> = '.' <ident-token><attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where <attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='<attr-modifier> = i | s
https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/
https://en.bem.info/methodology/naming-convention/
https://www.w3schools.com/cssref/css_selectors.asp
http://getbem.com/naming/