archuive

✏️ BEM을 익히기 위해BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다. BEM 원칙을 CSS에 적용하면 블록을 다른 레벨로 분리할 수 있습니다. 이전 블록을 상속 및 확장하여 보존하면서 다른 재정의 레벨에서 블록에 대한 새로운 외형을 구현할 수 있습니다 블록의 외형을 완전히 재정의할 수 있습니다 새로운 블록을 추가할 수 있습니다 재정의 레벨을 사용하여 범용 CSS 블록 라이브러리를 생성하고, 프로젝트 수준에서 변경할 수 있습니다. 그런 다음 어쎔블리(assembly) 사용하여 원하는 블록 표현만 프로젝트에 포함시킬 수 있습니다. common.blocks/ button/ button.css # Basic CSS implementation of a button desktop.block..

✏️ BEM을 익히기 위해BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다. 코드를 구조화하고 저장하기 위한 기본 원칙이 BEM-style CSS에 적용됩니다 코드는 각각 부분화됩니다. 각 블록과 블록의 선택적 엘리먼트, 모디파이어 로직은 별도의 파일에 정의됩니다 CSS 파일은 BEM 프로젝트의 파일 시스템 구성 규칙에 따라 저장됩니다 코드를 부분화하고 파일 구조를 제어할 때의 장점은 아래와 같습니다. 프로젝트 전체에서 정보 탐색을 단순화합니다 컴포넌트를 재사용하거나 이동시킬 수 있습니다 재정의 레벨로 사용하거나 조합해 사용할 수 있습니다 button/ # Directory of the button _size button_size_s.css # CSS implementation of t..

✏️ BEM을 익히기 위해 BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다. Modifiers BEM 모디파이어는 블록의 외양, 상태, 동작을 정의합니다. 블록 디자인은 모디파이어를 제거하거나 변경함으로써 변경됩니다. ... .button { font-family: Arial, sans-serif; text-align: center; } .button_size_s { font-size: 13px; line-height: 24px; } .button_size_m { font-size: 15px; line-height: 28px; } 모디파이어를 사용하여 필요한 CSS 속성을 재정의하여 블록 디자인을 변경할 수 있습니다. Mixes 코드를 복제하지 않고 여러 엔티티의 동작과 스타일을 결합..

✏️ BEM을 익히기 위해BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다. 전통적으로 HTML wrapper를 사용하는 이유는 아래와 같습니다. HTML 엘리먼트를 다른 엘리먼트에 배치하기 위해 엘리먼트를 섹션 안에 배치하기 위해 BEM 방법론은 mix를 사용하거나 추가 블록 엘리먼트를 생성해 동일한 결과를 달성합니다. 특정한 기능이 없는 불필요하고 추상적인 wrapper를 만들 필요가 없습니다. 다른 블록 기준으로 블록 배치하기 다른 블록 기준으로 블록을 배치하려면 mix 를 사용하는것이 가장 좋습니다. HTML: ... ... CSS: .page__header { padding: 20px; } .page__footer { padding: 50px; } 블록 안에 엘리먼트 배치하기 ..

✏️ BEM을 익히기 위해BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다. BEM 엔티티의 이름은 고유합니다. 동일한 BEM 엔티티는 모든 기술(CSS, JavaScript, HTML)에서 항상 이름이 동일합니다. 네이밍 컨벤션의 주요 목적은 개발자에게 가능한한 의미 있는 정보를 전달하기 위함입니다. 각기 다른 방식으로 작성된 CSS 선택자의 이름입니다. menuitemvisible menu-item-visible menuItemVisible 이름을 이해하기 위해서 각 단어를 주의깊게 읽어야합니다. 마지막 두개의 예시는 각 단어가 명확하게 나뉘어있습니다. 하지만 menu 가 블럭이고 item 이 엘리먼트, visible 이 모디파이어라는 것을 이해하도록 도와주지는 못합니다. BEM 엔..

✏️ BEM을 익히기 위해 BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다. Block 논리적이고 기능적으로 독립된 페이지 컴포넌트이며 웹 컴포넌트와 동일합니다. 블록은 동작(JavaScript), 템플릿, 스타일(CSS), 기타 구현 기술을 캡슐화합니다. 블록이 독립적일 경우 블록의 재사용은 물론 프로젝트 개발 및 지원 프로세스를 용이하게 할 수 있습니다. Block 특징 중첩 구조 블록은 다른 블록 내부에 중첩될 수 있습니다. 예를들어 head 블록은 로고(logo), 검색 폼 (search), 권한(auth) 블록을 포함할 수 있습니다. 유연한 배치 블록은 페이지에서 이동하거나 페이지 또는 프로젝트간에 이동이 가능합니다. 블록을 독립적인 엔터티(entities)로 구현하면 페이지..

✏️ BEM을 익히기 위해 BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다. BEM(Block, Element, Modifier)은 웹 개발에 대한 구성요소 기반 접근법입니다. 그 이면에 있는 아이디어는 사용자 인터페이스를 독립적인 블록으로 나누는 것입니다. 이를 통해 복잡한 UI로도 인터페이스를 쉽고 빠르게 개발할 수 있으며 복사 및 붙여넣기 없이 기존 코드를 재사용할 수 있습니다. Block 재사용할 수 있는, 기능적으로 독립적인 페이지의 컴포넌트입니다. HTML에서 블록은 class 속성으로 표시합니다. 특징 블록의 이름은 상태가 아니라 목적을 묘사합니다. (menu 또는 button / red 또는 big 과 같은 상태가 아님) 블록의 외부 구조(margin)이나 포지셔닝 설정..

OOCSS(Object Oriented CSS) OOCSS의 목적은 코드 재사용성을 높이고, 궁극적으로는 더 빠르고 효율적이며 유지보수하기 용이한 스타일시트를 만드는 것이다. 결합도 낮추기(decoupling), 단일 책임의 원칙(single responsibility principle), 캡슐화(encapsulation) 를 강조하는 방법론이다. OOCSS는 스타일의 특징(feature)에 따라 범주를 분리하여 구조적으로 선택자들을 적용할 수 있게한다. Separation of structure from skin - 스킨으로부터 구조분리 Separation of containers and content - 컨테이너와 콘텐츠의 분리 SMACSS (Scalable and Modular Architectur..