{"id":20112450,"url":"https://github.com/andy87/info-bem_html_styling","last_synced_at":"2026-02-04T01:41:26.598Z","repository":{"id":87444284,"uuid":"441942689","full_name":"andy87/info-bem_html_styling","owner":"andy87","description":"Пример моей вёрстки. C BEM подходом.","archived":false,"fork":false,"pushed_at":"2022-02-24T11:25:51.000Z","size":42623,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-06T22:09:03.191Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andy87.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-26T17:04:57.000Z","updated_at":"2024-05-28T20:35:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"5c8299c2-2425-4e3c-a7d1-fa3c02842152","html_url":"https://github.com/andy87/info-bem_html_styling","commit_stats":null,"previous_names":["andy87/info-bem_html_styling"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/andy87/info-bem_html_styling","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andy87%2Finfo-bem_html_styling","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andy87%2Finfo-bem_html_styling/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andy87%2Finfo-bem_html_styling/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andy87%2Finfo-bem_html_styling/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andy87","download_url":"https://codeload.github.com/andy87/info-bem_html_styling/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andy87%2Finfo-bem_html_styling/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29063974,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-04T00:26:14.114Z","status":"ssl_error","status_checked_at":"2026-02-04T00:23:06.435Z","response_time":96,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T18:20:23.253Z","updated_at":"2026-02-04T01:41:26.576Z","avatar_url":"https://github.com/andy87.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n## Пример моей вёрстки.  \n\n* [hyper-guard](http://html.andy87.ru/hyper-guard/index.html)\n* [city-dynamic](http://html.andy87.ru/intermobility/city-dynamic/index.html)\n* [evacharge](http://html.andy87.ru/intermobility/evacharge/index.html)\n* [is-telecom](http://html.andy87.ru/intermobility/is-telecom/index.html)\n* [pampers-docdeti](http://html.andy87.ru/pampers-docdeti.pgbonus/index.html)\n* [energoprof-group](https://energoprof-group.ru)\n\n## Как я верстаю?  \n\nЯ соблюдаю принцып: \"Блок, Элемент, Модификатор\".  \n\nУ каждого тега имеется аттрибут `class`, и в коде он первый из аттрибутов.  \nВёрстка делится на логические блоки, каждый основной блок логической части вёрстки получает \nимя класса вида: `block__####`.  \nВнутри (`block__####`) элементы именуются согласно типу элемента или согласно его сути, \nпо шаблону `b_####--????` ( имя класса содержет имя блока ).  \nЭлементы могут иметь модификаторы ( дополнительный клас изменяющий или/и дополняющий CSS \nсвойства конкретного элемента), их имена имеют вид `__****`.  \nБлоки, разумеется, могут быть вложены друг в друга.  \n\n**Legend:**  \n`####` - имя блока (одно-два слова)  \n`????` - имя элемента (одно-два слова)  \n`****` - имя модификатора (одно-два слова)\n\n**компоненты.**  \nКак модификаторы не привязанные к конкретному блоку и используется как обычный класс.  \nПример:\n```css\n.none { display: none; } \n.t-left { text-align: left; } \n.f-left { float: left; } \n```\n\n#### Наглядный пример HTML кода с BEM именованием:\n```HTML\n\u003cdiv class=\"block__content\"\u003e\n    \u003cdiv class=\"b_content--wrapper\"\u003e\n\n      \u003cheader class=\"block__header\"\u003e\n        \u003cdiv class=\"b_header--wrapper\"\u003e\n          \n          \u003ca class=\"b_header--link __logo\" href=\"/\"\u003e\n            \u003cimg class=\"b_header--img\" src=\"/img/blocks/header/logo.png\" alt=\"\"/\u003e\n          \u003c/a\u003e\n          \n          \u003cdiv class=\"b_header--layout\"\u003e\n            \u003ca class=\"b_header--link\" href=\"/\"\u003e\n              \u003ci class=\"ico __mail\"\u003e\u003c/i\u003e\n              Написать письмо\n            \u003c/a\u003e\n          \u003c/div\u003e\n          \n        \u003c/div\u003e\n      \u003c/header\u003e\n\n      \u003cdiv class=\"block__welcome\"\u003e\n        \u003cdiv class=\"b_welcome--wrapper\"\u003e\n          \u003cdiv class=\"b_welcome--overlay\"\u003e\n            \n            \u003cdiv class=\"b_welcome--layer __left\"\u003e\n              \u003cimg class=\"b_welcome--img\" src=\"/img/blocks/welcome/main.png\" alt=\"\"\u003e\n            \u003c/div\u003e\n            \n            \u003cdiv class=\"b_welcome--layer __right\"\u003e\n              \u003ch1 class=\"b_welcome--title\"\u003eTitle\u003c/h1\u003e\n            \u003c/div\u003e\n            \n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n\n      \u003cdiv class=\"block__service\"\u003e\n        \u003cul class=\"b_service--wrapper\"\u003e\n          \n          \u003cli class=\"b_service--item none\"\u003e\n            \u003cimg class=\"b_service--ico\" src=\"/img/blocks/service/ico_1.svg\" alt=\"\"\u003e\n            \u003ch3 class=\"b_service--title\"\u003e\n              first\n            \u003c/h3\u003e\n            \u003cbutton class=\"b_service--button\" onclick=\"app.service.goTo( app.service.first.id );\"\u003e\n              Далее\n            \u003c/button\u003e\n          \u003c/li\u003e\n          \n          \u003cli class=\"b_service--item\"\u003e\n            \u003cimg class=\"b_service--ico\" src=\"/img/blocks/service/ico_2.svg\" alt=\"\"\u003e\n            \u003ch3 class=\"b_service--title\"\u003e\n              trade\n            \u003c/h3\u003e\n            \u003cbutton class=\"b_service--button\" onclick=\"app.service.goTo( app.service.trade.id );\"\u003e\n              Далее\n            \u003c/button\u003e\n          \u003c/li\u003e\n          \n          \u003cli class=\"b_service--item\"\u003e\n            \u003cimg class=\"b_service--ico\" src=\"/img/blocks/service/ico_3.svg\" alt=\"\"\u003e\n            \u003ch3 class=\"b_service--title t-left\"\u003e\n              cabinet\n            \u003c/h3\u003e\n            \u003cbutton class=\"b_service--button\" onclick=\"app.service.goTo( app.service.cabinet.id );\"\u003e\n              Далее\n            \u003c/button\u003e\n          \u003c/li\u003e\n          \n        \u003c/ul\u003e\n      \u003c/div\u003e\n\n    \u003c/div\u003e\n  \u003c/div\u003e\n```\nВ примере блок `header`. его элемент ссылка(`b_header--link`) имеет модификатор `__logo`.  \nТак же в блоке используется компонент `ico` с модификатором `__mail`.\n\nИмён может быть множжество, но все они обязаны соответсвовать структуре документа или назначению блока/элемента.\nХотя иногда допустимо именовать элемент не согласно структуре, а по его назначению:  \n`b_header--img` --\u003e `b_header--logo`\n\n-----  \n\n**Каждый блок:**\n- подобен микросервису, показывает свои данные (живёт не зная о других блоках)\n- имеет собственный файл стилей(less)  \n\n-----  \n\n**Преимущества:**  \n- **Отсутствие привязка к тегу**.  \n  SEO'шники и т.п. сколь угодно часто могут просить менять тэги с DIV на SPAN, с NAV на DIV и прочее...  \n\n- **Персонализация элементов.**  \n  У блоков и элементов персональные имена, благодаря чему элемент не спутать с другими элементами.  \n\n- **отсутствие перегружености классов**  \n  По сути у элемента может быть максимум 3 класса ( имя, модификатор, компонент).  \n\n- **Переиспользование.**  \nСоблюдая рекомандации легко переиспользовать как весь блок так и отдельные его элементы.  \n\n- **HTML.**  \n  Соблюдая рекомандации HTML код даст полное представление на какой элемент страницы ты смотришь.  \n\n- **Адаптив.**  \n  При разработке адаптива перезатираются свойства всего единственного класса.  \n\n- **IDE.**  \n  Автодополнение/Поиск/Рефакторинг при таком именовании очень кофмфортные.  \n\n- **Взаимодействия.**  \n  Общаясь с другим разработчиком вполне понятно о каком блоке идёт речь и где распологгаются его ресурсы.  \n\n- **GIT.**  \n  Используя имена блоков и элементов в коммитах ***Описание коммитов*** становится надлядней и понятней.  \n\n-----  \n\n**Недостатки:**\n- При скудной фантазии не хватает имён блокам и модификаторам  \n- каждому блоку надо выбрать подходящее и уникальное имя  \n...хотя это в целом общие проблемы при вёрстке\n\n-----  \n\n**Пример имён основных элементов:**  \n\n.b_name--overlay  \n.b_name--layout  \n.b_name--layer  \n.b_name--box  \n.b_name--window  \n.b_name--head  \n.b_name--body  \n.b_name--footer  \n.b_name--ico  \n.b_name--img  \n.b_name--pic  \n.b_name--text ( модификаторы: __small __large __total )   \n.b_name--title  \n.b_name--header  \n.b_name--form  \n.b_name--label  \n.b_name--button  \n.b_name--input  \n.b_name--preview  \n.b_name--logo  \n.b_name--......  и др.\n\n-----  \n\n## Структура ресурсов  при разработке.\nМожно получить дополнительное \"удобство\" если при разработке проекта сформировать структуру с группировкой файлов блока, \nчто бы всегда было чёркое понимание где лежат/искать файлы определённого блока. В большинстве это не доступно \n\"из коропки\" и при разработке с помощтю фреймворков, реализация потребует дополнительных настроек.  \n\n### By Block  \n**Удобство:** Файлы блока расположены в одном месте *при работе с блоком, в окне иерархии проекта \nне будет раскрыто несколько уровней директорий, что бы иметь доступ ко всем файлам блока*.  \n#### *пример:*  \n```\n┗📁 source\n  ┗📁 blocks\n    ┠📁 banner\n    ┃ ┠📄 banner__view.tpl\n    ┃ ┠📄 banner__script.js\n    ┃ ┠📄 banner__style.less\n    ┃ ┠📄 banner__style.css\n    ┃ ┗📁 img\n    ┃   ┠📄 background.png\n    ┃   ┗📄 icon.svg\n    ┗📁 menu\n      ┠📄 menu__view.tpl\n      ┠📄 menu__script.js\n      ┠📄 menu__style.less\n      ┠📄 menu__style.css\n      ┗📁 img\n        ┠📄 background.png\n        ┗📄 icon.svg\n... и так далее\n```\n  \n  \nВ большинстве фреймворков получается структура **по типу**, в которой я бы советовал добавить в директории ресурсов \nродительскую папку `blocks` которая должна содержать файлы относящиеся исключительно к блокам, дополнительно она \nв пути к файлу укажет на причастность файла к блокам. *Если внезапно открывается файл и сразу нет представления что \nза файл открылся.*\n\n### By Type\n**Удобство:** дирректория сожержет файлы определённого типа.  \nВсе ресурсы сгруппированы по типу (все скрипты в одном месте, все файлы стилей одном месте и т.д.).\n#### *пример:*\n```\n┠📁 source \n┃ ┠📁 views \n┃ ┃ ┗📁 blocks \n┃ ┃   ┠📄 banner.tpl\n┃ ┃   ┗📄 menu.tpl\n┃ ┠📁 styles \n┃ ┃ ┗📁 blocks \n┃ ┃   ┠📄 banner.less\n┃ ┃   ┗📄 menu.less\n┃ ┗📁 scripts \n┃   ┗📁 blocks \n┃     ┠📄 banner.js\n┃     ┗📄 menu.js\n┗📁 web \n  ┠📁 img \n  ┃  ┠📁 blocks \n  ┃  ┃ ┠📁 banner \n  ┃  ┃ ┃ ┠📄 background.png\n  ┃  ┃ ┃ ┗📄 icon.svg\n  ┃  ┃ ┗📁 menu \n  ┃  ┃   ┠📄 background.png\n  ┃  ┃   ┗📄 icon.svg\n  ┗📁 css \n    ┗📁 blocks \n      ┠📄 banner.css\n      ┗📄 menu.css\n... и так далее  \n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandy87%2Finfo-bem_html_styling","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandy87%2Finfo-bem_html_styling","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandy87%2Finfo-bem_html_styling/lists"}