CSS może być niezwykle potężnym językiem znaczników dla projektantów.
Jednak CSS, który jest produkowany, jest tak dobry, jak zasady, za którymi stoi projektant tworzący kod.
Chociaż możesz myśleć, że każdy może wykręcić CSS, istnieje duża różnica między pisaniem CSS a tworzeniem najwyższej klasy CSS.
Aby upewnić się, że jesteś na dobrej drodze, oto osiem zasad CSS, które każdy projektant stron internetowych powinien przestrzegać.
Jeśli zamierzasz zainwestować czas w kodowanie CSS, warto poświęcić trochę czasu uprawomocnić kod, który tworzysz. Jednak nigdy nie przestaje mnie zadziwiać, ilu projektantów pomija ten ważny krok. Sprawdzanie poprawności kodu pozwala usunąć wszelkie problemy i upewnić się, że będzie dobrze działać dla odwiedzających.
Oprócz sprawdzania poprawności pliku CSS należy również sprawdzić poprawność plików HTML lub XHTML. Przed sprawdzeniem poprawności tych plików upewnij się, że masz trochę czasu na zadeklarowanie poprawnego kodu DOCTYPE HTML lub XHTML. Zgłoszenie Twojego DOCTYPE może wydawać się przyziemnym szczegółem, ale nie mogę zliczyć, ile miałem dyskusji z sfrustrowanymi projektantami, którzy nadal mieli problemy z projektem, tylko po to, by dowiedzieć się, że to dlatego, że zadeklarowali przestarzałą DOCTYPE (lub nie zadeklarował w ogóle DOCTYPE).
Niezależnie od tego, czy pracujesz nad samym projektem, czy z zespołem projektantów, ważne jest udokumentowanie tworzonej pracy. Prawdopodobnie zrozumiesz, dlaczego jest to ważne w kontekście zespołu projektowego, ale możesz zastanawiać się, dlaczego miałoby to znaczenie, jeśli pracujesz nad projektem solowym. Cóż, zawsze istnieje szansa, że twój solowy projekt ostatecznie przekształci się w projekt grupowy, a jeśli tak się stanie, znacznie łatwiej będzie mieć dokumentację pod ręką, niż próbować ją cofnąć i stworzyć. Jednak nawet w przypadku, gdy Twój projekt pozostanie programem jednoosobowym, możesz być zaskoczony, jak przydatna jest dokumentacja, gdy zdecydujesz się na ponowne przyjrzenie się projektowi, nie oglądając go przez rok.
Jeśli chodzi o tworzenie dokumentacji dla kodu CSS, naturalnym impulsem większości projektantów jest dodanie go bezpośrednio do kodu, umieszczając go pomiędzy / * i * /. Podobnie jak wiele zasad na tej liście, nie ma niczego technicznie niepoprawnego w przyjęciu takiego podejścia. Jednak dodanie komentarzy bezpośrednio do kodu CSS zwiększy rozmiar pliku, co z kolei może wydłużyć czas ładowania i spowolnić ogólną wydajność witryny. Jeśli poważnie myślisz o napisaniu kodu CSS na najwyższym poziomie, powinieneś dokumentować swój kod, ale w oddzielnym pliku.
Chociaż szczerze wierzę, że skuteczniejsze jest dokumentowanie w osobnym pliku, wiem, że istnieje mnóstwo plików, które po prostu nie zgadzają się z tą praktyką. Jeśli nie chcesz dokumentować w osobnym pliku, najlepszą rzeczą, jaką możesz zrobić, to użyć kompresora CSS (w rzeczywistości, nawet jeśli zdecydujesz się użyć osobnego pliku do dokumentacji, możesz nadal korzystać z kompresora CSS). Możesz tego użyć Kompresor CSS z Galerii dysków CSS lub po prostu wyszukuj w Google, aby znaleźć alternatywny kompresor CSS.
Mimo że hacki stały się akceptowalną praktyką dla wielu osób w społeczności CSS, nie oznacza to, że "hakowanie CSS" jest zasadą, którą powinieneś przestrzegać. Problem z takim podejściem do projektowania polega na tym, że celowo poszukujesz skomplikowanego rozwiązania problemów. Choć może się wydawać, że jeden lub dwa hacki od czasu do czasu nikogo nie skrzywdzą, wchodząc w sposób "hakowania", wszelkie napotkane problemy mogą mieć negatywny wpływ na ogólną mentalność projektową.
Unikanie hacków jest poradą, którą eksperci od pewnego czasu rozdają. Możesz wrócić do 2003 roku i to zobaczyć Peter-Paul Koch (który jest utalentowanym programistą i autorem) od jakiegoś czasu ostrzegał projektantów przed skutkami hacków CSS: "Potwór złożoności ponownie się pojawił, w samym centrum nowoczesnego rozwoju sieci. W dzisiejszych czasach nie objawia się on jako stół bez końca, ale jako nieskończenie skomplikowany hack CSS. "
Ponieważ elementy div zapewniają wysoki poziom elastyczności, można je łatwo nadużywać. W rzeczywistości problem ten stał się tak powszechny wśród projektantów, że społeczność CSS stworzył własny termin oznaczający tę kwestię: divitus. Aby uniknąć padnięcia ofiarą tego stanu, zanim automatycznie użyjesz znacznika div, powinieneś zawsze zadać sobie pytanie, czy istnieje rzeczywisty znacznik HTML, który wykona zadanie za Ciebie. Na przykład, zamiast tworzyć wiele nagłówków div, dlaczego nie używasz znaczników nagłówków HTML, które są już dostępne, takich jak H1 i H2?
Gdy zaczniesz brać pod uwagę kwestię div, szybko zobaczysz zalety używania odpowiedniego znacznika HTML zamiast automatycznego tworzenia nowego elementu div. Nie tylko może to zmniejszyć ilość kodu, który musisz utworzyć (co pozwoli zaoszczędzić czas, a także zmniejszyć czas wczytywania Twojej witryny), ale także nadać kodowi bardziej logiczną strukturę.
Jeśli zapytasz nowego lub niedoświadczonego projektanta o to, jak zdecydują się nazwać swoje zajęcia, mogą powiedzieć, że to naprawdę nie ma znaczenia. Chociaż jest to prawdą techniczną, jest to bardzo krótki widok na nazywanie klas CSS. Chociaż istnieją projektanci, którzy należą do kategorii nie dbających o nazwy klas CSS, istnieją również projektanci, którzy myślą o swoich nazwach klas, ale w rzeczywistości podejmują niewłaściwe podejście.
Ponieważ nie chcę po prostu zbić cię z głowy teoretycznymi przykładami, pozwól mi wyjaśnić to konkretnie. Załóżmy, że tworzysz klasę do kontrolowania jednego z pól na twojej stronie. Pudełko będzie znajdować się u dołu strony, będzie zawierało komentarze od czytelników i użyjesz CSS, aby nadać mu brązowe tło i kontrolować dopełnienie. Zamiast nazywać to .tan-box (co zrobi wielu projektantów o dobrych zamiarach), nazwijmy go angl.com. Powód, dla którego .comment-box jest lepszą nazwą klasy niż .tan-box, to dlatego, że jeśli zdecydujesz się zmienić kolor tła na niebieski w dół drogi (lub zdecydujesz się przenieść pole z dolnej części strony na inny obszar) , nie będzie mylić ciebie ani żadnego innego projektanta, który przegląda CSS dla tej strony.
Chociaż skrót może być mylący dla projektantów, którzy dopiero zaczynają pisać swój własny kod CSS, kiedy przyzwyczaisz się do stylu stenografii, staje się to jedną z najbardziej efektywnych praktyk, które możesz zastosować jako projektant .
Istnieje wiele korzyści z używania skrótów. Po pierwsze, zmniejsza to rozmiar twoich plików, co skróci czas ładowania Twojej strony. Ponadto ułatwia nie tylko organizowanie kodu, ale także ułatwia wprowadzanie zmian w kodzie w przyszłości. Kiedy zaczniesz dostosowywać się do stenogramu, powinieneś również zacząć pisać kod w jednym wierszu (zamiast rozrzucać deklaracje na wiele linii).
Jako projektant jesteś o wiele bardziej technicznie nastawiony niż ktokolwiek inny w głównej populacji. Ponieważ jesteś częścią mniejszości, która żyje i oddycha technologią, istnieje wiele nawyków, których większość ludzi nigdy nie myślała. Na przykład, prawdopodobnie zszedłeś ze swojej drogi, aby wyeliminować jak najwięcej z "papierowego szlaku" w swoim życiu. Należy jednak pamiętać, że większość populacji nadal drukuje rzeczy regularnie. Chociaż prawdopodobnie tagujesz element z del.icio.us, gdy chcesz go zachować do późniejszego wykorzystania, przeciętny użytkownik Internetu wypisze tę samą stronę.
Ponieważ ludzie wciąż drukują informacje z Internetu, ważne jest, aby używać CSS, aby drukarka była przyjazna dla treści . Odwiedzający docenią wszystkie prace, które włożyliście w stworzenie pięknego layoutu odwiedzanej strony internetowej, ale kiedy zdecydują się wydrukować stronę z tej strony, docenią was jeszcze bardziej, gdy zdadzą sobie sprawę, że ich wydruk zawiera tylko tekst, który chcą (i żadna z niesamowitych grafik, które wyglądają świetnie na ich komputerze, ale zmarnują tonę tuszu z ich drukarki). Ponieważ CSS sprawia, że bardzo proste jest zapewnienie, że treść jest poprawnie sformatowana po wydrukowaniu, nie ma wymówki, aby prawdziwy projektant zaniedbał ten etap procesu projektowania.
Możesz myśleć, że ta ostatnia zasada brzmi banalnie, ale jest to prawdopodobnie najważniejsza z całej listy. Jeśli chcesz być najlepszym projektantem, musisz upewnić się, że zawsze pracujesz nad rozszerzeniem swojej wiedzy o CSS . Na szczęście jest to łatwe do zrobienia, jeśli masz chęć i wolę do kontynuowania edukacji CSS. Podczas gdy kontynuowanie nauki może być trudnym zadaniem dla osób w wielu branżach, które nie mają charakteru technicznego, ponieważ Internet jest dosłownie podstawą CSS, ilość darmowych zasobów, z których można się nauczyć, jest dosłownie nieograniczona. Jeśli uważasz, że przesadzam, po prostu wpisz "CSS" w Google, a zobaczysz, że istnieje 483 000 000 wyników do przeglądania.
Oprócz uczenia się z zasobów internetowych (i drukowania zasobów, jeśli wolisz), można się wiele nauczyć od innych projektantów CSS. Niezależnie od tego, czy analizujesz ich pracę, słuchasz rad, które przekazują online, czy rozmawiasz z nimi w sytuacjach osobistych, możesz zyskać dużą wartość poprzez interakcje i potencjalną współpracę z innymi projektantami, którzy są zobowiązani do przestrzegania zasad na najwyższym poziomie CSS projektuje i produkuje niesamowite dzieła.