Modyfikacja kodu CSS – o czym warto pamiętać

Samodzielna modyfikacja kodu CSS nie jest skomplikowana, o ile znamy podstawowe zasady. Warto jednak znać kilka zasad, jak można zrobić to prawidłowo.

Lokalizacja – czyli, jak znaleźć odpowiedni kod CSS

Pierwszą sprawą jest zlokalizowanie kodu, który chcemy zmienić, możemy to zrobić w prosty sposób dzięki przeglądarce. Potrzebne do tego są narzędzia developerskie.

W większości przeglądarek internetowych (Chrome, Firefox itp.) możemy otworzyć tzw. narzędzia deweloperskie (Windows skrót F12). W tych narzędziach znajdziemy zakładkę nazywaną Inspektor lub Elementy. Następnie kilkamy prawy, przyciskiem myszy, na element, który chcemy zmienić i wciskamy opcję Zbadaj element (lub coś o podobnej nazwie). W panelu po prawej stronie zobaczy kod HTML oraz powiązany z nim CSS.

Na co zwrócić uwagę modyfikując kod CSS

Kopia zapasowa – zmiany w CSS mogą wpływać na wygląd całej strony. Zawsze warto utworzyć kopię zapasową oryginalnego pliku style.css przed wprowadzeniem zmian. Może to nawet być zapis w pliku .txt

Narzędzia do edycji – warto ułatwić sobie pracę korzystając z narzędzi do edycji CSS. Podkreślą one składnie na różne kolory, co pomoże nam w wygodny sposób wprowadzić zmiany.

Tablice CSS – jeżeli zaczynamy naszą przygodę z CSS, warto zwrócić uwagę na tablice CSS, które znacząco ułatwią nam pracę.

Testowanie – po wprowadzeniu nowego kodu warto dokładnie przejrzećm jak wygląda strona – również w wersji mobilnej. Może trzeba będzie dostosować wartości lub dodać dodatkowe selektory.

Przed edycją warto zadać sobie kilka pytań:

• Jaki selektor odpowiada za element, który chcesz zmienić,
• Jak wygląda obecny kod CSS?
• Gdzie jest osadzony, czy posiadamy motyw potomny?
• Jaki efekt chcemy osiągnąć naszymi zmianami?

Modyfikacje wprowadzane bezpośrednio w motywie

Jeśli edytujemy pliki motywu bezpośrednio, te zmiany mogą zostać utracone podczas aktualizacji motywu. Zdecydowanie warto rozważyć dodanie kodu w opcji Dostosuj motywu (sekcja własny CSS) lub w innym miejscu motywu potomnego. Ogólnie warto pamiętać, że wszystkie modyfikacje głównego motywu bez child theme nie są wskazane. Zawsze warto działać starannie i dokładnie, a wówczas z reguły wprowadzimy większość zmian, bez względu na wyjściowy wygląd naszego motywu.