갑자기 일이 터지는 바람에 정리.. 드디어 밀린 업무를 처리하고 글을 쓰게 되었다.
오늘은 css 정리에 대해 써보려고 한다.
프로젝트를 진행하면서 알게 된 사실!
코드 정리의 중요성
많이 듣긴 했지만 그냥 그런가 보다 하고 넘겼지만 다른 팀 동료분이 작성한 코드를 보며 이해 안 된다고 가서 물어보는 나를 보며
아 어쩌면 내가 짠 코드도 다른 분들도 보기 힘들 수 있겠구나...
그런 어떻게 짜면 보기 쉽고 명확하게 나올 수 있을까??
코드를 작성할 때 가장 중요한 것은 누가 봐도 알기 쉽게 짜야 한다는 것!
여기 회사 개발자들은 본인 일에 본인만 알아볼 수 있게 a, aa, b, bb 이런 식으로 변수를 선언하던데.. 이해할 수가 없다.. 아무리 자기가 만든 코드라지만 이러면 나중에 본인 말곤 유지 보수가 힘들 텐데.. < 퇴사한 상사분이 이런 식으로 해서 찾느라 애먹었다.. ㅜ
그래서 오늘은 나만의 기준으로 코드 작성 룰!에 대해 작성해보려 한다!
[현재 css를 가장 많이 다루기에 css 기준!]
프로젝트를 진행하면서 제일 중요하다고 느끼는 부분에 대한 작성이며, 지극히 개인적이고 경험을 토대로 작성했으며, 개발자 누구나 봐도 알 수 있으며, 유지 보수가 용이하게 만드는 것이 목표이다!
1.class_neme
제일 중요하고 유지 보수를 위해 해당 태그를 css 선택자는 명확한 의미를 전달할 수 있도록 작명한다.
웬만하면 소문자, 숫자로 작성하고 = 여러 단어의 조합은 "-"보단 "_"를 사용하여 복사에 용이하게 만든다.
예) #login_wr .login_id .login_pw < 로그인 페이지 안에 로그인 아이디 및 패스워드
2.컨테이너, 내용 분리
공통적인 구조를 설정하며 외형변경은 추가적인 class 설정한다.
예)
button class="btn next_Btn">다음
button class="btn back_btn">뒤로가기
3.확장형
스타일 재사용을 위한 요소로 레이아웃 요소 안에 들어가는 더 작은 부분에 용이하게 작성
.title {...}
.sub_title {...}
4.컬러변수
컬러는 다양하게 쓰지 않고 제한된 컬러로 쓰는 게 더 깔끔하며
혹시나 유지 보수 시 리디자인으로 컬러를 변경 시 한 번에 변경할 수 있게 세팅한다.
:root{
--maincolor:#8cc63f;
--subcolor:#404040;
--txtcolor:#333333;
--bordercolor:#dddddd;
}
5.css 작성순서
형태 및 위치:display, position, float..등
구조 : width, height, margin...등
외형 : background, border, color...등
글자 :font-size, text-align...등
내용,순서,에니매이션 : content,z-index
6.css파일 분할
파일을 나누는 이유는
단순하게 css 찾는 시간을 줄이고 필요한 영역에 필요한 부분만 수정 가능하도록 유도하기 위함이다.
공통은 common.css > btn, input, table.. 등
레이아웃 layout.css > login, main_wr, sub_wr, menu.. 등
스타일셋팅 style.css > 레이아웃 외 디자인 > filebox, txtForm , control_wr
라이브러리 커스텀용 note.css > 기존 라이브러리는 건들지 않고 변경시 재작성
/반응형 및 하이브리드 일때/
혹시나 보여지는게 다른 부분외 미디어쿼리를 적용할때
웹용 pc.css
모바일 moble.css
class 많이 쓰면 html도 지저분하고 코드도 보기 힘들어 안좋다는 얘기를 듣고 [학원 선생님 피셜]
.control_wr .center > ul > li > ul > li 이런식으로 class 없이 썻는데 단점이 있었다...
바로 중간에 form 나 ul까지만 통으로 옮길 경우 부모 선택이 없어 css가 상속되지 않는고 틀어지는 경우가 빈번했다.
이럴 경우에는 ul큰 틀에 class 를 지정하고 set 라고 주석을 달아둔다!
/검색 복사시 아래 searchbox 전부 복사/
<ul class="searchbox"> <li>기간</li> <li> <input type="text" class="searchinput"> </li> <li>~</li> <li> <input type="text" class="searchinput"> </li> <li> <select name="" id="" class="select_search"> <option value="">선택하세요.</option> <option value="0">선택1</option> <option value="1">선택1</option> <option value="2">선택1</option> <option value="3">선택1</option> </select> </li> <li> <button class="btn searchbtn">검색</button> </li> </ul> <style> .searchbox {} .searchbox > li {} </style>
※ 만약 특정 페이지에 수정이 생길 경우 그 페이지 최 상단 calss를 맨 앞에 추가한다.
예).control_wr .searchbox**
이렇게만 나눠도 어느 정도 정리가 되며 알아보기 싶고 추가적으로
css 파일 내 주석을 달아놓으면 파일 찾는데 조금 더 편하게 가능하다.
어떻게 쓰던 경험상 주석만 잘 달아도 반은 먹고 들어가는거 같다. 👍
하지만.. 이것도 나의 생각
어떨지 모르겠지만 아직 몰라서 찾아오는 분은 없었다.
다른 분들이 이 글을 보고 조금이나마 도움이 되었으면 좋겠다!
