Zazwyczaj unikałem takich praktyk programistycznych...
Ale teraz zauważyłem, że zacząłem tworzyć elementy o następujących id, po prostu dlatego że się spieszę i nie chce mi się wymyślać porządniejszych nazw:
#DYK {
...
}
#DYKDYK {
...
}
#DYKDYKDYK {
...
}
Brakuje jeszcze tylko jakiegoś <span id="dupa"> albo co...
Powinienem zacząć się bać?
zacznij pisać w scss, będziesz miał zagniezdżenia i nazwy same będą do głowy przychodziły
Ale teraz zauważyłem, że zacząłem tworzyć elementy o następujących id,
w ogóle stosowanie id do stylowania nie jest dobre (ponieważ id może być tylko jedno, unikalne, więc to ci może potem przeszkodzić, jak będziesz chciał dodać kolejny element tego samego typu). Lepiej byłoby robić to na klasach.
Id się czasem przydaje, ale bardziej do tego, żeby można było zidentyfikować element w JS (np. przez document.getElementById). Albo po to, żeby zrobić kotwicę:
<span id="dupa">
to daje ci kotwicę #dupa w adresie w okienku przeglądarki (example.com/#dupa)
@mr_jaro: z tymi radami na temat zagnieżdżania, to bym uważał. https://medium.com/@verpixelt/your-nesting-is-harmful-a1ffddaf7e43
@kmph staram się unikać pisania CSS, bo mam od tego specjalny design team, ale jak już muszę, albo robie coś prywatnie dla siebie, to często po prostu piszę style inline lub jeżeli akurat mi przychodzi do głowy nazwa klasy to ją jakoś nazywam, mniej lub bardziej sensownie, ale żeby mniej więcej ona oddawała to, co robi. Cczyli nie dupa, tylko na przyklad header, a jezeli juz header jest zajęty, to prefixuję nazwą kompinentu, np. search_header. Jak nie wiem do konca co to jeszcze za element, to na przyklad nazywam big_box albo coś, zawsze to lepsze niż dupa.. Chyba, że konsekwentnie nazywał jakieś kontenery dupa i się później w tym połapiesz przy refaktorze... to spoko ;)
Później po skończonej pracy następuje najważniejsza część, czyli jak juz mam jakiś prototyp komponentu, to refaktoruję i Tobie też to radzę. Jak już wiem jaką mam strukturę i jakie elementy i tak dalej, to łatwiej mi wykombinować jakąś sensowną nazwę klasy.
Najważniejsze, żebyś pamiętał o zmianie tych dupo-klas i robił to odpowiednio często, bo częste małe zmiany nie bolą, a poza tym jesteś jeszcze na świeżo, więc pamiętasz za co te d**y odpowiadają. Po tygodniu taka zmiana będzie bolesna, co może skutkować tym, że zostawisz takie dupo-klasy, a po miesiącu na myśl otworzenia pliku CSS dostaniesz nudności.
@Desu: ale to normalne że zagnieżdżasz, czas to pieniądz, pisząc w scss piszesz css 2x szybciej, fakt jest mniej zoptymalizowany ale czy dziś te kilka kb w ta lub w tamta ma znaczenie? bo jak dla mnie nie ma.
Skoro masz problem z nazywaniem klas i musisz pisać inline to znaczy, że jeszcze dużo ci brakuje. Ja nie pamiętam kiedy napisałem cokolwiek inline. Takich rzeczy się po prostu nie robi.
Głownie chodziło mi o to, że tworząc takie piramidy Twój CSS jest po 1 mniej reużywalny, trudniej go wydzielić jeżeli zajdzie taka potrzeba, a po drugie jest zależy od struktury dokumentu. Zmienisz coś w strukturze i już Ci się sypią style... przekonałem się na własnej skórze, bo też kiedyś tworzyłem takie zagnieżdżenia. Poza tym to zachęca do tego, żeby tworzyć mniej sensowne nazwy klas, albo w ogóle tego nie robić polegając na tagach i później powstaje sytuacja, gdy Twój element DOM przez przypadek wpada w dwie takie reguły.. zaczynają pojawiać się importanty, bo nie ma czasu itd.
Jeżeli chodzi o style inline, to tak jak pisałem jest to chwilowy zabieg pozwalający mi się skupić na wyglądzie. Zaraz po tym jak uzyskam to, co mniej więcej chciałem uzyskać, to biorę te inline'y i pakuję je do odpowiednich klas, usuwam duplikację itd (kod inline nigdy nie trafia do repo). Bardzo mi to przyspiesza pracę w porównaniu z myśleniem nad nazwą klasy zanim jeszcze napiszę linijkę CSS'a.
Z resztą to samo podejście czasami stosuję przy backendzie. Jak nie wiem jak nazwać klasa i co dokładnie będzie robiła, to nazywam ją Foo lub Bar i piszę kod. Później okazuje się, że jednak coś z tej klasy wydzielam, coś dokładam, jej odpowiedzialność się formuje i pod koniec takiego procesu mam zajebistą nazwę.
@Desu: nie miałem nigdy takich problemów o jakich piszesz. Mój sposób jest prosty, mam wydzielone style globalne i one zazwyczaj nie mają zagnieżdżeń, a obok tego są style na konkretny komponent (np input) które już zagnieżdżenia mają bo pracujesz w obrębie tego jednego komponentu, no i oczywiście style per page, gdzie wszystkie sa z góry ograniczone unikalnym id na tę podstronę, bo id do tego się właśnie dziś stosuje, więc jesli mi się coś sypnie to tylko w obrębie jednej podstrony i jednego pliku scss czyli coś normalnego no bo przecież grzebiesz na tej konkretnej podstronie.
To też jest wyjście, nawet można powiedzieć, że złoty środek czy zagnieżdżasz na tagi html, unikając nadmiarowych class, co powoduje więcej klepania niż to warte (sam robię podobnie) :)
Desu napisał(a):
usuwam duplikację
Może to znowu świadczy o moim braku doświadczenia... Ale jakkolwiek oczywiście nie lubię rozszalałej copypasty, to jednak fanatyczne usuwanie każdej duplikacji też mi jakoś nie podchodzi. Szczególnie (choć nie tylko) w CSS.
Ostatnio na przykład teoretycznie wprowadziłem duplikację. Mianowicie w dwóch, nawet powiązanych miejscach dałem zaokrąglone krawędzie, bo jakoś wydało mi się to bardziej estetyczne. Wobec czego w moim kodzie straszy:
#DYK {
border-radius: 10px;
}
#DYKDYK {
border-radius: 10px;
}
(pomińmy na razie litościwie to dupo-nazewnictwo, wiem że wymaga zmiany) Teoretycznie można powiedzieć: Duplikacja, źle, należy wydzielić do osobnej klasy i obu elementom tę klasę przypisać.
Bronię się: Tak teraz rzeczywiście oba bordery mają 10px zaokrąglenia, ale nie musi być tak, że zawsze oba będą miały po równo. Może za jakiś czas temu drugiemu jakiś inny border się da, wtedy będzie można od razu zmienić, a nie musieć się orientować i przebudowywać całą strukturę dziedziczenia/klasową, która przypuszczam stałaby się mocno skomplikowana, gdyby na całej stronie usuwać całą duplikację.
Co ważniejsze i bardziej prawdopodobne: Myślę, że gdyby rzeczywiście jakieś zmiany w tym fragmencie strony zostały wprowadzone, to raczej wszystkie 3 DYKi zostaną zaorane i od 0 wstawi się tam coś nowego. Wtedy są dwie możliwości: Albo usunęło się duplikację w tym konkretnym miejscu (i robota poszła na marne, bo i tak całość została zaorana); albo został przejrzany cały CSS, znaleziono że w zupełnie innym miejscu strony też jest zaokrąglenie o 10px (nawet nie pamiętam, czy jest), i wtedy nagle nie można tego fragmentu strony zaorać bez pozostawiania gdzie indziej nazbyt skomplikowanego kodu. (zaokrąglenie wyabstrahowane w jednym miejscu nie wiadomo po co) Oczywiście można abstrahować każdą property, ale czy wtedy nie dojdzie się po prostu do przepisania properties na nowe nazwy.
LukeJL napisał(a):
w ogóle stosowanie
iddo stylowania nie jest dobre (ponieważ id może być tylko jedno, unikalne, więc to ci może potem przeszkodzić, jak będziesz chciał dodać kolejny element tego samego typu). Lepiej byłoby robić to na klasach.
Może i tak, ale to właśnie ma być jeden konkretny element. Mianowicie w tym wypadku baner. Kod JS-owy, jak otrzyma stosowną komendę od serwera, to bierze ten baner po ID, usuwa mu display:none; i wypełnia tekstem.
Chyba, że mam zabezpieczyć się na taką możliwość, bym chciał dwa banery, jeden pod drugim ustawić? Na razie nie planuję...
Jezu ludzie serio się przejmujecie pojedynczą linią tak bardzo? Jeśli tak to ja nie wiem kiedy zarobicie na te swoje rozmyślania.
A może OP już zarobił i teraz, gdy chilluje sobie na jachcie naszło go na refleksję? :)