일단 CSS의 코딩 규약이 결정되면 싸울 거야.

이 글은 도요타 전문대학 Advent Calendar 2021 11일째 되는 글이다.
개시하다
나의 프로젝트는 인코딩 규정이 개선되기 전에 진행된다.
아직 설립된 지 얼마 되지 않은 프로젝트이기 때문에 개발 과정에서 결정된 부드러운 규칙을 공고히 하기 위해 코딩 규약의 느낌을 정의한다.
고정 규칙 없이 개발하는 건가요...이렇게 토하는 건 잘 알고 있으니 건드리지 마세요.
코딩 규약을 결정할 때는 여러 프로젝트 구성원이 모여 상의하면서 결정한다.
하지만 모두가'이 규약이면 된다'고 생각하고 그 다음에 규약을 추가하기 때문에 이해될 때까지 협상하는 경우도 있다.
이 글에서는 CSS에서 정한 싸움꾼에 대한 토론이 일어났을 때의 이야기를 들려준다.
※ 실제로 싸움이 벌어진 것은 아닙니다.원격회의라 화면만 치면서 얘기만 했다.
문제가 있는 규칙
이번 문제는 속성의 선언 순서다.아래 두 파벌로 나뉘었다.

구글 코딩 규약대로 알파벳순으로 쓰면 돼요!파벌

시각 순서가 이해하기 쉬워요!파벌

자주 듣는 질문이네요.
내 프로젝트는 기본적으로 Google의 코딩 규약을 바탕으로 개발되었다는 것을 잊었습니다.그래서 첫 번째 파벌이 생겼다.
각자의 이유는 이런 느낌.
알파벳순 파벌

실사자의 묘사 순서의 동요를 없애라!

새로운 종목에 참가하는 사람들은 순서를 특별히 기억하기 어렵다!

목적 속성을 쉽게 찾을 수 있습니다!

시각 파벌

알파벳 순서가 징그러워!width와 Height를 분리해서 어떻게 썼어요!!

같은 속성으로 묶을 수 있어 쓰기 쉬워요!

뭐, 이것도 늘 하는 말이지.
그래서 마지막에 30분을 말하니 다음과 같은 규약이 되었다.
본 항목의 규정
CSS 속성은 다음 순서로 선언됩니다.
같은 소속 속성은 자모순으로 선언한다.

상자의 속성(display, margin 등)
특히 상자의 속성은 다음 순서에 따라 성명한다.
1-1. display
1-2. 위치 속성(position, top 등)
1-3. margin,padding
1-4. 크기 속성
1-5. 기타 속성

경계와 관련된 속성(예를 들어border,border-radius 등)

색상과 관련된 속성(background-color, 색채 등)

글꼴 속성(font-size, font-family 등)

기타 속성

어쨌든 반은자주 사용하는 속성만 순서가 있습니다.
새 멤버가 기억하는 것은 적고 가능한 한 시각적 순서에 따라야 한다.
다짜고짜로 느껴서는 안 되지만 어쨌든 이런 싸움은 끝났다.
총결산
솔직히 나는 어느 것이 정확한지 모르겠다.
마지막에 뭐가 우선일 것 같아서요.CSS를 전혀 모르는 사람이 볼 수 있는 코드라면 시각적 순서가 이해하기 쉽다.
겸사겸사 말씀드리지만, 저는 알파벳 순서파입니다.