Co robią programiści CSS i dlaczego ich potrzebujesz

Programiści CSS to profesjonaliści sieciowi, których głównym obowiązkiem jest dostarczanie dopracowanego i stylowego produktu do przeglądarki odwiedzającego. Praktycznie każda strona internetowa używa CSS, ale CSS często nie jest uważany za „równy” w nowoczesnym stosie tworzenia stron internetowych. Niestety, to błędne wyobrażenie może prowadzić do tego, że CSS jest brane za pewnik, a nawet do pewnego stopnia pomijane.

Umożliwienie programistom, którzy nie korzystają z CSS, radzenia sobie z CSS często powoduje wprowadzanie hacków i błędów CSS w kodzie i może powodować niepotrzebną frustrację programistów. W tym artykule chciałbym zapoznać wszystkich z tym, co obejmuje ta praca, abyś mógł lepiej zrozumieć, dlaczego każda witryna potrzebuje niezawodnego, profesjonalnego programisty CSS.

Co robią programiści CSS?

Zacznijmy od podstaw. Dlaczego CSS jest tak ważny i co dokładnie mają robić programiści CSS?

CSS jest specyficznym językiem i jako taki nie może istnieć samodzielnie. Wymaga kodu HTML, aby mieć sens. Tak więc pierwszą rzeczą, jaką robią programiści CSS, jest pisanie kodu HTML.

Pisanie schludnego HTML zawsze ma znaczenie

Pisanie prostego, czystego i odpowiednio zorganizowanego kodu HTML to wielka odpowiedzialność, ponieważ skromny dokument HTML jest pierwszą rzeczą, jaką dostarczasz użytkownikom końcowym.

Jeśli piszesz gotowy do produkcji dokument HTML, powinieneś spróbować umieścić wszystkie wymagane i opcjonalne znaczniki w nagłówku dokumentu, aby jak najlepiej wykorzystać swoją witrynę. Mówię o ustawieniu prawidłowego doctype, języka, metatagów, favicon, technik ładowania i SEO.

Wszystko, co może sprawić, że Twoja witryna będzie bardziej wydajna, bardziej dostępna i zapewni większą ekspozycję dla odbiorców i wyszukiwarek, a także innych usług i narzędzi. Treść dokumentu HTML również nie powinna być rozdęta. Wiedza o tym, kiedy używać semantycznych znaczników HTML, jak dodać wymagane atrybuty HTML i jak uniknąć głębokiego zagnieżdżania lub divitis, nie powinna być ignorowana, ale raczej wdrażana od samego początku projektu. Żaden profesjonalny programista nie zaczyna stosować najlepszych praktyk w połowie projektu, ale nawet pozornie podstawowe rzeczy, takie jak HTML, są często robione źle.

Ogólny projekt często decyduje o tym, jak organizujemy różne komponenty HTML. Programiści CSS ściśle współpracują z projektantami i nie każdy projektant używa tego samego narzędzia do dostarczania projektu. Znajomość Sketch, Photoshop, InVision lub Figma i umiejętność „pokrojenia” projektu to niezbędne umiejętności dla programistów CSS. Należy zawsze pamiętać, jak skonstruować element, aby można było jednocześnie zastosować projekt. Używanie dobrej konwencji nazewnictwa, takiej jak BEM lub OOCSS, powinno zapobiegać pisaniu nadętego kodu HTML lub nieutrzymanego kodu CSS.

JavaScript jest wszędzie

Niektóre komponenty powinny być interaktywne, takie jak modalne lub podpowiedzi. To często wymaga dobrego zrozumienia JavaScript, nie „głębokiego” JavaScriptu, ale zdarzeń JavaScript i obsługi DOM. Obsługa DOM może być trudna, ponieważ nie chcesz wyczerpywać zasobów użytkownika i powodować spowolnienia witryny lub, co gorsza, jej awarii i całkowitego braku odpowiedzi.

Świat JavaScript szybko ewoluuje i czasami wydaje się, że codziennie pojawiają się nowe frameworki i narzędzia. Ze względu na ogromną popularność JavaScriptu, pozostawanie w pętli ma kluczowe znaczenie, jeśli chcesz korzystać z najnowszych najlepszych praktyk i dostarczać użytkownikom końcowym jak najprzyjemniejsze wrażenia.

CSS

Odnosi się to również do CSS, chociaż wielu twierdzi, że nie ewoluuje w prawie takim samym tempie jak JavaScript. Jednak nowe funkcje, takie jak zmienne CSS, siatka CSS, a nawet Flexbox wymagają trochę czasu na opanowanie.

Do tego dochodzi obsługa przeglądarek, co może stanowić problem nawet dzisiaj. Twoja witryna może wyglądać jak milion dolarów w nowoczesnej przeglądarce, ale nie tak bardzo w starszych przeglądarkach. Flexbox może być obsługiwany w IE11, ale z drugiej strony może nie działać zgodnie z oczekiwaniami. Wiedza o tym, jak uniknąć tych problemów, jest częścią pracy programisty CSS.

Na szczęście społeczność jest bardzo pomocna, a witryny takie jak Flexbugs czy Gridbugs mogą zaoszczędzić dużo czasu.

Narzędzia, techniki i zasady CSS

Czasami mogliśmy polegać na narzędziach, takich jak programy uruchamiające zadania lub pakiety, takie jak Grunt, Gulp i webpack, które pomogą nam dostarczyć niezawodny kod. Możesz doładować swój kod linterami, minifikatorami, babel lub PostCSS, aby transpilować kod.

Następnie musimy wziąć pod uwagę różne czcionki, typografię, obrazy, ikony, czcionki ikon, animacje, przejścia i inne abstrakcyjne aspekty, które są częścią codziennych zadań programistów CSS. Każda funkcja ma swoją specyfikę, ograniczenia, problemy i rozwiązania. Im więcej funkcji i technik opanujesz, tym łatwiej będzie stylizować i wdrażać komponenty w swoim projekcie.

Istnieje wiele właściwości i wartości CSS i nie można wiedzieć wszystkiego. Na szczęście pomagają nam w tym nasze narzędzia, zwłaszcza edytory kodu i narzędzia programistyczne. Jednak nawet narzędzia nie mogą pomóc w rozwiązaniu problemów związanych z indeksem Z. Porażka to najlepszy sposób na naukę.

Powiedziałbym, że jest to szczególnie prawdziwe podczas pracy z CSS i dlatego:

Jeśli nigdy nie próbowałeś rozwiązać problemu z indeksem Z, nigdy nie poznałbyś kontekstu stosu. Jeśli nigdy nie próbowałeś przesłonić klasy Bootstrap, nigdy nie poznałbyś specyfiki. Jeśli nigdy nie próbowałeś rozwiązać problemu z pływakiem, nigdy nie poznałbyś modelu pudełkowego.

Czasami rozwiązanie jest proste, ale samo zadanie pytania jest trudne. W porównaniu z innymi językami nie możesz zapytać, dlaczego moja pętla nie działa. Aby rozwiązać problem w CSS, potrzebujesz pełnego kontekstu, a często jest to coś, czego wielu nie rozumie: kaskada .

Cascade to najlepsza funkcja w CSS i powinna działać dla Ciebie, a nie przeciwko Tobie. Niektórzy programiści obchodzą go, wymyślając niestandardowe podejścia, takie jak CSS-in-JS. Jeśli spakujesz swój CSS w enkapsulowanym środowisku, takim jak React, nie możesz go użyć nigdzie indziej. Wątpię, czy to jest podejście, którego oczekujesz od swojej skalowalnej platformy. Jeśli masz problemy z kaskadą, naucz się ją ogarniać, a potem naucz się ją oswajać.

Kiedy przygotowywałem ten artykuł, Max Bock pisał o sposobie myślenia CSS i to jest dokładnie to, co muszą zrobić programiści CSS. Programiści CSS myślą wewnątrz pudełka, przewidują modyfikacje treści i unikają stałych liczb, gdy tylko jest to możliwe, starając się pisać jak najmniej kodu bez zastępowania domyślnych wartości i kontekstu.

Dlaczego potrzebujesz programisty CSS?

Większość programistów frontend lub nawet full-stack może napisać kod CSS. Ale nie każdy z nich mógł naprawić każdy błąd CSS lub zaimplementować projekt bez zawiłego kodu HTML lub polegania na JavaScript tam, gdzie nie jest to konieczne.

Profesjonalny programista CSS dba o kod do ostatnich szczegółów, lubi tworzyć układy i komponenty, nawet te najbardziej skomplikowane i wie, jak rozwiązać każdy problem lub błąd.

Standardy kodowania CSS

Przed napisaniem jakiegokolwiek kodu, generalnie dobrze jest mieć pewne podstawowe zasady dotyczące pisania kodu. Programiści CSS powinni przestrzegać standardu kodowania — jest to niezbędne do utrzymania i skalowalności projektu.

Wybierz konwencję nazewnictwa, która będzie używana w całym projekcie. Wczesne ustalenie konwencji nazewnictwa może pomóc programistom w tworzeniu lepszego i bardziej zorganizowanego kodu. Może również pomóc wszystkim zaangażowanym w projekt zrozumieć strukturę komponentów i relacje między komponentami i elementami, czytając sam kod HTML.

Zdecyduj, jak obsługiwać wcięcia, typy selektorów, skrócone właściwości, jednostki w CSS. Na przykład unikaj używania jednostek pikseli, jeśli standard kodowania proponuje użycie jednostek rem. Każdy ma inny styl pisania/kodowania, ale jako profesjonalista musisz umieć przyjąć, a co ważniejsze, zrozumieć każdą koncepcję.

Implementacja projektu CSS

Przed przekształceniem projektu w kod należy poświęcić trochę czasu na zrozumienie każdej strony, układu i komponentu. Jeśli to możliwe, przeanalizuj każdą stronę, utwórz listę stron i komponentów i spróbuj znaleźć wzór.

Jeśli zauważysz komponent, który jest obecny na większej liczbie stron, powinieneś rozpoznać otaczające go środowisko i spróbować myśleć o nim jako o samodzielnym komponencie. Jeśli istnieją podobne komponenty, takie jak karty lub listy, możesz mieć odmianę tego samego komponentu. W ten sposób możesz ponownie użyć kodu HTML i napisać tylko trochę kodu CSS, aby wyglądał na zmodyfikowany.

Dobrym pomysłem jest również znalezienie wzorców w innych obszarach, takich jak typografia i odstępy. Czasami prowadzi to do posiadania klas pomocniczych, które mogą być używane w całym projekcie, a nie na poszczególnych stronach.

Uporządkuj swój kod CSS

Programiści CSS powinni uporządkować swój kod i stworzyć zrozumiałą strukturę dla każdego. Korzystając z narzędzi takich jak procesory CSS, programiści CSS powinni dokumentować proces generowania skompilowanego kodu.

W razie potrzeby programiści CSS mogą tworzyć przewodniki stylistyczne. Poradniki stylistyczne mogą być punktem odniesienia podczas tworzenia nowych stron lub decydowania o tym, jak podejść do istniejących. Radzę, aby przewodnik po stylu był dostępny na całym świecie dla całego zespołu, ponieważ często znacznie łatwiej jest podjąć decyzję, mając kontekst wizualny. Przewodniki stylów mogą zawierać palety kolorów, zasady typografii, standardy kodowania, a nawet strony statyczne. Nie ma ograniczeń poza budżetem i Twoją wyobraźnią.

Kod CSS w produkcji

Pisanie kodu CSS implikuje obsługę problemów z różnymi przeglądarkami, błędów, animacji, przejść, responsywności i stylów drukowania. Wiele z tych funkcji nie jest łatwych do zarządzania przez wszechstronnych programistów. Posunąłbym się tak daleko i powiedziałbym, że są to ogólnie najmniej lubiane zadania CSS i nie każdy programista wie, jak sobie z nimi radzić. Z drugiej strony wyspecjalizowani programiści CSS wiedzą (a przynajmniej powinni wiedzieć), jak tworzyć kod z myślą o każdym błędzie, przeglądarce i środowisku.

Korzystanie z nowoczesnych podejść jest jedną z dróg, ale nie należy ignorować obsługi starszych przeglądarek i respektowania ustawień użytkownika, takich jak ograniczenie ruchów.

Programiści CSS piszą również kod HTML i JavaScript. Oznacza to, że za dostarczanie zasobów odpowiada programista CSS. Deweloperzy CSS powinni być odpowiedzialni za ładowanie czcionek, wyodrębnianie krytycznego CSS, używanie odroczonego i asynchronicznego ładowania JavaScript oraz dostarczanie responsywnych obrazów.

Żadna z tych technik nie jest łatwa do wdrożenia i nie ma srebrnej kuli.

Co programiści CSS mogą dla Ciebie zrobić

Wszystko to wyjaśnia, dlaczego potrzebujesz dedykowanego programisty CSS. Oto tylko niektóre z najważniejszych rzeczy, którymi się zajmują:

• Upewnij się, że każdy członek projektu przestrzega standardu kodowania
• Wdrożyć projekt
• Uporządkuj kod
• Napisz kod
• Naprawić błędy
• Poznaj nowe techniki
• Popraw kod

Zawijanie

Zdecydowanie zbyt długo pytanie o istnienie i znaczenie roli twórców CSS-a skłaniało do niezbyt konstruktywnych i pożytecznych dyskusji. Spróbujmy się zgodzić i raz na zawsze uznać programistę CSS za właściwą rolę.

W swoim artykule The Great Divide Chris Coyier cytuje niektórych liderów technologii i większość z nich zgadza się, że powinien istnieć podział, powinna istnieć rola oparta na CSS, która nie wymaga znajomości nowoczesnych frameworków JavaScript. Może pomóc, jeśli wiesz więcej niż „tylko CSS”, ale rola powinna istnieć i powinna być akceptowana jako równa rolom opartym na JavaScript.

W końcu czy chcesz zostawić swój produkt w rękach wyspecjalizowanego profesjonalisty, który mógłby go dopracować do perfekcji, czy zadowoliłbyś się wystarczająco dobrym ?

Dalsza lektura na blogu Toptal Engineering:

• Jak podejść do animacji SVG w CSS