Error en la base de datos de WordPress: [Table 'nkkvzpeo_tps.backupdb_wp_9761_wfLiveTrafficHuman' doesn't exist]
SHOW FULL COLUMNS FROM `backupdb_wp_9761_wfLiveTrafficHuman`

Error en la base de datos de WordPress: [Table 'nkkvzpeo_tps.backupdb_wp_9761_wfLiveTrafficHuman' doesn't exist]
SHOW FULL COLUMNS FROM `backupdb_wp_9761_wfLiveTrafficHuman`

bem 예제 - TPS
 

bem 예제

BEM은 특히 이중 밑줄이나 대시가 필요하다는 오해가 반복됩니다. 예를 들어 .menu-button__submit-icon과 같은 하이픈으로 구분된 이름을 지원하기 위해 기본 권장 사항입니다. 그러나 .menuButton_submitIcon과 같은 파스칼 대/소문자 접근 방식을 채택하는 것은 유효합니다. 문서에서 예제를 참조하십시오. 요소 디렉토리의 이름은 이중 밑줄(__)으로 시작합니다. 예를 들어, 헤더/__로고/및 메뉴/__항목/. 또한 범용 선택기는 프로젝트 코드를 예측할 수 없게 만들 수 있습니다. 예를 들어 범용 라이브러리 구성 요소의 스타일에 영향을 줄 수 있습니다. .mod-talk__inner 예제의 경우 가능하면 수정자를 블록에 유지하는 것을 선호합니다. 따라서 구성 요소에 여러 수준이 있는 경우 클래스 이름의 각 수준을 나타내려고 하지 마십시오. BEM은 구조적 깊이를 전달하기 위한 것이 아닙니다.

구성 요소에서 자식 요소를 나타내는 BEM 클래스 이름은 기본/블록 이름과 하나의 요소 이름만 포함해야 합니다. 아래 예제에서 photo__caption__quote는 BEM의 잘못된 사용이지만 photo__quote는 더 적합합니다. 태그와 클래스를 동일한 선택기(예: button.button)에 결합하면 CSS 규칙이 보다 구체적으로 구체화되므로 태그를 다시 정의하기가 더 어렵습니다. 블록은 웹 사이트의 개체를 나타냅니다. 코드의 더 큰 구조 청크로 생각하십시오. 오늘날 모든 웹 사이트에서 가장 일반적인 블록은 헤더, 콘텐츠, 사이드바, 바닥글 및 검색입니다. BEM의 블록은 항상 CSS 클래스를 연결하기 위한 시작점입니다. 몇 가지 블록 예제를 살펴보십시오: 이 예제에서는 선택기 이름에서 스타일이 검색 양식에 속한다는 것을 알 수 없습니다. 클래스를 사용하면 더 명확하게 할 수 있습니다. 수업에는 명확하게 작성할 수 없는 제한이 없습니다.

예를 들어 다음과 같이 작성할 수 있습니다: 약어 «BEM» – 블록/요소/수정자. 모든 디자인이나 레이아웃은 사이드바와 같은 블록에서 시각적으로 분할될 수 있습니다. 각 블록에는 하나 또는 여러 요소가 포함될 수 있습니다. 요소에는 상태 수정자(활성, 사용 안 함), 테두리, 너비, 색상 등의 변경에 대한 추가 클래스가 있을 수 있습니다. 디자인을 시각적 블록으로 분리하는 아이디어는 새로운 것이 아니며 BEM이 제공하는 것은 클래스 이름을 더 길게 만들고 항상 블록 제목에서 요소를 신뢰할 수 있게 만들고 모든 클래스를 전역으로 선언하는 것입니다. 그것은 말 그대로 아무것도 도움이되지 않으며 프로젝트 마크 업의 슬픈 결과로 이어집니다. 다음은 BEM 사용의 모든 문제입니다: 범용 탐색 메뉴 블록을 구현하고 모든 BEM 명명 규칙을 따르는 예제를 사용합니다. BEM 스타일로 작성하는 CSS 개발자가 작성할 수 있는 예제는 다음과 같습니다. 부트 스트랩을 사용한 적이 있다면 가장 좋은 예는 버튼 크기입니다. 단추 크기는 단추 자체의 크기 변형으로 수정자입니다. 종종 개발자는 구성 요소에 대한 모든 여백을 재설정하여 시작 (* { 여백 : 0; 패딩 : 0; }), 그러나 그들은 여전히 레이아웃 (예를 들어, 여백 : 12px; 패딩 : 30px;)와 동일하게 설정합니다. 혼합은 단일 DOM 노드에서 여러 BEM 엔터티(블록, 요소, 수정자)를 호스트한다는 것을 의미합니다.



Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies