# BEM

chacha_2

나름대로 공부한답시고 유튜브나 인터넷 강의 이것저것 보다가 BEM에 대해서 접한 적이 있다. 그때는 그냥 아 이런 거구나 하고 넘어갔었는데, 멘토/멘티 직무캠프를 하면서 BEM 구조에 대해 배우고 활용할 기회가 생겼다. BEM 소개 BEM 구조가 뭐냐? 먼저 BEM은 Block, Element, Modifier의 약자다. 즉, 이 세가지로 구성된 이름을 짓는 것이다. 작성할 때는 BlockElement--Modifier 이런 식으로 작성하면 된다. 와 --로 구분을 해주는 것이다. Block : block은 그 자체로 의미가 있는 독립적인 엔티티이다. 예를 들면 'header', 'container', 'menu' 이런 것들. 독립적인 엔티티이기 때문에 block 그 자체로 단독적으로 사용이 가능하다. Element : element는 독립적인 의미가 있는 건 아니지만 의미상 해당 block에 연결된 일부다. 예를 들면 'menu ite

soosoorim

CSS selector class selector는 .클래스명{ } 이렇게 적을 수 있고 모든 class="클래스명"을 가진 요소에 스타일 적용 가능 id selector는 #아이디명 { } 이렇게 적을 수 있고 모든 id="아이디명" 속성을 가진 요소에 스타일 적용 가능 tag selector는 p { 스타일- } 이렇게 적을 수 있고 모든 태그에 스타일 적용 가능 > 셀렉터의 우선순위 class, id를 동시에 가지는 html에서 스타일이 겹칠 경우 우선순위가 존재한다. 대략 (점수가 높을수록 우선순위) > selector 문법 중 공백 navbar과 li사이의 띄어쓰기 공백은 ~안에 있는 모든자식 이라는 뜻을 가진다. navbar과 li사이의 띄어쓰기 >은 ~안에 있는 직계자식 이라는 뜻을 가진다. > selector 문법 중 콤마 selector에서

inmyhead

본 글은 (나)가 참고하기 위해 작성한 글입니다. 공부하는 과정에서 느낀 부분을 에세이처럼 정리하(려 하)고 있습니다. 하여, 제 글은 매우 주관적입니다😁 목차는 오른쪽을 참고해주세요👉👉 뭐든 그렇지만, 남들이 하는 거 볼 때나 같이 예제로 할 때는 다 아는 것 같다가도 생판 처음부터 시작하면 타자치는 법을 잊어버린 것 같다. CSS는 특히 만들어두고 뭐 하나 바꾸기 시작하면 겉잡을 수 없어지는 분야인 듯. 간단하게 자기소개 페이지 예제를 만들면서 깨달은 점은… id와 class를 분명하게 사용하지 못하고 아무거나 떡칠해두었다는 점. 이름 짓는 건 너무나 어려워. id와 class는 각각 언제 사용하는 것이 좋을까? 이론적으로 id는 요소가 가질 수 있는 고유한 이름, class는 요소의 타입이자 분류하고 구분할 때 사용할 수 있는 것이라고 한다. id는 각 요소에 단 하나, 중복으로 사용할 수 없다. 고유한

ynmkim

block : 독립적으로 존재할 수 있는 요소, 재사용이 가능한 기능적으로 독립적인 컨포넌트 element : 블럭을 구성하는 단위, 블럭에 속해서만 의미를 가지는 형태 modifier : 블럭이나 엘리먼트의 속성. 생긴 게 조금 다르거나, 다르게 동작하는 블럭이나 엘리먼트를 만들 때 사용 (--active, --focused ...) BEM 방법론 예시

x5foddl

코드 양을 줄이는 CSS 작성법 1. Object Oriented CSS 라고 불리는 작성 관습 누가 빨간버튼과 파란버튼을 만들어오라고 하면? 가장 간단한 방법 class 두 개를 만들어서 각각 button에 집어넣기 ❗하지만 이런 경우 CSS파일이 매우 길어지고 용량이 큰 CSS파일은 웹사이트 로딩 속도를 저하시킴 💡고수: 뼈대용 class, 살점용 class 각각 제작 (중복되는 값들은 class 하나로 묶기) 👉 1. 버튼의 기본 스타일인 padding, font-size 이런 걸 정의하는 class 를 하나 만든 후 👉 2. 버튼에 스킨 색깔놀이를 하는 용도의 class를 여러 개 만들기 뼈대 스타일이 많을수록 이득 html에서 class 2개를 부여하면 완료! 장점 CSS양이 줄어든다 유지보수가 편하다 만들어두면 편한 Utility class (스타일이 한두개만 들어있는 class) ex) 2. BE

just-do-justin

제이쿼리의 특성 엘리먼트 선택 및 제어에 용이 > $(css 셀렉터).메소드() > ex) . -> class / # -> id 해당 css 셀렉터가 가리키는 모든 엘리먼트에 원하는 메소드(jquery가 제공하는 api)를 동작시킬 수 있습니다. 그리고 모든 제이쿼리 메소드들은 해당 메소드가 동작을 마치고 리턴될 때 자신이 제어했던 엘리먼트를 리턴하기 때문에, 메소드를 연속적으로 꼬리를 무는 것처럼 연결해서 사용할 수 있습니다. 이를 '체인'이라고 부릅니다. 크로스 브라우징 이슈 해결 웹 브라우저에 따라 지원해주는 메소드 및 api가 달라서 발생하는 이슈를 제이쿼리가 알아서 처리해주는 기능이 있습니다. 오늘의 개발지식 스크립트 언어 스크립트 언어는 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어를 의미합니다. 스크립트 언어는 응용 프로그램과 독립적으로 사용되며, 응용 프로그램을 구성하고 있는 언어와도 다른 언어로 사용되어, 최종 사용자가 응용

sodamjeong

웹 데이터를 의미론적으로 표현하고 연결하는 개념 HTML Semantic Element 기본적인 모양과 기능 이외에 의미를 가지는 HTML 요소 검색엔진 및 개발자가 웹 페이지의 콘텐츠를 이해하기 쉽게 만들어줌 시각 장애 사용자가 스크린 리더기로 웹 페이지를 사용할 때 추가적으로 도움이 됨 대표적인 구조화를 위한 semantic element header : 헤더 nav : 네비게이션 main : 메인 공간 article : 본문의 주 내용이 들어가는 공간 section : 본문의 여러 내용(article)을 포함하는 공간 aside : 사이드에 위치하는 공간 footer : 푸터 OOCSS Object-Oriented CSS 객체 지향적 접근법을 적용하여 CSS를 구성하는 방법론 BEM Block Element Modifier 블록, 요소, 수정자를 사용해 클래스 이름을 구조화 하는 방법론

tuna13

BEM : Block > Element > Modifier BEM 은 css를 효율적으로 관리하는 방법론 중 하나이고, 이름 그대로 css 파일명을 블럭, 하위 엘리먼트 , 엘리먼트 상태의 순으로 작성하는 방법이다. 예를 들어, '카드'를 만들 때 아래처럼 작성한다. 위와 같이, 컨테이너인 카드 안의 리스트와 버튼은 카드 그룹에 속하지만, 독립적인 class 명으로 정의하는 방식으로 만드는 방법론이다. (실제로, 네이밍을 적용하고, 작성하는 것은 많은 경험이 필요할 것 같음) 결론은 BEM 은 관계를 유추 할 수 있는 명확한 클래스명을 사용하고, 서로 독립되어있도록 css 를 작성하는 것이 핵심이다.

ve_hye_ona

표준 CSS 방법론 ; CSS 클래스명을 어떻게 지으면 좋을지에 대해 정의 기본 구조 Block + Element + Modifier .(block 명)__(element 명)--(modifier 명) ID를 사용하지 않음 Class만을 사용함 명명은 '어떻게 보이는가'가 아니라 '어떤 목적이냐'에 따라 명명 시, white space 구분은 '-' 하나로 Block 재사용 가능한 기능적으로* 독립적*인 페이지 component Ex. Nested Block 허용 Ex. .(block1)>.(block2) // block이 block을 감싼 형태 Element Block을 구성하는 단위 자신이 속한 Block 내에서만 의미를 가짐 (의존적) Ex. (속한 block 명)__(element 명) Nested Element 허용 Ex. .block>.block__elem

eyewhy

BEM Block(전체를 감싸고 있는 블록요소)__Element(내부요소)--Modifier(기능) 클래스명은 구체적이고, 명료하며 HTML 안에서도 읽기 쉬어야 하고, 클래스 명이 무엇을 나타내는지 분명하게 전달되어야 한다. 클래스명은 각 html 태그에 오직 클래스명을 하나만 사용해야 한다. 클래스만을 활용하여 구조화하는 방법이다. 반복되는 클래스를 만들거나 똑같은 스타일을 반복해서는 안된다. 출처 : https://sangcho.tistory.com/entry/BEM%EB%B0%A9%EB%B2%95%EB%A1%A0

gogoworld1

BEM이란 무엇인가? BEM(Block, Element and Modifier) CSS 제작 방법론으로, 일종의 네이밍 컨벤션이라고 볼 수 있다. html 요소들을 각각 Block, Element, Modifier이렇게 세 가지로 분류해 작명한다. 각각의 BEM은 각자의 역할이 따로 있으므로 역할에 알맞은 클래스를 붙이는 게 관건이다. UX(User Experience란 무엇인가? 보통의 일상에서 우리는 아침에 마시는 커피용 머그잔부터 즐겨 찾는 모바일 애플리케이션 및 웹사이트 디자인에 이르기까지 디지털 및 물리적인 제품과 정기적으로 상호 작용하고 있습니다. 심지어 이에 의존하는 모습을 보이기도 합니다. 이러한 상호 작용을 통해 사용자인 우리는 이에 대한 특정 인상을 받게 되며, 이를 다른 말로는, 사용자 경험, 즉 UX라고 부릅니다. UX 디자인은 제품을 신중하게 설계하여 사용자의 경험을 향상시키는 방식입니다. UX는 UI에서 파생되었다고 봐도 된다 사용자

bbiyac

BEM이란? Block Element Modifier으로 css에서 많이 쓰이는 방법론이다. 기본 규칙 영어 소문자로 작성한다. 일반 단어의 경우에는 - 으로 연결한다. (my-menu) element의 경우에는 blcok 뒤에 \_ (double underscore)으로 연결한다. (_item) modifier의 경우에는 element 뒤에 _ 으로 연결한다. (_visible) 네이밍의 조합은 형태-의미-순서-상태 순으로 사용한다. (예시 button-submit-03-disable) 언더스코어는 파일, 폴더, 이미지 등에만 사용한다.(imageelysiaasset_01.png) 숫자를 사용할 때는 01, 02, 03… 혹은 001, 002, 003처럼 사용한다. 앞에 0을 붙이지 않으면, 이미지 정렬 시 1 다음에 2가 오지 않고 10이 오는 등, 정렬 순서가 엉망이 될 수 있기 때문이다. 1) Bl

khy226

BEM이란? BEM이란 Block, Element, Modifier의 줄임말로 CSS 클래스 네이밍 컨벤션 방법이다. HTML 요소들을 각각 Block, Element, Modifier 세 가지로 분류해서 작명을 하는 방법이다. 각각의 BEM 요소들은 다른 역할을 가지고 있으며, 해당 역할에 맞는 클래스명을 붙여서 개발하면 된다. 아래는 BEM에 관한 글을 번역한 내용이다. 이름 짓기(Naming) > 컴퓨터 과학에는 오직 두 가지 어려운 문제가 있다: 캐시 무효화와 이름 짓기. - 필 칼튼 올바른 스타일 가이드가 개발 속도, 디버깅 및 레거시 코드에서 새로운 기능의 구현을 크게 증가시킬 수 있다는 것은 알려진 사실이다. 안타깝게도 대부분의 CSS 코드베이스는 구조나 명명 규칙 없이 개발되기도 한다. 이는 장기적으로 유지관리할 수 없는 CSS 코드베이스로 이어진다. BEM 접근

co28th

BEM (Block Element Modifier) html 클래스 속성에 이름을 부여하는 작명법으로 두가지 방법이 있는데 요소__일부분 Underscore (Lodash) 기호로 요소의 일부분을 표시 요소--상태 Hyphen (Dash) 기호로 요소의 상태를 표시 요소__일부분 만약 위에와 같이 html이 작성되었으면 클래스 요소를 정의할 때 css 선택자를 이용해 container 안의 name 이라는 요소를 지칭하게 되는데 이때 하위 선택자를 사용하면 item 안 name 에도 원하지 않게 스타일이 적용될 수도 있다. 이 부분을 BEM 방식을 사용해 명시해주면 정확하게 요소를 지칭할 수 있다. 특정한 내용의 일부분을 의미한다는 __ 가 들어가면 이 div 요소가 container의 일부분이고 그 일부분의 이름이 name 이다. 라고 해석할 수 있다. 의 형제요소인 item 요소의 자식요소 name 도 이라고 작성을

hjbaek5796

BEM (Block Element Modifier) is simply a coding convention that is used by developers to organize names of selectors (especially for using CSS). Naming with BEM conventions give a semantic meaning to each selector which has its own functionality within the code base. This is useful when doing a project or a code review with other who may have not seen your code before. By applying BEM n

91savage

BEM 방식 링크 https://nykim.work/15

hwnim5324

CSS 방법론 모든 개발이 그렇듯 개발의 범위가 커질수록 파일들은 복잡해지고, 관리가 어려워진다. 웹의 경우 HTML, CSS, JS에서 HTML과 JS는 이에 대해 대응이 가능하도록 다양하게 진화했다. 마찬가지로 CSS도 LESS, SASS, Post CSS 등과 같이 확장된 CSS 언어인 CSS Preprocessors(전처리기)가 작성을 용이하게 도와주었으나, 여전히 복잡하고 관리가 어렵다는 단점이 크다. 이를 위해 제안되는 것이 CSS 방법론이다. 일반적으로 팀에서 코드를 작성할 때, 스타일 가이드에 따라 작성하듯 CSS 스타일 가이드와 같은 CSS 방법론을 통해 확장성과 유지보수를 개선하고 복잡성을 낮출 수 있다. 대표적인 CSS 방법론은 BEM, OOCSS, SMACSS로 나뉘어지며, 서로간 우열이 없이 자신의 팀에 맞는 방법론을 사용하는 것이 추천된다. BEM BEM 방법론은 Block, Element,

dding_yull

Bolck,Element,Modifier : CSS 클래스 이름을 지을 때 규칙 B.E.M이 중요한 이유 : 협업을 할 때 css 클래스의 이름의 규칙이 없다면 잘 세워뒀던 HTml, Css가 한번에 무너져버릴 수 있습니다. : 이름 설정할 때 표시에 따라 (왼쪽 : 안좋은 예 / 오른쪽 : BEM이 적용 된 좋은 예) Block 가장 바깥쪽 상위 요소인 독립적 블록이다. 때문에 클래스 선택자 사용이 가능하다 재사용이 가능한 것이 특징이다 때문에 margin, padding처럼 주변 정렬에 영향을 주는

tootb

CDD (Component-Drivent Development) 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 개발 진행 구조화된 CSS CSS 전처리기 (CSS Preprocessor) CSS가 구조적으로 작성될 수 있게 도움주는 도구 SASS (Syntactically Awesome Style Sheet) CSS 전처리기 중 가장 유명한, CSS를 확장해 주는 스크립팅 언어 SCSS 코드를 읽어서 전처리한 다음 컴파일 해서 전역 CSS 번들 파일을 만들어 주는 전처리기 역할을 함 => 문제 발생(컴파일 된 CSS 용량이 너무 커져버림) BEM & OOCSS & SMACSS CSS 문제를 보완하기 위해 대두됨 3가지 모두 같은 지향점을 가짐 코드의 재사용 코드의 간결화 (for 용이한 유지보수) 코드의 확장성 코드의 예측성(클래스 명으로 의미 예측) CSS-in-JS 등장 Styled-Component

xmun74

🎁 정리 CSS-in-CSS css 전처리기(sass,scss), css 모듈, css 프레임워크(tailwind, bootstrap 등) 장점 빌드타임에서 CSS가 변환되므로 렌더링 시 추가 구문분석 필요없음 css 모듈에서 클래스명이 고유해짐으로 클래스명 중복 문제 해결함 css 파일이 따로 되어있어서 분업에 용이함 단점 많은 각 CSS파일 유지보수 관리해야함 CSS-in-JS styled-components, emotion 등 장점 컴포넌트화 해서 추상화 클래스명 작성 안해도 자동 생성해줘서 코드 경량화, 코드 가독성 좋음 JS 상태를 CSS에서 사용 가능 현재 사용 중인 스타일만 DOM으로 출력됨 단점 느린 인터랙션 - 상대적으로 CSS 모듈보다 느림. 렌더링마다 JS 안 CSS 로딩,파싱해야해서 속도가 느림 라이브러리 설치해야하므로 번들 크기가 커짐