Utilore

CSS 정렬

한 줄로 뭉쳐 온 스타일시트라도 붙여넣으면 다시 읽힙니다. 선언마다 줄을 나누고, 중첩 블록에는 그만큼의 들여쓰기를 주며, 주석은 있던 자리에 둡니다.

코드는 이 페이지를 벗어나지 않습니다. 정렬은 브라우저에서 이뤄집니다.

사용 방법

  1. 첫 번째 칸에 CSS를 붙여넣습니다.
  2. 들여쓰기를 고릅니다. 두 칸, 네 칸, 또는 탭.
  3. 결과를 복사합니다. 「압축」을 누르면 다시 줄일 수 있습니다.

알아두면 좋은 점

성긴 포매터가 스타일시트를 망치는 이유

세미콜론과 중괄호마다 자르는 방식은 잘 도는 듯 보입니다. 그러다 파일에 content: "a;b"가 나오거나 url() 안에 SVG를 담은 데이터 URI가 등장하면 무너집니다. 둘 다 실제 CSS에서 흔한 표기입니다. 이 도구는 한 글자씩 읽기 때문에 따옴표 안의 문자열과 주석이 첫 문장부호에서 잘리지 않고 통째로 옮겨집니다.

쓸모 있는 중첩 표시

미디어 쿼리, supports 블록, 요즘의 중첩 규칙은 각각 한 단계씩 깊어지고 들여쓰기가 그것을 따라갑니다. 최상위 규칙 사이에는 빈 줄을 넣기 때문에, 2000줄짜리 스타일시트도 글자 벽이 아니라 블록 목록으로 읽힙니다.

자주 묻는 질문

주석이 보존되나요?

보존됩니다. 홀로 있는 주석은 자기 줄에, 선언 뒤에 붙은 주석은 그 선언과 함께 놓입니다.

제 CSS를 바꾸나요?

속성의 이름을 바꾸거나 순서를 바꾸거나 지우지 않습니다. 움직이는 것은 공백뿐이며 동작은 이전과 똑같습니다.

코드가 서버로 가나요?

아니요. 모두 브라우저에서 돌기 때문에 비밀 유지 대상 프로젝트의 스타일시트도 컴퓨터에 남습니다.

SCSS나 LESS는요?

중첩 규칙과 주석은 잘 정렬됩니다. 변수와 믹스인, 제어 구문은 해석하지 않고 그대로 통과시킵니다.

관련 도구