Відмінності між версіями «Методологія БЕМ»
3366491 (обговорення • внесок) (Створена сторінка: БЕМ (Блок, Елемент, Модифікатор) - компонентний підхід до веб-розробці. В його основі леж...) |
3366491 (обговорення • внесок) |
||
| Рядок 1: | Рядок 1: | ||
БЕМ (Блок, Елемент, Модифікатор) - компонентний підхід до веб-розробці. В його основі лежить принцип поділу інтерфейсу на незалежні блоки. Він дозволяє легко і швидко розробляти інтерфейси будь-якої складності і повторно використовувати існуючий код, уникаючи «Copy-Paste». | БЕМ (Блок, Елемент, Модифікатор) - компонентний підхід до веб-розробці. В його основі лежить принцип поділу інтерфейсу на незалежні блоки. Він дозволяє легко і швидко розробляти інтерфейси будь-якої складності і повторно використовувати існуючий код, уникаючи «Copy-Paste». | ||
| + | === Мета методології БЕМ === | ||
| + | Мета даної методології - розробка сайтів, які необхідно швидко запускати і довго підтримувати. Методологія допомагає створювати розширювані та повторно використовувані компоненти інтерфейсу. | ||
| + | |||
| + | Основна концепція - легка підтримка проектів з часом і повторне використання компонентів. | ||
| + | |||
| + | Головна стратегія БЕМ полягає в організації CSS-коду в повторно використовувані модулі за допомогою розумної системи іменування. | ||
| + | == Блок == | ||
| + | Блок - це Функціонально незалежний компонент сторінки, який може бути повторно використаний. В HTML блоки представлені атрибутом class. Назва блоку характеризує призначення блоку( «що це?» - «меню»: menu, «кнопка»: button), а не стан ( «який, як виглядає?» - «червоний»: red, «великий»: big). | ||
| + | |||
| + | '''<big>Приклад:</big>''' | ||
| + | |||
| + | <nowiki><div class = "error"> </div></nowiki> | ||
| + | - ''Вірно. Семантично осмислений блок `error`'' | ||
| + | |||
| + | <nowiki><div class = "red-text"></div></nowiki> - | ||
| + | ''Неправильно. Описується зовнішній вигляд'' | ||
| + | |||
| + | * Блок не повинен впливати на своє оточення, т. Е. Блоку не слід задавати зовнішню геометрію (у вигляді відступів, кордонів, що впливають на розміри) і позиціонування. | ||
| + | |||
| + | * В CSS по БЕМ також не рекомендується використовувати селектори за тегами або id. | ||
| + | |||
| + | Таким чином забезпечується незалежність, при якій можливе повторне використання або перенесення блоків з місця на місце. | ||
Версія за 02:01, 4 січня 2019
БЕМ (Блок, Елемент, Модифікатор) - компонентний підхід до веб-розробці. В його основі лежить принцип поділу інтерфейсу на незалежні блоки. Він дозволяє легко і швидко розробляти інтерфейси будь-якої складності і повторно використовувати існуючий код, уникаючи «Copy-Paste».
Мета методології БЕМ
Мета даної методології - розробка сайтів, які необхідно швидко запускати і довго підтримувати. Методологія допомагає створювати розширювані та повторно використовувані компоненти інтерфейсу.
Основна концепція - легка підтримка проектів з часом і повторне використання компонентів.
Головна стратегія БЕМ полягає в організації CSS-коду в повторно використовувані модулі за допомогою розумної системи іменування.
Блок
Блок - це Функціонально незалежний компонент сторінки, який може бути повторно використаний. В HTML блоки представлені атрибутом class. Назва блоку характеризує призначення блоку( «що це?» - «меню»: menu, «кнопка»: button), а не стан ( «який, як виглядає?» - «червоний»: red, «великий»: big).
Приклад:
<div class = "error"> </div> - Вірно. Семантично осмислений блок `error`
<div class = "red-text"></div> - Неправильно. Описується зовнішній вигляд
- Блок не повинен впливати на своє оточення, т. Е. Блоку не слід задавати зовнішню геометрію (у вигляді відступів, кордонів, що впливають на розміри) і позиціонування.
- В CSS по БЕМ також не рекомендується використовувати селектори за тегами або id.
Таким чином забезпечується незалежність, при якій можливе повторне використання або перенесення блоків з місця на місце.
