CSS: Skomplikowane selektory

0:00Cześć w tym dziale będę mówił o wydajności CSS.

0:03Zawęża to tylko i wyłącznie do CSS bo o

0:05samej wydajności można by mówić naprawdę godzinami.

0:09Więc tutaj też te najbardziej popularne

0:11problemy z wydajnością w kontekście CSS porusza.

0:15No i

0:16pierwszym z tych zagadnień są skomplikowane sektory więc żeby móc

0:21stworzyć skomplikowane sektory potrzebujemy skomplikowanej.

0:25Notacji w HTML u ja tutaj użyję meta aby sobie szybko wygenerować jakiś market.

0:31No to ustawiamy sobie kontenery czyli w okresie kontener

0:36wewnątrz którego będzie lista nie

0:38numerowane wewnątrz którego będą elementy tejże listy.

0:42No i każda z tych elementów będzie miała

0:45klasę z dolarem czyli z numerem początkowym.

0:49W zależności od tego która jest integracja

0:51interakcja to tak jak robiliśmy to wcześniej

0:54to sobie możemy pomnożyć razy 12.

0:56Podajemy jak to wygląda.

0:57Mamy kontener walkę i dwanaście plików wewnątrz niego

1:04i wewnątrz każdego z tych lista i temu

1:05stworzymy sobie baton który będzie miał tekst Click.

1:10No i w nawiasie numer początkowy który sam sobie wygenerował.

1:14I faktycznie jak to napiszemy to już w ten sposób wygląda.

1:18Możemy zrobić jeszcze kilka małych poprawek czyli walkę ukryć jej lista i.

1:28Parking i margines zresetować.

1:35Zapisujemy na betonie też jakoś troszkę go

1:39oscyluje żeby był troszkę ładniejszy i ustawiły mu na.

1:457.

1:47Border on.

1:49I Back Ground.

1:52Na powiedzmy.

1:56Piszemy.

1:58Kolor wystawimy na biały parking na.

2:02Powiedzmy 08 ramach.

2:07Tutaj troszkę nam się już nie zmieściła więc damy sobie 8 gramów.

2:13Margines Dolny.

2:16Tak naprawdę moglibyśmy go ustawić sobie

2:17na listę ale powiedzmy że tutaj będzie około pół RM.

2:22No i stworzyliśmy bardzo dużo elementów.

2:25Co prawda na takich produkcjach jak 12 budżet państwa to nie jest naprawdę dużo

2:30ale na potrzeby naszego przykładu jest to całkiem sporo.

2:32No i skierowaliśmy je po dosyć

2:34generycznych sektorach i tak jak wspominałem wcześniej

2:37te sale które są o tyle problematyczne że po pierwsze

2:41my możemy je niechcący wpisywać takie sale które tak naprawdę powinny być

2:46tylko na początku naszego arkusza czyli tak aby później mogły być napisane przez

2:51coś co ma większe specyfice hity bądź jest po prostu w kaskady troszkę

2:55niżej ale te style nie powinny być jakby esencją tego jak tworzymy nasze atuty.

3:01Powinniśmy faktycznie sterować po klasach bądź PO.

3:05Atrybut jeżeli jest taka potrzeba i jeśli chcielibyśmy na przykład oscylować

3:11element numer 6 no to oczywiście możemy to zrobić na kilka sposobów.

3:14CSS jest naprawdę dynamicznym językiem i

3:17możemy to zrobić naprawdę na różne sposoby.

3:19Więc jeśli bierzemy najpierw tutaj tego kontenera.

3:26Następnie poszukamy w nim listy numerowane i bezpośrednio w nim bo

3:32być może mogłaby być żona ale my chcemy konkretnie tą

3:36ulicę.

3:38Następnie weźmiemy

3:41tylko elementy listy które są bezpośrednio w tej walce co swoją drogą.

3:46Jeżeli zamieszcza się w listach murowanych coś innego np.

3:51diwa rapuje

3:53list Diva no to to już jest niepoprawne lista lista numerowane czy nie numerowane.

3:58Może.

3:59Lista nie numerowane czy numerowane.

4:02Może posiadać tylko i wyłącznie elementy mieli jako swoje bezpośrednie dzieci.

4:06No i powiedzmy że chcemy oscylować element.

4:12Siódmy wewnątrz którego jest baton i tenże baton.

4:16Tutaj zmienimy mu kolor na grunt Green.

4:19Oczywiście jest tutaj kilka problemów z tym kodem to faktycznie nam zadziałało.

4:23Po pierwsze specyfice tego sektora jest naprawdę wysokie

4:27i możemy to zrobić o wiele lepiej żeby tego wysokiego takiego nie było bo np.

4:34teraz nie jesteśmy w stanie oscylować tego elementu po

4:397 czyli na naszym elemencie. Baton.

4:43Jeżeli byśmy zrobili taki sektor i go sobie tutaj wpisali.

4:48Jako bankrut.

4:51Powiedz mi jedną.

4:54No to to nie działa pomimo tego że w

4:56Kaskada jest niżej ponieważ tutaj specyfika jest większa.

4:59Tutaj używamy w obu sektorach klasy na

5:01początku no ale później mamy nie dość że bezpośredni sektor najbliższego dziecka to

5:07jeszcze są bezpośrednio listy nie numerowane konkretny element tej listy.

5:12No i jeszcze baton bezpośrednio.

5:15Więc jeśli już musimy robić sektory tego typu to znaczy dobierać się do któregoś

5:20elementu danego danej listy czyli po prostu danego marketu.

5:24No to lepiej jest zrobić coś takiego czyli

5:27dobrać się najpierw do elementu początkowego który ma klasę a potem dobrać

5:31się do elementu ogólnego albo najlepiej w ogóle nie sterować.

5:37Tylko zrobić np.

5:397 baton czyli.

5:42Klas

5:447

5:45weźmie baton.

5:48I postulował to bezpośrednio.

5:51Powodów do tego oprócz specyfiki samego w sobie.

5:57Jest też wydajność ponieważ CSS

6:01będzie musiał podróżować tak jakby po całym naszym aucie którym my deklarujemy

6:07i zgodnie z tymi sektorami on będzie musiał te warunki aplikować bądź nie.

6:11Czyli jeśli mamy sytuację gdzie określamy

6:14że chcemy oscylować ten konkretny element bo tak naprawdę oba te podejścia

6:19skupiają się tylko i wyłącznie na tym betonie no to dają tyle dodatkowych

6:25instrukcji silnikowych CSS a nie pomagamy w jego performance bo tak naprawdę

6:30ta informacja jest wystarczająca aby znaleźć ten element.

6:34I to po prostu też się wewnętrznie szybciej pasuje.

6:37Najgorsze co możemy zrobić to jest generalnie sektor gwiazdka Aster risk

6:42czyli sektor wszystkiego czyli tak naprawdę ten sektor wybrałby

6:47każdy dowolny element który pasowałby do poprzedniego ciągu sektora.

6:52I tutaj by coś było wewnątrz jeżeli mielibyśmy np.

6:55obok tego patrona jeszcze jakiegoś z pana.

7:00Order piszemy to ten Herod też otrzymuje

7:04ten kolor ponieważ tu jest gwiazdka więc gwiazdka oznacza wszystko.

7:08No i ten sektor też będzie działał.

7:10Poza tym często mówi się że CSS czyta sektory od tyłu więc on najpierw szuka

7:16tych najbardziej elementów po prawej aby sobie zawęża się cały ten ciąg.

7:20Więc jeżeli taką gwiazdkę mamy na końcu no

7:23to on tak naprawdę wie że cały nasz dom i cały ten dom.

7:26Dopiero później będzie filmował zgodnie z

7:28tymi kryteriami które znajdzie wcześniej w związku z czym moja tutaj reguła.

7:35Porada dla was jest taka abyście nie robili ani takich generycznych elektorów

7:40ani przede wszystkim gwiazdki ani bezpośrednich elektorów dziecka.

7:46Jest naprawdę bardzo mało przypadków kiedy trzeba to robić w ten sposób

7:49tylko po prostu uzupełniali wasz Marka o odpowiednie klasy i te konkretne klasy

7:55stylowe i być może na poziomie projektu te różnice nie będą na

7:59tyle dostrzegalne więc być może na ten moment sektory tego typu działają a jeżeli

8:05naprawdę pracowali byście na ogromnej stronie z tysiącami i setkami tysięcy

8:10elementów HTML owych bo te elementy są często generowane dynamicznie nie piszemy

8:14ich ręcznie no to faktycznie takie sektory mogą

8:18wpływać na performance a jak wpływają na performance to wpływają też na metryki np.

8:24wyszukiwarek internetowych takie jak Like House z PIT test.

8:28Czy inne tego typu narzędzia w związku z

8:31czym najlepszym rozwiązaniem jest stylowy poklask bądź atrybuty.

8:36Na pewno nie po kibicach no bo mają

8:38większe deficyty i generalnie powinien być jeden kibic na cały element dom danego

8:44typu czy nie możemy mieć dwóch indyków o treści MEiN.

8:47Na przykład pomimo tego że

8:50jesteśmy w stanie to oscylować to po pierwsze mamy większe specyfice IT

8:54a po drugie z poziomu HTML a nie jest to poprawne.

8:58Jeżeli byśmy tworzyli np.

9:00dla danego elementu no to.

9:03Takie świeczki zadziałały tylko dla pierwszego elementu a nie dla wszystkich

9:07kolejnych więc możemy sobie jeszcze ten przykład szybko naprawić.

9:11Czyli tutaj jeśli byśmy sobie zebrali

9:13wszystkie batony możemy to zrobić za pomocą zaznaczenia

9:18tylko pierwszego etapu baton zaznaczył my je wszystkie za pomocą skróty klawiszowe

9:23komentarze i tutaj piszemy sobie klasę City

9:28baton czyli Action baton.

9:30Tutaj musimy dodać też ręcznie bo

9:33nasze.

9:35Zaznaczenie nie mogło wybrać tego elementu.

9:38Możemy fałszować.

9:41Niestety ten fakt nie robi tutaj cięć.

9:43Ja osobiście bym to reformator dał na taką

9:46narrację żeby faktycznie każdy z tych elementów był widoczny.

9:49I wtedy możemy oscylować każdy tej baton.

9:55Zamiast bezpośrednio balonów.

9:57Nie ma różnicy w samym oderwaniu się tego elementu ale jest różnica w performance.

10:03Zwłaszcza przy dużej skali i tak samo moglibyśmy tą walkę też nadać jej klasę.

10:07Czyli jeśli tylko dodamy kolor Black i zmienimy tona.

10:13List.

10:15No to na tej walce też możemy dać.

10:19Klasę.

10:21No i ten kontener generalnie nie jest użyty moglibyśmy się go pozbyć ale nie ma

10:26to znaczenia więc zostawimy to w ten sposób unikają skomplikowanych sektorów i

10:31sektorów generycznych stylu wszystko po klasach wody dawajcie klasy dynamicznie

10:36czy to będzie czy to na front będzie i nie będziecie mieli problemów z

10:40performance na poziomie parkowania waszych z tymi.