Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

유지보수하기 쉬운 CSS 전략(슬라이드)

WSConf. Seoul 2016에서 한 발표 슬라이드입니다.

2016년 발표 장면

CSS 자체는 어렵지 않습니다. 그러나 유연하고 간단한 이 언어를 복잡하고 큰 프로젝트에 적용할 때는 난점이 따릅니다. 명암이 분명한 것이죠.

때문에 CSS를 효과적으로 조직화하기 위한 방법론들이 개발돼 왔습니다.

최근 유행하는 테일윈드(Tailwind) CSS의 유틸리티 퍼스트(Utility First) CSS 방법론 같은 것이 그 예입니다.

제가 사용하는 방법은 객체 지향 CSS(OOCSS, Object Oriented CSS)입니다. 유틸리티 퍼스트도 OOCSS에서 영감을 얻었다고 하죠.

OOCSS는 CSS를 콘텐츠의 내용으로부터 독립시킵니다. CSS 클래스의 재사용성을 극대화하는 방법론이죠.

2016년 12월에 열린 WSConf에서 이에 대해 발표할 기회가 있었습니다. 그래서 “유지보수하기 쉬운 CSS 전략”이라는 제목으로 발표를 진행했습니다.

아래에서 슬라이드를 참고해 보실 수 있습니다.

슬라이드를 보고 OOCSS가 궁금하시다면 이 글을 읽어 보시기를 추천합니다: 객체 지향 CSS 소개, HTML 시맨틱과 프론트엔드 아키텍처에 대해

SMACSS도 참고할 만합니다(SMACSS는 확장 가능한 모듈식 CSS 구조, Scalable and Modular Architecture for CSS의 약자입니다. “스맥스”라고 읽습니다). OOCSS와 같진 않지만 그에 필요한 기반 개념은 동일합니다. 책인 만큼 개념을 상세하게 다루고 있으므로 OOCSS를 이해하는 데 큰 도움이 됩니다. SMACSS는 번역서 《SMACSS : 복잡한 CSS를 관리하는 5가지 스타일 가이드》를 추천합니다. 방법론의 창시자가 쓴 책이죠.


[슬라이드] 유지보수하기 쉬운 CSS 전략

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다