객체 지향 CSS (OOCSS)의 기본
프론트 엔드 개발은 매년 새로 추가 된 많은 새로운 기술로 빠르게 진행됩니다. 개발자가 모든 것을 따라 잡는 것은 투쟁이 될 수 있습니다. Sass와 PostCSS 사이에서 개발 도구의 바다에서 길을 잃기 쉽습니다..
하나의 새로운 기술은 OOCSS라고도하는 객체 지향 CSS입니다. 이것은 도구가 아니라 CSS 작성 방법론입니다. CSS 모듈화 및 객체 기반 만들기.
이 게시물에서 나는 OOCSS의 핵심 기본 사항, 과 이러한 아이디어가 프론트 엔드 웹 작업에 어떻게 적용될 수 있는지. 이 기술은 모든 개발자가 따라 잡을 수는 없지만 워크 플로우에서 개발자가 혜택을 볼 수 있는지 결정하기 위해 새로운 개념을 이해하는 것은 가치가 있습니다..
CSS가 객체 지향적 인 이유?
OOP (Object-Oriented Programming)는 다음을 중점적으로 다루는 프로그래밍 패러다임입니다. 재사용 가능한 객체 생성하기 과 관계 수립 코드를 프로 시저 (루틴, 서브 루틴 또는 함수)로 구성하는 프로 시저 프로그래밍과는 달리,.
OOP는 두 가지 모두에서 널리 사용되고 있습니다. JavaScript 및 백엔드 언어 지난 몇 년 동안 CSS를 원칙에 따라 조직하는 것은 여전히 새로운 개념입니다.
그만큼 “목적” OOCSS의 HTML 요소 또는 CSS 클래스 나 자바 스크립트 메소드와 같은 그와 관련된 모든 것. 예를 들어, 다양한 목적 (뉴스 레터 가입, 광고 블록, 최근 게시물 등)으로 복제 할 수있는 사이드 바 위젯 객체가있을 수 있습니다. CSS는 할 수있다. 이 물건들을 대상으로한다. 산들 바람을 가라 앉힌다..
OOCSS의 GitHub 항목을 요약하면 CSS 객체는 네 가지로 구성 될 수 있습니다.
- DOM의 HTML 노드
- 해당 노드의 스타일에 대한 CSS 선언
- 배경 이미지와 같은 구성 요소
- JavaScript 비헤이비어, 리스너 또는 객체와 관련된 메소드
일반적으로 CSS는 객체 지향적입니다. 재사용 가능한 클래스 과 여러 페이지 요소에 타겟팅 가능.
많은 개발자들은 OOCSS가 다른 사람들과 더 쉽게 공유 할 수 있으며 몇 달 또는 몇 년 동안 비활성 개발이 끝난 후 쉽게 수령 할 수 있다고 말합니다. 이것은 SMACSS와 같은 다른 모듈 방식과 비교됩니다. SMACSS는 CSS에서 객체를 분류하기위한보다 엄격한 규칙을 가지고 있습니다..
OOCSS FAQ 페이지에는 더 많은 것을 알기 원한다면 많은 정보가 있습니다. 그리고 제작자 Nicole Sullivan은 OOCSS에 대해 자주 이야기하고 그것이 현대 웹 개발과 어떻게 관련되어 있는지에 대해 이야기합니다..
스타일에서 구조 분리
OOCSS의 큰 부분은 페이지 구조 (너비, 높이, 여백, 패딩)를 모양 (글꼴, 색상, 애니메이션)과 구분하는 코드를 작성하는 것입니다. 이것은 허용한다. 커스텀 스키닝 여러 페이지 요소에 적용 구조에 영향을 미치지 않고.
이것은 구성 요소를 설계 할 때도 유용합니다. 레이아웃을 돌아 다녔다. 쉽게. 예를 들어, a “최근 게시물” 사이드 바에있는 위젯은 비슷한 스타일을 유지하면서 바닥 글이나 내용 위로 이동할 수 있어야합니다..
다음은 OOCSS의 예입니다. “최근 게시물” 위젯은이 경우 CSS 객체입니다.
/ * Structure * / .side-widget width : 100 %; 패딩 : 10px 5px; / * 스키닝 * / .recent-posts font-family : Helvetica, Arial, sans-serif; 색상 : # 2b2b2b; 글꼴 크기 : 1.45em;
그것을주의해라 형세 는 .사이드 위젯 클래스를 여러 개의 세로 막대 요소에도 적용 할 수 있습니다. 외관 는 .최근 게시물 클래스는 다른 위젯을 스킨으로 사용할 수도 있습니다. 예를 들어, .최근 게시물 위젯이 바닥 글로 이동되었지만 동일한 위치를 차지하지 않을 수도 있지만 동일한 모양과 느낌을 가질 수 있습니다.
또한 CodePen의 사이드 바 예제를 살펴보십시오. 이 클래스는 부동 소수점 및 텍스트 정렬을 위해 클래스를 구분하여 사용하므로 복제시 추가 CSS 코드가 필요하지 않습니다..
컨텐트에서 컨테이너 분리
컨테이너 요소에서 내용 분리 OOCSS의 또 다른 중요한 원칙이다..
간단히 말해, 가능한 경우 하위 선택기를 사용하지 않는 것이 좋습니다. 앵커 링크, 헤더, 블록 따옴표 또는 정렬되지 않은 목록과 같은 고유 한 페이지 요소를 사용자 정의 할 때 자손 선택자가 아닌 고유 한 클래스를 제공해야합니다.
다음은 간단한 예입니다.
/ * OCSSS * / .sidebar / * 사이드 바 내용 * / h2.sidebar-title / * 특수 h2 요소 스타일 * / / * 비 OOCSS * / .sidebar / * 동일한 사이드 바 내용 * / .sidebar h2 / * 필요한 것보다 더 많은 특이성 추가 * /
두 번째 코드 형식을 사용하는 것이 끔찍하지는 않지만 깨끗한 OOCSS를 작성하려면 첫 번째 형식을 따르는 것이 좋습니다.
개발 지침
개발자가 OOCSS의 목적에 대해 끊임없이 토론하고 있기 때문에 정확한 사양을 정하기는 쉽지 않습니다. 하지만 여기있다. 더 깨끗한 OOCSS 코드를 작성하는 데 도움이되는 몇 가지 제안:
- 작업 ID 대신 클래스 사용 스타일링을위한.
- 하려고 노력하다 다중 레벨 자손 클래스 특질로부터 기권 필요하지 않다면.
- 밝히다 반복 가능한 클래스가있는 고유 한 스타일 (예 : 부동 소수점, clearfix, 고유 폰트 스택).
- 요소 확장 목표로 정한 수업 부모 클래스보다는.
- 스타일 시트 구성 섹션으로, 목차 추가 고려.
개발자는 여전히 자바 스크립트 타겟팅을 위해 ID를 사용해야하지만 CSS에서는 필수 사항이 아니므로 그들은 너무 구체적이다.. 한 객체가 CSS 스타일에 ID를 사용하면 ID는 고유 식별자이므로 복제 할 수 없습니다. 스타일 지정에 클래스 만 사용하면 상속을 훨씬 쉽게 예측할 수 있습니다..
또한 클래스를 추가 기능을 위해 함께 연결할 수 있습니다. 단일 요소에는 10 개 이상의 클래스가 첨부 될 수 있습니다. 한 요소의 10 개 이상의 클래스가 개인적으로 권장하는 것은 아니지만 개발자가 무제한 페이지 요소에 대한 재사용 가능한 스타일 라이브러리를 모을 수 있습니다..
OOCSS 내의 클래스 명은 논쟁의 여지가 많으며 돌로 설정되지 않습니다. 많은 개발자들이 수업을 짧게 유지하는 것을 선호합니다..
카멜 케이스도 인기가 있습니다. .오류 상자 대신에 .오류 상자. OOCSS 문서에서 클래스 이름을 보면 낙타 사례가 “공무원” 추천. 대시에는 아무런 문제가 없지만 일반적으로 OOCSS 지침을 따르는 것이 가장 좋습니다.
OOCSS + Sass
대부분의 웹 개발자는 이미 Sass를 좋아하며 신속하게 프론트 엔드 커뮤니티를 제치고 있습니다. Sass를 아직 시도하지 않았다면, 그럴 가치가 있습니다. 변수, 함수, 중첩 및 수학 함수와 같은 컴파일 메소드를 사용하여 코드를 작성할 수 있습니다..
유능한 손에서, Sass와 OOCSS는 천국에서 만든 성냥 일 수 있습니다. Sass Way 블로그에서 이에 대한 훌륭한 글을 찾을 수 있습니다..
예를 들어, Sass @넓히다 지시문을 사용하면 한 클래스의 속성을 다른 클래스에 적용 할 수 있습니다. 속성은 중복되지 않지만 두 클래스는 쉼표 선택자와 결합됩니다. 이렇게하면 한 위치에서 CSS 속성을 업데이트 할 수 있습니다..
끊임없이 스타일 시트를 작성한다면 몇 시간 타이핑 도움 OOCSS 프로세스 자동화.
또한 기억하십시오. 코드 유지 관리는 OOCSS의 큰 부분입니다.. Sass를 사용하면 워크 플로에 연결된 변수, 믹스 인 및 고급 linting 도구를 사용하여 작업을 더 쉽게 수행 할 수 있습니다..
위대한 OOCSS 코드의 핵심 속성은 누구와도 공유 할 수있는 능력, 심지어 나중에 너 자신조차, 그리고 쉽게 그것을 데리러 수 있습니다..
성능 고려 사항
OOCSS는 혼란없이 부드럽게 작동하도록되어 있습니다. 개발자는 최선을 다합니다. 아니 사실, 그것은 DRY 개발의 전제입니다. 시간이 지남에 따라 OOCSS 기술은 주어진 문서에서 수십 번 적용된 개별 속성을 가진 수백 개의 CSS 클래스로 이어질 수 있습니다.
OOCSS는 여전히 새로운 주제이기 때문에 부 풀리는 주제에 대해 논쟁하기가 어렵습니다. OCSSS는 엄격한 구조를 제공하고 (이상적으로는) 적은 팽창을 제공하는 반면, 많은 CSS 파일은 거의 구조로 부풀어 오르게됩니다. 가장 큰 성능 문제는 HTML에서 일부 요소가 레이아웃 구조 및 디자인을위한 소수의 다양한 클래스를 축적 할 수 있다는 것입니다.
Stack Overflow 및 CSS-Tricks와 같은 사이트에서이 주제에 대한 흥미로운 토론을 찾을 수 있습니다..
내 추천은 샘플 프로젝트를 빌드하고 어떻게 진행되는지 확인하는 것입니다. OOCSS에 빠지면 웹 사이트를 코딩하는 방법이 크게 달라질 수 있습니다. 양자 택일로, 당신이 그것을 싫어한다면 당신은 여전히 새로운 기술을 배우고 그것이 어떻게 작동하는지 비판적으로 생각하고 있습니다. 그것은 무엇이든 관계없이 윈 - 윈이다..
바쁜 쓰기 OOCSS 가져 오기
웹 개발에서 무엇인가를 배우는 가장 좋은 방법은 연습하는 것입니다. CSS의 기본 사항을 이미 이해하고 있다면 잘 할 수 있습니다.!
OOCSS는 사전 처리가 필요하지 않으므로 CodePen과 같은 온라인 IDE로 시험해 볼 수 있습니다. 간단한 프로젝트는 시작하기에 가장 좋으며 거기에서 지식을 향상시켜야합니다..
진화하는 OOCSS 분야의 연구를 위해이 자료를 살펴보십시오..
- OOCSS 공식 웹 사이트
- 객체 지향 CSS : 내용, 방법 및 이유
- OOCSS + Sass = CSS에 가장 좋은 방법
- 객체 지향 CSS 소개
