Deweloperzy często mają problem z nazewnictwem klas i identyfikatorów CSS. Postępuj zgodnie z tymi najlepszymi praktykami w celu efektywnego nazewnictwa.
Konwencje nazewnictwa klas i identyfikatorów CSS odgrywają istotną rolę w zrozumieniu i utrzymaniu kodu w projekcie JavaScript. Użyte nazwy mogą zwiększyć przejrzystość, możliwość ponownego użycia i elastyczność bazy kodu. Postępowanie zgodnie z najlepszymi praktykami jest ważne podczas nazywania klas CSS i identyfikatorów w projekcie JavaScript.
1. Użyj nazw semantycznych
Kluczowe jest wybranie nazw, które dokładnie wyjaśniają funkcję lub przeznaczenie elementu. Nazwy semantyczne zapewniają znaczący kontekst i ułatwiają zrozumienie kodu.
Na przykład, zamiast używać tradycyjnych nazw, takich jak skrzynka Lub uchwyt, spróbuj użyć nazw takich jak nagłówek Lub Pasek boczny które odzwierciedlają specyficzną rolę komponentu.
/* Przykład nazw semantycznych */
.nagłówek {}
.Pasek boczny {}
2. Używaj spójnych konwencji nazewnictwa
Spójność jest kluczowa podczas nazewnictwa klas CSS i identyfikatorów. Używanie tego samego standardu nazewnictwa we wszystkich obszarach upraszcza utrzymanie struktury bazy kodu.
Konwencje nazewnictwa BEM (Modyfikator elementów blokowych) i OOCSS (Object-Oriented CSS) to najbardziej preferowane konwencje nazewnictwa.
Możesz użyć konwencji nazewnictwa OOCSS, aby napisać kod CSS, który jest modułowy, łatwy w zarządzaniu i skalowalny. Oto ilustracja tego, jak możesz stworzyć menu nawigacji za pomocą OOCSS:
/* Struktura */.nawigacja {
wyświetlacz: przewód;
styl listy: nic;
}.nav__element {
prawy margines: 1Rem;
}.nav__link {
dekoracja tekstu: nic;
kolor: #333;
}/* Wygląd */
.nav__link:unosić się {
dekoracja tekstu: podkreślać;
}
W tym przykładzie masz dwie odrębne części kodu dla menu nawigacyjnego, jedną dla struktury i jedną dla wyglądu. Część dotycząca wyglądu opisuje kolory i inne style, które nadają jej atrakcyjny wygląd, podczas gdy sekcja dotycząca struktury wyjaśnia, w jaki sposób i gdzie pozycje menu zostaną umieszczone.
3. Unikaj przestrzeni nazw
W CSS przestrzenie nazw są strukturami semantycznymi, które umożliwiają podanie prefiksu przestrzeni nazw dla ich wyboru. Aby rozróżnić moduły, biblioteki lub inne części bazy kodu, które mogą mieć sprzeczne nazwy klas, używany jest przedrostek przestrzeni nazw.
Ta funkcja jest przydatna, jednak może powodować problemy ze specyficznością i łatwością konserwacji.
Jedną z największych wad przestrzeni nazw jest trudność w obsłudze specyficzności selektora. Prefiks przestrzeni nazw może sprawić, że wybór będzie bardziej szczegółowy, co utrudni zastąpienie stylów w przyszłości.
Prowadzi to do rozdęcia kodu CSS, co jest mylące i trudne do utrzymania w czasie.
Weź na przykład:
/* Z przestrzenią nazw */.mój-moduł.treść {
kolor tła: niebieski;
}/* Bez przestrzeni nazw */
.nagłówek modułu {
kolor tła: czerwony;
}zawartość modułu {
kolor tła: żółty;
}
Prefiks przestrzeni nazw .mój-moduł I .treść oba są używane w głównym bloku kodu. W rezultacie wybór staje się bardziej precyzyjny, co sprawia, że nadpisywanie przyszłego stylu jest trudniejsze.
W drugiej części przestrzeń nazw zostaje zastąpiona opisowymi nazwami klas .nagłówek modułu I zawartość modułu. Oprócz ułatwienia zrozumienia kodu, ułatwia to również jego konserwację.
Korzystanie z przestrzeni nazw powoduje niepotrzebną złożoność programu, zwłaszcza gdy wiele osób pracuje nad różnymi częściami tego samego projektu. Możecie mieć trudności ze zrozumieniem i wzajemną zmianą kodu, ponieważ różne zespoły mogą używać różnych prefiksów przestrzeni nazw.
Używaj opisowych nazw klas, na przykład:
.nagłówek {kolor tła: czerwony;
}
.treść {
kolor tła: żółty;
}
Używając opisowych nazw klas, możesz zrezygnować z przestrzeni nazw i zachować dobrze ustrukturyzowaną i łatwą do zrozumienia bazę kodu.
4. Unikaj globalnych nazw
W projektach JavaScript unikanie globalnych nazw klas i identyfikatorów CSS ma kluczowe znaczenie. Nazwy globalne komplikują utrzymanie kodu i zwiększają ryzyko nazewnictwa. Aby zapewnić bardziej trwałą i skalowalną bazę kodu, dobrze jest używać bardziej precyzyjnych nazw w zakresie komponentu lub modułu.
Rozważ poniższy przykład:
Niepoprawne użycie nazw globalnych<dzklasa="pojemnik">
<dzklasa="Pasek boczny">Treść tutaj
dz>
dz>
Ogólne nazwy klas Pasek boczny I pojemnik w powyższym przykładzie są podatne na konflikty z innymi arkuszami stylów lub kodem JavaScript wewnątrz projektu. Na przykład, jeśli dwa arkusze stylów określają to samo .Pasek boczny class, jeden z niebieskim tłem, a drugi z czerwonym tłem, kolor paska bocznego będzie zależał od ostatniego załadowania arkusza stylów. Mogą z tego wyniknąć nieoczekiwane i nieprzewidywalne rezultaty.
Lepiej jest używać bardziej precyzyjnych nazw, które obejmują odpowiedni komponent lub moduł, aby zminimalizować te problemy.
Spójrz na ulepszoną wersję.
Ulepszone o konkretne nazwy<dzklasa="nagłówek__kontener">
<dzklasa=„pasek boczny__zawartość”>Treść tutaj
dz>
dz>
W zmienionej wersji nazwy klas nagłówek__kontener I pasek boczny__zawartość wyjaśnij, do czego służy każdy element i co robi.
Używanie określonych nazw zmniejsza ryzyko konfliktów nazewnictwa i gwarantuje, że style wpływają tylko na oczekiwane komponenty wewnątrz odpowiednich komponentów lub modułów.
5. Użyj konwencji nazewnictwa BEM
Konwencja nazewnictwa BEM (Block Element Modifier) jest popularna przy nazewnictwie klas CSS i identyfikatorów w projektach JavaScript. BEM zapewnia ustrukturyzowany i modułowy sposób nazewnictwa elementów, zachęca do ponownego użycia i ułatwia utrzymanie baz kodu.
Konwencje BEM składają się z bloków, elementów i modyfikatorów. Element wysokiego poziomu lub autonomiczny komponent nazywany jest blokiem. Elementy to części składowe bloku, które zależą od kontekstu bloku. Modyfikatory mogą zmieniać wygląd lub zachowanie bloku lub elementu.
Oto przykład użycia konwencji nazewnictwa BEM:
/* Przykład konwencji nazewnictwa BEM *//* Blok */
.nagłówek {}/* Element bloku */
.header__logo {}
.nagłówek__menu {}
/* Modyfikator elementu */
.header__menu--aktywne {}
Powyższa ilustracja przedstawia a nagłówek blok z a logo i menu element. The menu przedmiot otrzymuje aktywny zmienić, aby pokazać, że stała się aktywna.
Możesz szybko zidentyfikować podstawowe komponenty i połączenia między różnymi częściami, dzięki czemu struktura i hierarchia bazy kodu są bardziej przejrzyste.
6. Użyj przedrostków lub sufiksów
Możesz dodać dodatkowe ustawienia do nazw klas CSS i identyfikatorów, dodając do nich prefiks lub postfiks, szczególnie w przypadku większych projektów. Możesz użyć przedrostka np js- aby wskazać, że klasa lub identyfikator oferuje możliwości JavaScript. Konwencje nazewnictwa JavaScript w połączeniu z tymi konwencjami nazewnictwa CSS może zaoszczędzić czas i wysiłek na dłuższą metę.
HTML z przedrostkiem JavaScript<przyciskklasa="przełączanie js">Przełącznikprzycisk>
<dzID=„js-modal”>Modalnydz>
7. Używaj nazw opisowych
Dzięki opisowym nazwom możesz lepiej zrozumieć przeznaczenie, funkcję lub zawartość elementu.
Rozważ poniższy przykład:
/* Nazwy nieopisowe */.niebieskie pudełko {
/* Style tutaj */
}
A {
/* Style tutaj */
}
Nazwy klas niebieskie pudełko I A w powyższym przykładzie nie przekazują żadnych istotnych informacji na temat komponentów, do których się odnoszą. Brak opisowych nazw może utrudniać szybkie zrozumienie celów lub ról niektórych komponentów w programie.
Używaj opisowych nazw, które dokładnie wyjaśniają rolę elementu poprawić czytelność i łatwość konserwacji kodu.
Rozważ ulepszony przykład poniżej:
/* Nazwy opisowe */.karta-produktu {
/* Style tutaj */
}
.link-nawigacyjny {
/* Style tutaj */
}
Nazwy klas karta produktu I łącze nawigacyjne w zaktualizowanej wersji sprawiają, że oczywiste jest, do jakiego celu służy każdy element. Dzięki tym opisowym nazwom eksplorowanie i edytowanie kodu będzie prostsze.
Używanie nazw opisowych przynosi korzyści obecnym i potencjalnym przyszłym programistom pracującym nad bazą kodu. Wracając do kodu po pewnym czasie, możesz łatwo zrozumieć strukturę i działanie poszczególnych elementów.
8. Używaj krótkich i zwięzłych nazw
Chociaż charakterystyczne nazwy są niezbędne, ważne jest również, aby były zwięzłe. Długie nazwy klas i identyfikatorów mogą sprawić, że kod będzie trudniejszy do odczytania i utrzymania. Postaraj się znaleźć równowagę między byciem zwięzłym a szczegółowym. Ponadto rozważ użycie dobrze znanych akronimów lub skrótów w kontekście projektu.
Rozważ przypadek, w którym chcesz użyć CSS do dostosowania menu nawigacyjnego w swojej witrynie. Możesz użyć krótszych, bardziej szczegółowych nazw, takich jak element nawigacyjny Lub łącze nawigacyjne zamiast długich np interfejs nawigacji Lub główny link nawigacyjny.
.nav-item {
/* Style elementów menu nawigacji */
}
.nav-link {
/* Style linków nawigacyjnych */
}
Używanie akronimów lub popularnych skrótów w kontekście projektu, np nawigacja Do nawigacja, może znacznie ułatwić zrozumienie kodu innym programistom.
Najlepsze praktyki dotyczące nazewnictwa klas CSS i identyfikatorów
W projekcie JavaScript kluczowe znaczenie ma odpowiednie nazwanie klas CSS i identyfikatorów w celu zapewnienia czytelności kodu, konserwacji i skalowalności.
Możesz uprościć arkusze stylów i poprawić jakość kodu. Poświęcenie czasu na ustalenie dobrych konwencji nazewnictwa opłaci się na dłuższą metę, ułatwiając Tobie i innym zrozumienie i utrzymanie bazy kodu.
