[ 동영상 시청 ] CSS 방법론

IT Study

[ 동영상 시청 ] CSS 방법론

코딩 수달 2022. 7. 24. 20:26

참고 동영상

https://www.youtube.com/watch?v=B70h37mpD74&t=555s

CSS란?

HTML 또는 XML로 쓰여진 문서의 스타일을 나타내기 위해 사용되는 언어

문서의 구조와 스타일(디자인)을 분리하여 HTML이나 XML의 각 요소를 꾸미는 것이 역할

CSS 등장 이전 / 이후의 스타일링

CSS 등장 이전

각 요소의 전용 속상이나 style 속성으로 스타일을 일일이 지정

문제점

-> 같은 스타일 요소를 여러 페이지마다 사용하면, 하나를 수정할 때마다 그만큼 반복하여 수정을 해야 한다.

-> HTML은 본래 문서 구조를 의미하므로 HTML에 직접 스타일을 지정하는 것은 바람직하지 않는다.

CSS 등장 이후

CSS 파일에는 스타일을 기재하고 HTML에는 문서의 구조를 작성 관심사의 분리

CSS 문제점

-> CSS에서는 모든 것이 전역 범위이므로, 모든 스타일링이 서로 간섭할 가능성이 있다.

-> CSS파일이 분리되어 있다 하더라도 이 파일들을 읽어 들인 HTML 에서는 모든 스타일링이 동일한 범위안에 존재하게 된다.

-> 웹사이트가 점점 복잡해지면서 유지보수가 용이한 CSS를 작성하는 것이 어려워졌고, 이를 해결하기 위한 CSS 방법론이 여러 가지 대두되었다.

OOCSS란

Object Oriented CSS : 객체 지향 CSS 니콜 설리번이 제창

주요발상

1. 레고처럼 자유로운 조합이 가능한 모듈의 집합을 만든다. 2. 그 모듈을 조합해 페이지를 만든다. 3. 그리하여 신규 페이지를 만드는 경우에도 기본적으로 추가적인 CSS를 만들 필요가 없다.

레고와 같은 모듈을 구현하기 위한 두 가지 원칙

1. 스트럭처(구조)와 스킨(화면) 분리 2. 컨테이너와 콘텐츠 분리

OOCSS 정리

- OOCSS의 역사는 매우 길며 명확하게 규칙이라고 불리는 것도 많지 않다.

- 다른 CSS 방법론들은 기본적으로 크건 작건 OOCSS를 참조하면서 개선한 것

- 오늘날 OOCSS 한 가지만으로 실직적인 CSS 설계를 수행하는 것은 그다지 현실적이지 않음

SMACSS란

Scalable and Modular Architecture for CSS 조나단 스눅 (Jonathan Snook)이 제창 CSS 코드를 그 역할에 따라 분류한 것이 특징

-> 베이스, 레이아웃, 모듈, 스테이트, 테마

SMACSS 정리

- 프로젝트에서 고려해야 하는 대부분의 CSS 규칙을 포함 - 각 규칙이 엄격하지 않아 유연하나, 경우에 따라 규칙이 너무 유연하여 실제 코드의 지침으로 삼기 어려움 - 모듈 규칙에 OOCSS를 적용하거나 다음에 설명할 BEM의 규칙을 일부 적용하는 등 다른 설계 기법과 조합하는 경우가 많다.

BEM

- Block, Element, Modifier

- 러시아의 Yandex 사가 제창한 컴포넌트 기반 웹 개발 접근법

- UI를 독립된 블록으로 분리함으로써 복잡한 페이지에서도 간단하고 신속하게 개발을 수행하는 것이 목적

- 기본적으로는 모듈 기반의 방법이지만, 그 내용이 다른 설계 기법에 비해 엄격하고 강력하여 세계적으로 이름이 알려졌으며 실제로 널리 사용되고 있다.

1. Block재사용할 수 있는 기능적으로 독립적인 페이지 구성요소 BEM을 사용할 때는 ID 셀렉터 또는 요소 셀렉터를 사용하면 안 됨 Block 이름은 상태가 아닌 용도를 나타낸다 Block은 환경에 영향을 미치지 않아야 한다. 즉 Block 자체에 대한 외부 지오메트리 또는 Block의 위치를 설정하지 않아야 한다. Block들은 서로 중첩될 수 있다. 2. Element Block의 복합 부품으로 Block과 별도로 사용할 수 없다. Element 이름은 상태가 아닌 용도를 나타낸다. Element는 항상 Block의 부분이어야 하며, Block으로부터 분리하여 사용해서는 안된다. 모든 Block이 Element를 가지는 것은 아니다. Element는 서로 중첩될 수 있다. 3. Modifier Block 또는 Element의 모양, 상태 또는 동작을 정의 Modifier 이름은 모양, 상태, 동작을 나타낸다. Modifier는 홀로 사용되지 않는다. 1) Boolean Modifier 유무만 중요하고 그 값이 무관할 때 사용 : disabled, focused Boolean modifier 가 있으면 해당 값이 참으로 간주됨 2) Key-Value

Modifier 값이 중요한 경우에 사용 : size_s, theme_islands

4. Mix

Block과 Element가 하나의 HTML 요소에 존재하는 것을 의미

코드 중복을 피하면서 여러 BEM 엔티티의 동작과 스타일을 결합

기존 BEM 엔티티를 기반으로 의미상 새로운 인터페이스 컴포넌트를 작성

가급적 상세도를 높이지 않고 Block의 독립성을 유지할 수 있음

기존 CSS 방법론의 문제점

CSS가 HTML 구조와 강하게 결합되어 있다.

HTML에 의존하는 CSS

- HTML에서 스타일이 필요한 요소에 클래스명을 부여

- 클래스명이 부여된 요소에 대하여 CSS에서 스타일링

CSS에 의존하는 HTML

- CSS에서 HTML과 독립적으로 스타일을 선언

- HTML에서는 선언되어 있는 스타일에 한하여 마크업 작성

Utility-First CSS / Functional CSS

- 시멘틱하고 컨텍스트에 의존하지 않는 CSS작성

- 클래스명만 보아도 CSS속성과 값을 바로 유추할 수 있도록 단 하나의 속성과 값을 나타내는 CSS를 사전에 미리 정의

- 미리 정의된 클래스를 마치 HTML 요소에 제공하는 API로 생각하여 API(클래스명)을 HTML에서 조합해서 사용

inline style과 다른점

- 아무 값이나 지정할 수 있는게 아니다. 사전에 정해진 리스트에서 골라야 하므로 전체적인 일관성을 높일 수 있다.

- hover, focus 등의 의사 클래스 셀렉터도 사용할 수 있다.

- media query를 사용할 수 있어 반응형 디자인에 대응이 수월하다.

널리 알려진 Utility - First CSS

- Tailwind CSS

- Tachyons

- Atomic CSS