CSS: Extendy kontra includy

0:00Część tej lekcji porównał masowe Extended do rasowych klubów oba z tych narzędzi.

0:07Służą do tego aby tworzyć nieużywane bloki kodu czyli jeśli załóżmy mamy.

0:14Dwie klasy model i klasę Action

0:19i chcemy mieć jakiś wspólny właściwość dla nich czyli powiedzmy Ground red.

0:26I Beck Ground red.

0:28Oczywiście to może być jakiś zbiór reguł czyli powiedzmy

0:32Display Block.

0:36Display blok i powiedzmy margines

0:40rozmów więc oba elementy powinny mieć wspólny blok kodu.

0:44I to się dzieje bardzo często.

0:47My tutaj korzystamy teraz z SAS Masters czyli takiego brandu do S CSS a żeby to

0:53łatwiej przedstawić jak to się kombinuje ze z CSS a na zwykłego CSS.

0:57No i oczywiście jeżeli chcielibyśmy żeby oba te elementy zmieniały się naraz no to

1:03jeżeli zmienimy tutaj pojedynczą Display Flex no to tutaj musimy pamiętać żeby to

1:07zmienić również na Display Flex dlatego też możemy te nieużywane bloki

1:12kodu tworzyć przy pomocy Extended ów i innych ludów Ja może zacznę od składni

1:16Extended i Extended możemy dowolny element.

1:21Jeśli sobie stworzymy na przykład Klasę baz.

1:25I tutaj sobie to wystawimy.

1:29Jesteśmy w stanie zrobić za pomocą małpa

1:32Extended kropka bas i wtedy model też będzie miał.

1:37Tą klasę czyli jakby jesteśmy w stanie rozszerzać klasę o inną klasę.

1:42Ja tego nie polecam robić ale jest taka funkcjonalność technicznie możliwa

1:46ale jeżeli nie chcemy żeby tutaj nam się w naszym Corsa się też ta klasa Base

1:51pojawiało no to możemy użyć specjalnego znaku który jest takim jakby darem

1:55dla Sasa czyli jeżeli damy tutaj procent no to to nam zniknie z naszego S.

2:01I tutaj też musimy wtedy ekscytować.

2:04No i wtedy ten bas Class nam zniknął.

2:07I mamy faktycznie klauzulę którą możemy

2:11sobie używać w dowolnym bloku CSS w dowolnym sektorze

2:16i zmiana tutaj oczywiście to propaguje na pozostałe klasy

2:22eksponaty są o tyle wydajne że łączą wszystkie sektory które posiadają dany

2:28blok kodu i łączą je w jeden sektor za pomocą przecinka.

2:33Jeśli np.

2:34mielibyśmy jakiś dodatkowy blok kodu na przykład.

2:39Tweet.

2:42I tutaj zrobimy sobie Extended

2:44BASIC ale on dodatkowo ma w sobie jeszcze jakieś zmienne czyli np.

2:48parking.

2:502.

2:52Border radio.

2:56No to oczywiście dzieje się tak że osobno ten impuls Wild ma swoje reguły

3:01a wspólna część jest przypisywana do tego bloku kodu

3:06wydaje się na pierwszy rzut oka że to jest

3:08optymalne rozwiązanie no bo faktycznie mamy mniej linijek kodu koniec końców.

3:14Z tym że ekspert posiada swoje problemy np.

3:18nie jesteśmy w stanie przy pomocy mediów serwis

3:22powiedzmy screen.

3:25Pęd.

3:26MEN.

3:29600 pikseli to możemy oczywiście sobie dać jakąś regułę powiedzmy.

3:35Back Grand.

3:37Orange czyli in plus film będzie miał Grand Orange jeśli

3:42jest przynajmniej sześciuset pikseli.

3:45No i tak wygląda wygenerowany CSS z tym że jest taki problem że nie jesteśmy w stanie

3:52wewnątrz media używać Stanów bo to zwróci błąd kasowy.

3:58I tutaj faktycznie widać że error from Line On The In.

4:02Szczerze mówiąc nie wiem czemu on tego nie

4:03pokazuje ale generalnie to jest błąd tego że Extended nie działają media kulisami

4:08więc jeśli stworzyliśmy sobie jakiegoś Extended który sprawia że nasze elementy

4:12mają jakiś określony kształt no to na określonym

4:16w porcie nie będziemy go w stanie użyć będziemy go w stanie użyć tylko w tym

4:19globalnym skorupie bez żadnego media włącznie to jest jakiś limit techniczny.

4:24Ja nie do końca też wiem dlaczego tak się

4:26dzieje po prostu to jest imitacja biblioteki.

4:30Więc jakie mamy inne opcje jeżeli chcemy użyć jakiegoś używanego bloku kodu

4:34wewnątrz media kibiców są też inne kluby czyli tak naprawdę misyjne

4:40które mogą przyjmować parametry są trochę jak funkcja.

4:44I nazwiemy sobie na przykład Common.

4:49Still I tutaj możemy opcjonalnie podać jakiś argument.

4:54Natomiast nie musimy i jesteśmy w stanie tak naprawdę tutaj

4:57sobie to kopiować oczywiście możemy w nich też użyć Extended.

5:01Z tym że to wtedy tak czy siak nie

5:04zadziała bo koniec końców używamy Extended media.

5:06Możemy oczywiście spróbować zrobić miks używa się poprzez słowo iCloud

5:11i nazwa mix inna czyli tutaj Common still to jest to co ja tutaj napisałem.

5:17No i niestety widzimy że to jest błąd.

5:19Andy White mix win to musi być oczywiście wyżej w kodzie.

5:23Więc tutaj sobie deklarujemy maksima.

5:26I tutaj widzę że tego już akurat nie wyłapuje.

5:31Liter.

5:34Ale tak czy siak nasz kod się nie

5:35komplikuje i to jest właśnie dlatego że używamy tego eksperta pod spodem.

5:39Tutaj się pokazał błąd czyli nie w samym użyciu tego cuda a w

5:44samym mix i to też może być mylące ponieważ tak naprawdę tutaj robimy błąd bo

5:49używamy klucza wewnątrz media kulisach który ma w sobie a tutaj

5:54ten błąd by już nie wystąpił a naprawiony błąd który się pokazuje.

5:58Więc to może być też problematyczne w reagowania.

6:02Więc zamiast tego Extended możemy sobie po

6:04prostu kopiować ten blok kodu i Wklej go do kont i zobaczymy co się stanie.

6:10Widzimy że faktycznie ten

6:13filtr ma teraz kopiowane całą regułę kodu jeśli byśmy używali tego.

6:19Cuda zamiast tych dwóch ekspertów

6:21to widzimy że w każdym z tych sektorów ten kot jest zobligowany

6:25na pierwszy rzut oka to wydaje się jako problem z optymalizacją i z wydajnością bo

6:30oczywiście więcej tych danych mamy w naszym pliku i więcej danych

6:34teoretycznie idzie do przeglądarki z tym że

6:37to stwierdzenie nie jest prawdziwe jeśli nasz pilot czyli jeśli czujemy nasz HTML

6:43CSS nasze skrypty już wspominałem o kompresji DVD i

6:49tak naprawdę te algorytmy kompresji działają w ten

6:52sposób że jeśli już jakieś dane ciąg znaków czy pojedynczego znaku wystąpił w

6:57naszym kodzie no to tak naprawdę kolejne jego użycia są coraz lżejsze.

7:02Im częściej się pojawia.

7:04W związku z czym zysk.

7:07Bajtów przesyłanych

7:09do przeglądarki w porównaniu Extended do klubów jest naprawdę znikomy.

7:14Teoretycznie Extended są lepsze jeżeli nie

7:17kupujemy naszego kodu czujemy i czujemy ale jeśli to robimy to tak

7:23naprawdę nie ma żadnego powodu żeby używać Extended które mają ograniczoną składnia

7:28bo po prostu nie da się ich używać w mediach kulisach i mogą też doprowadzać do

7:32różnych błędów które są ciężkie zbadania bo po prostu tak działa litera Sasa.

7:38W związku z czym ja tutaj chciałbym zaproponować abyś zawsze używał mix Finów

7:43ponieważ mix inny można też Custom izolować.

7:45Tutaj mamy miejsce na parametry więc

7:48możemy sobie wpisać dowolną wartość powiedzmy parking.

7:54I ten parking możemy sobie tutaj ustawiać

7:57dynamicznie po zmiennej czyli tak naprawdę będziemy w stanie tutaj użyć sobie

8:03ma parkingu a tutaj 1 rem parkingu.

8:07I widzimy że tutaj faktycznie nam.

8:10Pojawiły się dwa remisy a czemu tutaj nie ma.

8:13Bo jeszcze tutaj mieliśmy

8:15powiedzmy zero w sobie jako parking no i teraz się nas przed budował ten kod.

8:21I widzimy że ma pół parkingu.

8:24I tutaj mamy 1 rem.

8:26Jako wartość.

8:27Podsumowując including Contra Extended.

8:32Według mnie lepiej używać klubów bo dają o

8:34wiele większe możliwości i kasy dominacji i można ich używać media kuli się a jeśli

8:39czujemy nasz kot to tak naprawdę Extended nie mają w sobie już żadnego benefitów.

8:44Poza ewentualnie wizualnym aspektem tego

8:46że możemy używać procenta jeśli mamy taką potrzebę.