11월 12일🐣
이제 클래스도 많이 쓰고, 이름을 지을때마다 뭐라고 써야되지라는 고민들이 생기고 있을때,
드디어 css설계에 대한 수업을 들었다. 다 살펴보고 본인의 철학에 맞는 설계방법으로 하라는데,
코딩에서 철학에 대한 고민을 하는 요즘이다.
OOCSS(객체지향형_Object Oriented CSS)
프로그래밍에 고려해야 하는 모든 기능을 사물로 보는것
(사람으로 비유, 이름, 나이, 가족관계 등등과 같은느낌)
1-1구조와 스킨의 분리
같은 형태의 ui에 스킨만 다르다면 구조와 스킨을 분리하여 조합한다.
구조: 레이아웃에 영향을 미치는 요소들(마진, 너비,높이,패딩등)
.btn1 {
width: 200px;
height: 80px;
font-size: 30px;
font-weight: bold;
}
.btn2 {
width: 200px;
height: 80px;
font-size: 30px;
background: black;
border: 3px dotted #fff;
}이런 경우라면. 같은 것들끼리 둘이 붙이고 다른것만 나눠준다.
.btn {
width: 200px;
height: 80px;
font-size: 30px;
}
.btn-close {
background: black;
border: 3px dotted #fff;
}
1-2. 컨테이너와 컨텐츠의 분리
컨텐츠의 스타일이 컨테이너에 종속되지 않도록 합니다.
즉, 컨텐츠의 스타일 선택자에 컨테이너의 클래스를 배제합니다
(그치만… 현업 스타일은 또 다르다…)
#main .btn {
width: 300px;
padding: 20px 10px;
margin: 10px;
font-size: 18px;
line-height: 1.5;
}
#main .general {
background-color: aquamarine;
color: black;
}
#main .warning {
background-color: azure;
color: blue;
}2.SMACSS(Scalable and Modular Architecture for CSS)
css 코드를 역할에 따라 구분을 한다.
베이스, 레이아웃, 모듈, 스테이트, 테마 로 나눈다.
각 역할에 대한 설명
- 베이스 - 전체적으로 사용되는 폰트 패밀리, 사이즈, 리셋
- 레이아웃 - 헤더, 메인 영역등의 큰 틀을 구성하는 것,
이 경우에는 어짜피 문서에 하나씩 밖에 없기 때문에 id를 쓴다.
- 모듈 - 레이아웃 안에 위치되는 모든 요소를 의미한다.
텍스트, 인풋, 버튼등등 보통 클래스로 나누어서 표기한다.
비슷한 경우에는 서브 모듈도 만든다
- 스테이트 - 기존 스타일을 덮어쓰거나 확장할 때 사용
(* 모듈과의 차이점: 자바스크립트에 의존한다. 자바스트립트를 필요할때 넣었다 뺐다할 수있음)
3.BEM
- id선택자와 요소 선택자를 권장하지 않는다.
- 클래스 선택자만 선택해서, 가중치 계산을 편하게 하기 위해서.
- 그래서 클래스 네이밍에 진심이다.
- 소문자를 사용하여 여러단어를연결하는 경우에는 하이픈을 사용한다.(케밥케이스)
** 이때 형태를 설명하는 용어가 아닌 의미를 가진 단어를 사용.
방법
1.블록: 어디서나 재사용 가능한 부품을 의미한다.
ex)error-red,hidden-txt
2.element: 블록을 구성하는 요소들로 블록에 종속된다.
그래서 블록의 클래스 이름을 상속 받는다, 이때 언더바 두개를 접두사로 한다.
element끼리는 중첩하지 않는다.
ex)errorlink(o), errorbtnlink(x), error-redlink(o)
3.modifier: 블록이나 element의 모습이나 상태 또는 움직임을 정의한다.
단독으로 클래스 이름을 사용하지 않고, 두번째 클래스 이름으로 사용한다.
언더바 하나로 연결하고, 두개 이상의 경우에는 하이픈으로 연결
ex) btn-move, btn-move_size-small
우선 이후에 취업하게 되면, 회사의 컨벤션을 따르게 된다고 한다.
하지만 지금 혼자공부하는 것들도 일정한 규칙을 가지고 사용할 수 있도록 이름을 정하고 있다.
협업할 수 있을때를 고려해서 사용이 익숙해질 수 있도록 하나하나 살펴봐야겠다.
