Opracowanie wydajnego, usprawnionego CSS
CSS można porównać do zestawu narzędzi rzeźbiarza; jak rzeźbiarze w pracy, my, projektanci, używamy CSS do tworzenia uporządkowanych układów stron internetowych.
Z biegiem lat proces ten stał się bardziej zorganizowany; wprowadzono zasady tworzenia najlepszych praktyk kodowania.
W tym artykule przyjrzymy się kilku pomysłom, z których możesz skorzystać przy pisaniu arkuszy stylów, aby przyspieszyć działanie kodu.
Wydajny CSS jest łatwy w zarządzaniu i łatwy do odczytania i może być źródłem dla projektantów stron internetowych. Zorganizowanie się jest dużym krokiem, ale używanie CSS może być nieco bardziej skomplikowane.
Czytając ten artykuł, pamiętaj o własnych preferencjach; najlepszą radą, jaką możesz uzyskać od dowolnego programisty, jest znalezienie własnego sposobu pracy. Połącz kilka technik tutaj z własnymi metodami, aby uzyskać największe korzyści.
Po co przeszkadzać w usprawnianiu CSS?
Wielu projektantów myli języki front-end i back-end, gdy mówi o parsowaniu kodu. CSS i HTML to front-endowe języki używane do formatowania i stylizowania elementów na stronie internetowej. Pliki są pobierane i analizowane przez przeglądarkę użytkownika, co oznacza, że kod front-end ma znaczny czas ładowania.
Kod pobrany i przeanalizowany przez przeglądarkę wymaga czasu na odczyt i obliczenie, podobnie jak kod napisany w językach zaplecza (takich jak PHP lub Ruby). Uproszczony CSS może przynieść znaczną korzyść stronie internetowej, ponieważ może skrócić czas ładowania i przyspieszyć strukturowanie elementów strony.
Korzyści mogą nie być oczywiste w przypadku dzisiejszych szybkich połączeń i zaawansowanych systemów operacyjnych. Możesz zajrzeć do swojej witryny w przeglądarce mobilnej, aby porównać czasy ładowania i zobaczyć, jak strona się ładuje.
Gdy kod CSS jest efektywnie kodowany, powinieneś zobaczyć formę i styl elementów strony internetowej podczas ich przetwarzania. Może to wyglądać inaczej, od przeglądarki do przeglądarki, ale tak się dzieje. Im więcej przetestujesz kod swojej witryny, tym więcej zobaczysz.
Utrzymuj swój kod w ujednoliconym i prostym brzmieniu. Jeśli aktualizujesz swój blog lub osobistą stronę internetową kilka miesięcy po początkowym opracowaniu, przeszukiwanie stylów CSS, które znasz, jest łatwiejsze niż radzenie sobie z nowymi. Dostosowanie do ustalone standardy pomaga na dłuższą metę.
Jak pracować z wydajnym kodem
Aby zacząć styl kodowania z najwyższą skutecznością, musisz przyjąć kilka nowych pomysłów. Są to podstawowe techniki CSS używane obecnie przez najlepsze strony internetowe i twórców aplikacji.
Zachowaj prosty kod
Można to łatwo przeoczyć. Podczas mapowania zestawu danych dla swoich stylów, zachowaj to proste. W razie potrzeby utwórz zestawy danych w stosie kolumn.
Rozpocznij od utworzenia listy różnych sekcji do pracy w swoich stylach. Możesz dołączyć tekst, formularze, pola układu, nagłówki, stopki i wszystko, czego możesz potrzebować. Aby naprawdę się zorganizować, możesz podzielić go na kilka znanych stylów, takich jak id lub class dla łączy nawigacyjnych.
Ten pierwszy krok pomaga w stworzeniu planu witryny za pomocą prostych słów, zanim przejdziesz do dowolnego języka. Potem siadanie do pisania kodu będzie znacznie prostsze; posiadanie przed sobą listy zasobów pomoże ci wylać kod w tempie niemal nadludzkim.
Zachowaj bloki kodu wytyczone i rzadkie
Trwa debata na temat tego, jak należy napisać kod CSS. Kiedy zaczynałem, użyłem notacji blokowej, ponieważ było to wszystko, co kiedykolwiek widziałem. Jednak notacja jednoliniowa jest znacznie szybsza, jeśli chodzi o parsowanie tekstu i uczynienie go czytelnym.
Nie robię argumentów za ignorowaniem CSS w blokach - z dala od tego. Kiedy masz do czynienia z ważnym elementem lub id który posiada sześć lub siedem głównych właściwości, utrzymanie go w zablokowanej formie będzie łatwiejsze. Izolujesz ważne elementy swojego stylu, dzięki czemu łatwiej je znaleźć na pierwszy rzut oka.
Odczytanie długich stylów w notacji blokowej jest również łatwiejsze, ponieważ większość edytorów tekstu zawija długie wiersze, a czytanie par własności i wartości może być mylące, gdy masz 10 lub więcej. Będąc projektantem stron internetowych, musisz wykonać rozmowę o tym, jak oddzielić kod CSS. Miej na uwadze efektywność i wykorzystuj swoją najlepszą ocenę.
Praca z innymi programistami
Jeśli jesteś profesjonalnym projektantem stron internetowych lub dążysz do tego, aby być jednym z nich, prędzej czy później będziesz pracować z zespołem. Może to być błogosławieństwo lub przekleństwo, w zależności od zespołu.
Projektanci często niechętnie wprowadzają istotne zmiany w swojej pracy. Kod CSS jest nieco inny, ponieważ próbujesz stworzyć piękny układ, używając tylko wartości właściwości, a pliki mogą stać się niepotrzebne, gdy zostaną przekazane między kilkoma rękami. Więc bądź zorganizowany.
Komentarze są główną pomocą. Jeśli linie lub bloki kodu mogą wprowadzać w błąd lub wprowadzać w błąd innych, komentarze spowodują oszczędność czasu. Wyjaśnij wszystko, co umieścisz w arkuszu stylów, tak elegancko, jak to tylko możliwe.
Upewnij się, że powielone lub dodane style nie są nadpisywane. Wyobraź sobie, że h1 do h4 nagłówki są umieszczane wysoko w dokumencie CSS, ale potem kod obniżający zmienia ich czcionki. Może to być niezmiernie kłopotliwe dla kogoś, kto nie napisał kodu, a teraz musi przejść i naprawić błąd.
Komunikacja ma również kluczowe znaczenie. Możesz napisać najbardziej efektywny kod, ale brak komunikacji zepsuje twój zespół. Skoncentruj się na zadaniu i korzystaj z kreatywnych pomysłów produkowanych wspólnie przez zespół (nie tylko twoich).
Śledź oddzielne dokumenty CSS
Innym sposobem na zachowanie czystego i uporządkowanego kodu jest oddzielanie typów stylów. Działa to dobrze na dużych stronach internetowych, na których przechowywanie wszystkich stylów w jednym dokumencie byłoby nierealne.
Facebook jest dobrym przykładem. Prawdopodobnie ma wiele różnych stylów dla wszystkich różnych stron: profilu, wyszukiwania, rejestracji, zdjęć itp. Jeśli wszystkie style zostały skonsolidowane w jednym pliku, nie chciałbym być facetem, który musi przejrzeć kod tylko po to, aby napraw prosty błąd.
Facebook ma o wiele większy ruch niż Twoja witryna, ale zasady są takie same. Jeśli organizacja jest problemem, oddzielne arkusze stylów mogą przejść długą drogę. Projektanci sieci często organizują kod na podstawie aspektu struktury dokumentu (np. Layout.css , text.css , forms.css ).
Nie wszystkie style muszą być załadowane na każdej stronie. I tu jest korzyść: metoda pozwala na większe dostosowanie podczas budowania witryny. Znacznie skrócisz czas analizowania, tworząc osobne widoki i style.
Testowanie wsparcia dla IE
Twórcy stron internetowych zawsze malowali Internet Explorera jako złoczyńcę, szczególnie w CSS. Na szczęście możesz zastosować komentarze warunkowe (które wyglądają jak zwykłe komentarze do większości przeglądarek) do kodu HTML.
Możesz ich użyć do zastosowania stylów w Internet Explorerze. Sprawdź komentarze warunkowe, jeśli ich nie znasz; mogą okazać się nieocenione, gdy właściwości CSS nie działają poprawnie i potrzebujesz alternatywy.
Wraz z wydaniem Internet Explorer 9 Beta zbliżamy się do zunifikowanego doświadczenia z Internetem. Jedynym problemem jest liczba osób, które wciąż używają przeglądarek tak starych jak IE6 i IE7, które mają poważne błędy przetwarzania (z powodu wadliwych silników renderujących) i czasami wymagają zewnętrznych stylów. Na szczęście wsparcie uległo poprawie, a Microsoft wydaje się zwracać uwagę na sprawy.
Dodawanie spisu treści
Ten krok jest opcjonalny, ale uważam, że działa cuda dla moich arkuszy stylów. Możesz przechowywać tabelę poza samym dokumentem CSS, ale stwierdziłem, że jest to trochę nieproduktywne - zwłaszcza, że dodawanie komentarzy jest tak proste.
Głównymi powodami umieszczenia spisu treści w stylach jest to, że ułatwia dostęp i usprawnia proces edycji. Umieść znaczniki na początku dokumentu, aby podzielić kod na logiczne podziały.
Tworzenie własnych kluczy to dobre podejście. Na przykład, jeśli planujesz podzielić tabelę zgodnie z głównymi obszarami dokumentu (układ, czcionka, nagłówek, nawigacja itp.), Możesz wpisać sekcje z unikalnymi znakami.
Możesz użyć =!layout i =!font aby odpowiednio zdefiniować sekcje układu i czcionki. Prawdopodobnie nie natrafisz na dokładne sekwencje znaków w dowolnym miejscu kodu, więc dodanie ich zarówno do tabeli, jak i początku każdej sekcji komentarzy powinno być bezpieczne. Następnie użyj funkcji wyszukiwania w edytorze tekstu, aby przejść do wybranej sekcji.
Jest to również dobra strategia dla projektów, w których wiele osób będzie patrzyło na kod. Utrzymuje wszystko uporządkowane i dostępne.
Jest wiele sposobów na zoptymalizowanie kodu i sprawienie, by był on skuteczniejszy, a te wskazówki to świetny początek. CSS ewoluuje i powstaje wiele nowych pomysłów na ten temat.
Potrzebujesz pasji i poświęcenia, aby zrobić to w branży projektowej. Jeśli możesz trzymać się swojej pasji do projektowania cyfrowego, przestrzeganie najlepszych praktyk CSS nie powinno być trudne. Dotarcie do innych w tej ogromnej globalnej społeczności projektantów stron internetowych może być bardzo pomocne; eksperci branżowi chętnie dzielą się swoimi technikami i innowacjami.
Ten post został napisany wyłącznie dla Webdesigner Depot przez Jake Rocheleau , namiętny projektant stron internetowych i entuzjasta mediów społecznościowych. Jake uwielbia czytać i pisać o najnowszych trendach cyfrowych i internetowych oraz nawiązywaniu kontaktów ze środowiskiem projektantów. Aby dowiedzieć się więcej o jego pracy, znajdź go na Twitterze @ jakerocheleau .
Jakie są Twoje metody optymalizacji CSS? Wszelkie sugestie dla początkujących programistów CSS? Jakie nowe funkcje lub dodatkowe wsparcie chciałbyś zobaczyć w przyszłych iteracjach CSS?