Flexbox i CSS Grid
Jeśli nadal polegasz wyłącznie na tradycyjnym modelu pudełka podczas pisania CSS i wyrównywania elementów na ekranie za pomocą marginesów, wypełnień i liczb zmiennoprzecinkowych. Powinieneś rozważyć przyjęcie bardziej nowoczesnych modułów układu, a mianowicie Flexbox i CSS Grid. Te nowe modele pozwalają wdrażać złożone układy ze znacznie mniejszym kodem.
W przypadku starszych technik musisz używać wielu sztuczek i poprawek. Nawet w przypadku prostszych rzeczy, takich jak centrowanie elementów w pionie. Jednak nie jest tak w przypadku Flexbox i CSS Grid. Chociaż pobranie nowych modułów układu może zająć trochę czasu. Warto zainwestować w to trochę czasu, ponieważ pliki CSS będą znacznie mniejsze. Jest to szczególnie prawdziwe w przypadku Flexboksa, który do tej pory ma całkiem dobrą obsługę przeglądarki (obecnie 98,3% na całym świecie).
Chociaż obsługa CSS Grid w przeglądarce jest mniej doskonała (obecnie 92,03% na całym świecie), nadal możesz z niej korzystać, jeśli nie musisz obsługiwać starszych przeglądarek.
Znacznik <link>
Istnieją dwie główne techniki, za pomocą których strona internetowa może ładować pliki CSS:
dodając je do sekcji <head> strony www HTML za pomocą znacznika <link>, importowanie ich z innych arkuszy stylów za pomocą reguły @import. Musisz dodać regułę @import na górze głównego pliku CSS. W większości przypadków służy do ładowania mniejszych zasobów, takich jak czcionki i inne elementy projektu. Na początku może się to wydawać dobrym rozwiązaniem, jednak przeglądarka ładuje dodatkowe arkusze stylów znacznie dłużej niż wtedy, gdy strona HTML ładuje je bezpośrednio za pomocą znaczników <link>.
Kiedy dodajesz więcej niż jeden plik CSS do swojej strony HTML, zawsze zwracaj uwagę na specyfikę CSS. Najpierw dodaj najbardziej ogólny arkusz stylów, a następnie przejdź do bardziej szczegółowych. Musisz to zrobić, ponieważ arkusze stylów, które dodasz później, zastępują reguły poprzednich plików CSS.
Stosuj gradient
Załadowanie wszystkich zdjęć na stronie internetowej może zająć dużo czasu. Programiści używają wielu technik optymalizacji obrazu w celu złagodzenia efektu. Takich jak ładowanie obrazów z zewnętrznego CDN lub korzystanie z narzędzi do kompresji obrazów, takich jak TinyJPG. Te rozwiązania mogą bardzo pomóc, jednak wiele razy możesz zastąpić duże zasoby JPG i PNG natywnymi efektami CSS.
Na przykład możesz użyć gradientów zamiast dużych obrazów tła, które mogą znacznie spowolnić przeglądarkę użytkownika. Za pomocą funkcji gradientu CSS można tworzyć gradienty liniowe, promieniowe i powtarzalne. Dzięki tym natywnym funkcjom CSS nie można tylko definiować kolorów, ale także kąta gradientu.