CSS: Nesting

0:01W tej lekcji będę opowiadał o zagrożeniu sektorów C.

0:07Generalnie często jest taka sytuacja że chcemy.

0:19Wyrazić nasze sektory w sposób jak najszybszy i jak najprostszy.

0:23No bo faktycznie pisanie niektórych elektorów zajmuje troszkę czasu

0:27w związku z czym dawno temu któryś z deweloperów wpadł na

0:31to żeby zamieszczać elementy ze sobą czyli tak jak tutaj

0:34zrobiłem baty i wewnątrz tego DF no to oczywiście to nie jest prawidłowe CSS

0:39przynajmniej nie na obecnym stadium i ten CSS zostanie

0:44przetransportowany przez CASA w momencie budowania na body D czyli jeżeli

0:49zamierzamy element w ten sposób no to on się będzie wewnątrz.

0:55Tego elementu pokazywał jako po spacji czyli generalnie szukamy elementów body

1:01i wewnątrz tego Body jeżeli jest to ten sam lektor go nam tutaj złapie.

1:05Swoją drogą bardzo genetyczny elektor on

1:07oczywiście powinien być zrobiony po klasie albo o czymś innym ponieważ takie

1:11genetyczne sektory są złe dla po pierwsze reformy a po drugie dla po prostu

1:16zarządzania naszym kodem więc tak handluje nasz kod ekscesy sowy kompilator

1:24no i możemy zrobić do tego więcej funkcjonalności np.

1:28jeśli chcielibyśmy napisać że.

1:32Po przejechaniu myszką na element pierwszy

1:35możemy użyć do tego sektora rodzica jest specjalny sektor który działa tylko w

1:40czasie i on tak naprawdę równa się zawsze temu co najbliższy sektor

1:48na górze czyli w tym momencie tak naprawdę pisali byśmy coś takiego.

1:53I tutaj mielibyśmy osobny sektor to jest dokładnie ten sam ekwiwalent kodu.

1:59Jeżeli go sobie tutaj przekonujemy tak żebyśmy mieli porównanie.

2:03No to te dwa Sniper kodu są

2:07równorzędne i generalnie sektor rodzica to jest coś z czego ja

2:13korzystam tylko i wyłącznie dla pseudo elementów i pseudo klas.

2:17Możemy też zrobić coś takiego żeby wygenerować klasę na przykład

2:23on

2:25jako modyfikacja to jest coś wyjątkowego w tym sektorze powiedzmy mógłby mieć

2:32inny Fon albo inny kolor powiedzmy że będzie miał inny kolor.

2:35W tym przypadku czarny.

2:37No i jeśli teraz sobie to.

2:40Piszemy i przejdziemy do HTML a

2:42tu piszemy spieszył jako dodatkową klasę to oczywiście musimy to zrobić z.

2:51Tutaj tymi duszami i powiedzieć ten sektor bo to jak CSS nam wygeneruje te style

2:58to tak jak wspomniałem Klei nam po prostu zamiast perfum to to co jest na górze

3:03czyli musimy całą taką pełną klasę tam wstawić.

3:06Bardzo prawdopodobne że kojarzycie to może Bema.

3:11Gdzie to jest faktycznie używane i poza PiS.

3:14Po zapisie widać że ten konkretny element

3:17zmienił kolor i zmienił go faktycznie za pomocą tej klasy.

3:23Ja nie polecam takiej notacji taka narracja jest według mnie bardzo czytelna

3:28ponieważ często jest sytuacja że mamy kilku krotne zagęszczenie elementów

3:34i tak naprawdę ciężko jest przeczytać do jakiego końcowego lektora tak jak tutaj

3:38mamy mówiąc PSL to się nam tłumaczy jeżeli byśmy sobie zrobili.

3:43Powiedzmy.

3:46Deficyt to nie jest jeszcze tak źle ale jeżeli byśmy zrobili DF wewnątrz tego

3:52łan kolejne zagęszczenie generalnie zagrażać możemy tyle ile chcemy.

3:57Są oczywiście różne litery które nam

3:59zalecają robić nie więcej niż trzy to możemy sobie skonfigurować.

4:05Natomiast jeśli zrobimy jeszcze

4:10to ten sektor będzie miał już

4:13łan spieszy.

4:15To będzie pełna klasa elektora.

4:17Jeżeli zrobimy jeszcze jednego sektora

4:21w związku z czym ja przede wszystkim nie

4:24lubię tego rozwiązania ponieważ nie możemy szukać po elementach w klasie w projekcie

4:30jeżeli byśmy teraz przekonywali sobie jak Cessna to wygenerował.

4:36Piszemy to w szukajcie.

4:38No to generalnie to się tutaj na mnie

4:40pojawia bo po prostu tego nie ma to jest tylko w generowanych

4:45plikach dystrybucyjnych albo w samej klasie gdzie przepisuje to w HTML u ale

4:49nie ma możliwości edycji faktycznego źródła pochodzenia tego kodu

4:55poprzez szukanie tego w projekcie.

4:59W związku z czym ja polecam używać tego

5:02tylko i wyłącznie albo do ustawienia nowych klas czyli to wymusi na elemencie.

5:09On żeby była druga klasa czyli nie będzie to koniecznie element wewnątrz.

5:15W tym momencie ten sektor sformował bym się na IEM on spieszy zamiast na.

5:24Jan.

5:26Spieszył.

5:28Czyli jeżeli zrobimy to w ten sposób no to

5:30piszemy do rodzica dodatkową klasę i to będzie wymóg że obie te klasy muszą być

5:36spełnione aby ten sektor się zaaplikował albo możemy używać tego do pseudo

5:40kolektorów co do elementów czy innych tego typu rzeczy natomiast nie polecam do

5:46tworzenia nazw sektorów przy użyciu sektora.

5:53To co można zrobić jeszcze przy użyciu

5:56tego operatora taśmy usunięty bo to jest tak naprawdę powtórzenie.

6:02I zmienimy z powrotem na wiatr.

6:05Pierwszy

6:07kolor bank Ground.

6:11Napiszemy.

6:12Faktycznie to działa to co możemy zrobić jeszcze to.

6:18Coś co jest przydatne np.

6:19przy tworzeniu filmów.

6:21Być może teraz można to zrobić jeszcze lepiej bez w ogóle pomocniczej klasy

6:25ale jeśli chcielibyśmy stworzyć coś takiego że musi być specjalny wariant HD

6:31czyli na przykład badań które ma na sobie klasę.

6:36Kibol.

6:38Nawigator co jest częstym przypadkiem

6:41jeżeli faktycznie dbamy o dostępność i o tym też mówię o osobnym kursie akcji.

6:46Kiedy takie klasy mogą być przydatne no to wtedy możemy to napisać zamiast w

6:51ten sposób no bo tak naprawdę musimy wyprowadzać wtedy całość.

6:57Poza to chyba że używamy tego.

7:01Poprzez gatunki lektor ale jeśli chcielibyśmy zrobić coś takiego że.

7:08Powiedzmy.

7:10Każdy element który znajduje się wewnątrz

7:13takiego blade bo powiedzmy że to ma tą klasę możemy to w sumie za symulować po

7:17prostu opisując las Board Getting musimy usunąć kropkę.

7:26To jeśli chcielibyśmy oscylować tutaj dynamicznie powiedzmy element numer 2

7:34no to albo musimy style dla tego elementu rozbić w dwa różne

7:39miejsca co jest niezbyt intuicyjne albo możemy po prostu użyć tutaj

7:45lektora czyli jeśli tutaj piszemy lektor na końcu to jest może troszkę

7:51rzadsze widokiem w czasie ale jest jak najbardziej prawidłowym tekstem.

7:56To sprawi że w sytuacji kiedy mamy.

8:02Kibol Getting ponad tym.

8:05Czyli tak naprawdę wewnątrz klasy

8:08kibol nawigacji znajduje się tutaj ten sektor się zaopiekuje.

8:12Zobaczymy jaki to jest błąd i miejsce 60 siódmej.

8:1967.

8:20Czy jest 67.

8:22Tak usłyszałem jedno jedną kamerkę i się nam niestety Barthel posypał.

8:29No i teraz jeśli to piszemy.

8:31To widzimy że element numer 2 ma kolor

8:34żółty który jest bardzo nieczytelny więc może zmienimy to

8:37i w tym momencie widać że element drugi dostał tą klasę dostał tą regułę.

8:47I jeśli usunie buddyjski Getting

8:51to ta klasa znika.

8:53Czyli jesteśmy w stanie stymulować

8:55elementy w zależności od tego wewnątrz czego się znajdują.

8:59Dynamicznie i te klasy sobie np.

9:01przełączać w krypcie.

9:02Więc ja polecam używanie tego Amber Santa jako

9:07odniesienie do pseudo stylu czy pseudo klas na danym elemencie bądź używanie go

9:15do modeli Kaczorów a niekoniecznie do tworzenia pełnych

9:19nazw sektorów czy ich modyfikacji bo po prostu według mnie jest to nieczytelne.

9:25Oczywiście możecie korzystać z CSS a jak wam tylko pasuje i też jest taka szansa że

9:29w projekcie na jakim przyjdzie wam pracować będzie ta dotacja z rządem i np.

9:36dwoma silnikami jako nazwę elektora używana to w zależności oczywiście od tego

9:42czy lubicie to podejście czy nie możecie albo dalej z niego korzystać albo

9:46zaproponować korzystanie z pełnych nazw czyli napisali byśmy wtedy tu.

9:55PSL jako osobny sektor

9:57i wtedy moglibyśmy wyszukać sobie to w kodzie źródłowym tak jak jest to zapisane

10:03w przeglądarce bezpośrednio a używać tylko do specjalnych sektorów.