5 wskazówek w celu poprawy Twojego kodu CSS

Bardzo łatwo zauważyć jak wielki mamy bałagan w pliku CSS, kiedy chcemy coś zmienić. Ciągłe szukanie czegoś, poprawianie kolorów, marginesów i wymiarów w bałaganie jest czasochłonne, dlatego warto skupić się na stworzeniu poprawnego kodu.

W tym artykule przedstawię 5 porad, które pomogą Ci w napisaniu poprawnego i przejrzystego akruszu CSS.

1. Bądź zorganizowany

Podobnie jak we wszystkim innym, podczas pisania kodu trzeba być zorganizowanym. Zamiast wpisywać id i klasy gdzie popadnie, lepiej zachować spójną strukturę. To pomoże Ci utrzymać arkusz w porządku, dzięki czemu łatwo odnajdziesz to, czego szukasz. Deklaruj najpierw najbardziej uniwersalne elementy. Później będziesz mógł szybciej je edytować, ponieważ będą łatwe do odczytania. Używaj struktury, która będzie łatwa dla Ciebie, np.

• » główne elementy
• » linki, odnośniki
• » główna struktura layoutu
• » kolejne struktury layoutu
• » elementy formularzy
• » inne

2. Tytuł, data, autor i kolory

Niech inni wiedzą kto i kiedy napisał ten arkusz. Zostaw także informację jak można się z Tobą skontaktować w przypadku gdyby ktoś miał pytania. Jest to szczególnie przydatne przy projektowaniu szablonów i styli.

Chwila… o co chodzi z tymi kolorami? Z biegiem czasu zauważyłem, że dodanie prostej listy kolorów w moim akruszu stylów jest niezwykle przydatne, zarówno podczas początkowego rozwoju jak i w trakcie dalszej edycji. Oszczędasz w ten sposób czas na otwarcie Photoshopa i pobranie odpowiedniego koloru.

Jeśli potrzebujesz kodu na kolor, którego wcześniej użyłeś, to po prostu przewiń to góry i skopiuj go.

3. Działaj na jednym arkuszu

Na pewno wiele razy widziałeś strony oparte na kilku arkuszach styli. Jest to bardzo nieporęczne i czasochłonne jeśli chcesz później coś zmienić. Łatwiej odnaleźć coś w jednym niż przeszukiwać 3 różne pliki. Dlatego jeżeli cenisz sobie swój czas (jak i innych) to pracuj na jednym arkuszu CSS.

Jest mały wyjątek… Jeśli chcesz, aby Twoja strona działała poprawnie na różnych przeglądarkach to często konieczne jest stworzenie drugiego akruszu, np. dla przeglądarki IE 6.

4. Nazwy elementów

Nazywając poszczególne elementy w arkuszu, zawsze pamiętaj o przyszłej edycji. Być może kiedyś będziesz musiał zmienić miejsce jakiegoś elementu. Nie powinno się wtedy zmieniać nazwy elementu, ale tylko samo jego położenie.

Jedną z zalet CSS jest możliwość przerobienia wyglądu stronki bez edycji plików html/php. Zawsze nazywaj elementy bazując na tym czym są, a nie jak wyglądają.

5. Nie powtarzaj się

Wykorzystaj atrybuty ilekroć jest to możliwe przez grupowanie elementów, zamiast deklarować style ponownie. Na przykład: jeśli elementy h1 i h2 mają taką samą wielkość czcionki, kolor itp., pogrupuj je używając przecinka.

Korzystaj również ze skrótów, gdziekolwiek jest to możliwe. To wszystko:

możesz zastąpić tym:

Bardzo ważne jest, żebyś zrozumiał kolejność, w jakiej są interpretowane te skróty: góra (top), prawa (right), dół (bottom) i lewa (left). Wyobraź sobie tarczę zegara, idąc zgodnie z ruchem wskazówek, zaczynając od 12.

Jeśli atrybuty góra i dół lub lewa i prawa są takie same, wystarczy użyć:

To ustawi magrinesy góra i dół na 15px, a lewy i prawy na 3px.

Wskazówki okazały się przydatne?
Napisz to w komentarzu!