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 코드를 복제하지 않고 여러 엔티티의 동작과 스타일을 결합..