CSS 설계 기법 😭
웹 페이지에 스타일을 입히기 위해 작성하는 CSS 에는 설계기법이 존재한다.
이는 반드시 지키라는 사항이 아니며, 사람마다, 그룹마다, 회사마다 선호하는 방식이 다를 수 있다.
현재 내 수준에서는 이러한 방법의 존재와 느낌을 알고, 직접 손코딩을 통해 불편했던 부분을 개선하는 것이 좋아보인다.
배운내용 + 약간의 리서치 + 나의 이해 -를 기반으로 작성한다.
앞으로 말하게 될 방법들 모두 모듈기반(?)을 전제로 한다.
😁 간단히 모듈기반을 맛만 봐보자.
-
프로젝트가 거대해지면 거대해질수록 무언가 사용을 했던 녀석이 또 필요해지는 순간이 반.드.시 올테고, 이 때는 기존의 '그 무엇' 의 재사용이 반드시 고려되어야 한다.
-
또한 유지보수의 측면을 생각해보자. 무언가 수정할 부분이 생겼고, '그 무엇' 과 관련된 녀석들이 엄청 많다고 가정하자. 이 때 우리는, 빠르게 '그 무엇' 을 찾아내야하고(직관적으로), 다른 녀석들은 내버려두고 '그 무엇' 만 고칠 수 있는(알아서 다른 녀석들도 고쳐지도록) 환경세팅을 해야한다.
1. OOCSS (Object Oriented CSS)
레고처럼 여러가지 모듈을 만들어서 조합하도록 하는 방법론이다.
그리고 두 가지의 조건이 있다.
1. 구조와 스킨의 분리가 필요하다.
2. 컨테이너와 콘텐츠의 분리가 필요하다.
구조 : 변경시에 다른 녀석들을 침범하거나 영향을 미치는 스타일.
width, height, display, padding, margin
스킨 : 변경시에 다른 녀석들을 침범하거나 영향을 미치지 않고, 자신을 꾸미는 스타일
color background border
컨테이너 : 영역정도로 생각한다. 보통 의미적으로 구분을 짓거나(section등으로), 내부 요소들의 정렬을 위해 잡는 영역. 전자의 경우로 생각하는 것이 바람직하다.
콘텐츠 : 말 그대로 컨텐츠! 컨테이너 안에 무수히 많다.
<button type="button" class="btn"></button>
<button type="button" class="btn btn-close"></button> /* 구조 */
.btn {
width: 200px;
height: 80px;
font-size: 30px;
font-weight: bold;
}
/* 스킨 */
.btn-close {
background: black;
border: 3px dotted #fff;
color: #fff;
}1번 규칙이 잘 적용된 사례이다.
<main id="main">
<button type="button" class="btn general">기본 버튼</button>
<button type="button" class="btn warning">취소 버튼</button>
</main> #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번 규칙이 지켜지지 않은 모델이다.
컨텐츠의 스타일 선택자에 컨테이너의 클래스를 배제는것이 필요해보인다.
그러나, 소위 말하는 타고타고 들어가는 방식이 아니기에 적용이 되지 않을 수 있다.
2. SMACSS (Scalable and Modular Architecture for CSS)
CSS코드를 역할에 따라 분리합니다😀
역할목록🧾
1. 베이스
2. 레이아웃
3. 모듈
4. 스테이트
5. 테마
2.1 베이스
프로젝트의 표준 스타일을 정의한다.
font-family, font-size, reset, img공통 스타일 정도가 있다.
2.2 레이아웃
헤더, 메인영역, 푸터, 사이드 바와 같은 웹사이트에서 큰 틀을 구성하는 모듈에 관한 규칙이다. 대부분 페이지에 몇개 존재하지 않기 때문에 ID 선택자를 사용하기도 한다.
2.3 모듈
레이아웃안에 배치되는 모든 요소를 의미한다.
반복되는 요소들이기 때문에 ID 선택자를 사용하지 않으며, 요소 선택자의 사용을 최소화합니다.(자식 요소에만 적용)
비슷한 모듈인데, 스타일이 조금 다를 경우 서브클래스를 만듭니다.
(btn-small, btn-long 등등)
<a href="" class="btn btn-small btn-long">아이디/비밀번호 찾기</a>
<a href="" class="btn btn-small">로그인</a> .btn {
display: inline-block;
width: 300px;
padding: 20px 10px;
font-size: 18px;
text-decoration: none;
text-align: center;
color: #fff;
background-color: brown;
}
.btn.btn-small {
width: 80px;
padding: 10px 0;
font-size: 14px;
}
.btn.btn-long {
width: 160px;
}2.4 스테이트
기존 스타일을 덮어쓰거나 확장하는데 사용하는 스타일이다.
서브클래스와 다른 점은 레이아웃이나 모듈에 둘 다 적용가능하며,
서브클래스가 한번 적용되면 바뀌지 않는 속성임에 비해
스테이트는 자바스크립트로 필요할때 붙였다 떼었다 할 수 있다는 점이다. 반응형의 느낌!!!!
클래스 이름은 앞에 is 라는 접두사를 사용합니다. (is-hidden, is-active … )
<ul class="tabnav">
<li class="tabnav__item"><a href="" class="tabnav__link">탭1</a></li>
<li><a href="">탭2</a></li>
<li><a href="">탭3</a></li>
<li><a href="">탭4</a></li>
</ul> .tabnav {
display: flex;
}
.tabnav li {
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
.tabnav li:first-child {
border-left: 1px solid black;
}
.tabnav li a {
display: block;
padding: 10px 30px;
text-decoration: none;
}
.is-active {
background-color: blanchedalmond;
}
.is-active a {
pointer-events: none;
color: red;
}
아직 자바스크립트 개념은 없지만, 이해하기론 자바스크립트로 일련의 과정을 거치면 어떤 상황에선 특정요소에 클래스를 붙여준다. 그러면 붙여준 클래스의 스타일이 적용이되어 스타일이 바뀐다.
2.5 테마
사용자에게 사이트의 느낌을 전달하는
이미지(background-image), 색상(background-color, color … )
등을 의미한다.
3. BEM (Block, Element, Modifier)
Block__Element--Modifier 방법론이다.
ID 선택자와 요소 선택자를 권장하지 않는다. (선택자 점수와 관련이 있다!!)
블록 : 재사용 가능한, 독립적인 구성요소!!
예를 들어, 내가 써본 .sr-only, .blind, .menu, .search 등, 그 자체를 떼어다가 재사용 가능한 부분을 말한다(구획을 나눌 때 떠올리는 블록정도라고 생각해도 무방하다.)
엘리먼트 : 블록안에서 특정 기능을 담당하는 부분
예를 들어, img, tit, desc, item 등을 말한다.
모디파이어 : 블록이나 엘리먼트의 모양이나 상태를 말한다.
에를 들어, color, size, disabled, checked등이 있다.
이러한 방법론이 있다는 얘기이며, 절대 강제적인 사항이 아니다.
✅ 끝으로
수업시간에 집중이 흐려지고 복습도 잘 안된 하루였다.
집중해서 공부할 수 있는 나의 세팅이 필요할 것 같다😂
주말간에 공부하고자 하는 부분이 너무 많이 생겼다.
양 조절도 필수임을 느낀다😁
