Beautifier CSS - sformatuj CSS w przeglądarce
CSS w stanie minified to klasyk produkcyjny - `app.min.css` o szerokości kilometra. Beautifier używa Prettiera z parserem postcss (ten sam, na którym stoi PostCSS, Autoprefixer, Tailwind). To samo, co `prettier --write style.css`.
Tryb Grzeczny: każda reguła w bloku na osobnej linii, średniki na końcu, wcięcie 2 spacjami. Agresywny (js-beautify) robi to samo + wymusza spacje wokół wszystkich operatorów. Tylko wcięcia poprawia same wcięcia, bez ruszania struktury reguł.
Akceptuje `.css`. Dla SCSS-a, LESS-a mamy osobne landingi z tymi samymi defaultami, ale z parserami obsługującymi zagnieżdżanie i zmienne.
Jak to działa
- Wybierz tryb (Grzeczny / Agresywny / Tylko wcięcia) lub zostaw domyślny.
- Wklej kod w lewy panel albo użyj "Wczytaj plik".
- Dostosuj ustawienia (koło zębate): wcięcie, szerokość, cudzysłowy, średniki.
- Kliknij Sformatuj - pierwszy raz potrwa chwilę (libki ładują się leniwie).
- Po prawej dostajesz wynik z syntax highlightingiem - kopiuj, pobierz albo otwórz w nowej karcie.
Kiedy się przydaje
Pięć sytuacji dla CSS:
- Pretty-print z DevTools. Skopiowałeś computed styles ze styles inspector i to jest brzydkie.
- Minified bundle. `tailwind.min.css` ma 1.5 MB i jest jedną linią - beautifuj fragment dla debugowania.
- Generated CSS. `emotion`, `styled-components` w CSS-in-JS zwracają nieformatowany output.
- CSS-Modules. Jeśli używasz `*.module.css`, formatowanie tych plików ujednolica je z resztą stylów.
- Legacy CSS. Przejmujesz projekt z 2015 - mieszanka stylów, beautify wszystkie pliki.
Pytania i odpowiedzi
Zachowuje strukturę: `@media (min-width: 768px) { ... }` zostaje sformatowany z wcięciem dla wewnętrznych reguł. Wewnątrz blok jest tak samo formatowany jak na top-levelu.