Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [css] Jak nazywac poszczególne klasy i indexy elementów?
luis2luis
post 3.03.2021, 12:57:15
Post #1





Grupa: Zarejestrowani
Postów: 190
Pomógł: 0
Dołączył: 25.11.2015

Ostrzeżenie: (0%)
-----


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:
  1. #footer_container { } //trzyma cały element na cala szerokosc strony
  2. #footer { } //docelowy div z zawartoscia
  3. .footer_col { } //dla wszystkich kolumn
  4. #footer_col_1 { } //poszczegolne kolumny
  5. #footer_col_2 { }
  6. #footer_col_3 { }
  7. #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
Go to the top of the page
+Quote Post
viking
post 3.03.2021, 13:03:31
Post #2





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Dalej najlepiej chyba stosować BEM. Zwłaszcza jak jeszcze dołączysz SASS czy inne pre/post procesory.


--------------------
Go to the top of the page
+Quote Post
LowiczakPL
post 3.03.2021, 14:33:41
Post #3





Grupa: Zarejestrowani
Postów: 531
Pomógł: 55
Dołączył: 3.01.2016
Skąd: Łowicz

Ostrzeżenie: (0%)
-----


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ą

  1. items:nth-child(2) {
  2. color: black;
  3. }


: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-namin...g-35cea737d849/

https://en.bem.info/methodology/naming-convention/

https://www.w3schools.com/cssref/css_selectors.asp


http://getbem.com/naming/

Ten post edytował LowiczakPL 3.03.2021, 14:28:53


--------------------
Szukam zleceń Symfony, Laravel, Back-End, Front-End, PHP, MySQL ...
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 20:44