Porządkowanie kodu i struktury plików

Porządkowanie kodu i struktury plików

Masz już działającą stronę, przetestowaną pod kątem wydajności i dostępności.
Zanim jednak uznasz projekt za ukończony, warto zadbać o czystość kodu i przejrzystą strukturę plików.
To ułatwia dalszy rozwój projektu, a także robi świetne wrażenie, gdy pokazujesz go klientowi lub rekruterowi.

1. Usuń nieużywany kod

• Usuń zakomentowane fragmenty kodu, które miały „zostać na wszelki wypadek”
• Usuń nieużywane klasy CSS – szczególnie te, które powstały w trakcie testów
• Sprawdź, czy nie masz pustych <div> albo zduplikowanych sekcji

Jeśli korzystasz z edytora z wyszukiwarką (np. VS Code), użyj funkcji „Find in files” i sprawdź, czy dana klasa/tag rzeczywiście jest używana.

2. Uporządkuj strukturę folderów i plików

Typowy, czytelny układ dla prostego projektu może wyglądać tak:

/project-folder
│
├── index.html
├── about.html
│
├── /css
│   ├── main.css
│   └── components.css
│
├── /js
│   └── script.js
│
├── /images
│   └── logo.webp
│
├── /fonts
│   └── inter.woff2

Jeśli Twój projekt ma wiele komponentów, warto rozdzielić CSS na pliki:

• reset.css – reset stylów (np. Normalize)
• variables.css – zmienne kolorów, fontów, spacingu
• layout.css – układy ogólne: header, footer, siatka
• components.css – style dla kart, przycisków, formularzy

Dzięki temu łatwiej znaleźć błędy i rozwijać projekt w przyszłości.

3. Formatuj kod

Bez względu na to, czy pracujesz sam, czy w zespole – czytelność kodu ma ogromne znaczenie.
Zadbaj o:

• wcięcia – 2 lub 4 spacje (spójnie w całym projekcie)
• nawiasy klamrowe zawsze w nowej linii lub zgodnie z wybranym stylem
• konsekwentne nazewnictwo klas (np. BEM)
• puste linie między większymi blokami kodu

Jeśli korzystasz z VS Code – zainstaluj rozszerzenia typu Prettier, które automatycznie formatują kod.

4. Optymalizuj zdjęcia i pliki statyczne

Przed publikacją warto zoptymalizować zawartość katalogu /images:

• przekonwertuj JPG/PNG do WebP (lżejszy format, lepsza jakość)
• zmień nazwy plików na opisowe, np. team.jpg → team-photo.webp
• usuń nieużywane zdjęcia i zasoby

Możesz użyć darmowych narzędzi online, np. squoosh.app.

5. Dokumentacja i komentarze

Warto zostawić krótkie komentarze w kodzie – nie za dużo, ale tam, gdzie coś może być nieoczywiste:

/* Grid layout for 3 cards in offers section */
.offers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

Jeśli tworzysz projekt na GitHub lub do portfolio – rozważ dodanie pliku README.md z krótkim opisem: co zawiera projekt, jak go uruchomić, czego się w nim nauczyłeś.

Ćwiczenie

Wróć do swojego projektu i wykonaj checklistę:

• ✅ usuń nieużywane klasy, komentarze i sekcje
• ✅ sprawdź strukturę folderów – czy jest logiczna i czysta
• ✅ podziel CSS na pliki lub sekcje, jeśli kod jest duży
• ✅ zoptymalizuj obrazy (np. do WebP)
• ✅ sformatuj cały kod (HTML, CSS, JS)

Wniosek

Porządek w kodzie to nie detal – to znak profesjonalizmu.
Przejrzysty projekt łatwiej rozwijać, przekazać komuś innemu, pokazać na rozmowie rekrutacyjnej lub wdrożyć na produkcję.
Zadbaj o każdy szczegół – to naprawdę się opłaca.