on
css 작성방법 / OOCSS(Object Oriented CSS) , BEM
css 작성방법 / OOCSS(Object Oriented CSS) , BEM
css 코드를 짜다보면 필요없는 중복을 많이 하게 됩니다.
그리고 코드가 길어질 경우에 엉망이 됩니다.
그런 경우에 OOCSS(Object Oriented CSS) 방식을 사용 해주시면 됩니다.
1. 버튼의 기본 스타일인 padding, font-size 이런걸 정의하는 class를 하나 만들기
2. 버튼에 스킨 색깔놀이 하는 용도의 class를 여러개 만들기
.main-btn { font-size : 20px ; padding : 15px ; border : none ; cursor : pointer ; }
.bg-red { background : red ; }
.bg-blue { background : blue ; }
< button class = "main-btn bg-red" > 확인 버튼 < button class = "main-btn bg-blue" > 취소 버튼
색갈별로 분리를 해주면 좋습니다.
.bg-red { background : red ; } .bg-green { background : green ; } .bg-blue { background : blue ; }
물론 폰트 사이즈 별로 분를 해주면 좋습니다.
.font-small { font-size : 12px ; } .font-medium { font-size : 16px ; } .font-lg { font-size : 20px ; }
그리고 작업을 할 때...
width, margin, padding, text-align 이런 것들 조정하는
utility class 를 미리 만들어두면 편리합니다.
뼈와 살을 분리하는 CSS 작성방식을 Object Oriented CSS 라고 부릅니다.
만약 작명을 더 쉽게해서 개발을 하고 싶다면?
BEM 이라는 작명법을 따르면 됩니다.
Block__Element--Modifer 이런 식으로 공부하세요!
HTML 요소를 영어로 Element라고 하며 Modifier는 수식어라는 뜻
html 덩어리 코드에 class를 작명하는 것은 힘이 듭니다.
< div > < img > < h4 > 이름 < p > 소개글 < button > 빨간버튼 < button > 파란버튼
큰 덩어리 부터 이름을 지어 줍니다.
< div class = "profile" > < img class = "profile" > < h4 class = "profile" > 이름 < p class = "profile" > 소개글 < button class = "profile" > 빨간버튼 < button class = "profile" > 파란버튼
그 이후에 클래스 명을 넣으려면??
_ _ 뒤에 태그 이름을 넣어주면 됩니다.
< div class = "profile" > < img class = "profile__img" > < h4 class = "profile__h4" > 이름 < p class = "profile__content" > 소개글 < button class = "profile__button" > 빨간버튼 < button class = "profile__button" > 파란버튼
동일한 태그에 디자인을 부여하려면?
- - 위에 컬러를 부여하면 됩니다.
< div class = "profile" > < img class = "profile__img" > < h4 class = "profile__h4" > 이름 < p class = "profile__content" > 소개글 < button class = "profile__button--red" > 빨간버튼 < button class = "profile__button--blue" > 파란버튼
근데 지금 설명한 OOCSS 클래스 작성방식, BEM 작명방식은
프로젝트가 크고 방대할 때 장점을 보이는 방법입니다.
그러나 요즘 모던 웹 프레임워크나 라이브러리에서는 큰 장점이 없습니다.
React 이런 곳에선 html 페이지 단위가 아닌,
작은 컴포넌트 단위로 개발하기 때문입니다.
class 중복되어도 컴포넌트끼리 스타일이 간섭되지 않게 코드를 짤 수 있습니다.
대표적으로 React 안에서 styled-components 라이브러리를 쓰면 됩니다.
그래서 요즘은 BEM을 깊게 익힐 필요는 없음...
대충 뭔지 알기만 하면 됨
from http://gnews365.tistory.com/39 by ccl(A) rewrite - 2021-12-27 16:00:58