[{{mminutes}}:{{sseconds}}] X
Пользователь приглашает вас присоединиться к открытой игре игре с друзьями .
Css по методологии БЭМ
(0)       Используют 4 человека

Комментарии

Ни одного комментария.
Написать тут
Описание:
Стили взяты с сайта БЭМ Яндекс
Автор:
vega-s
Создан:
18 ноября 2021 в 22:41 (текущая версия от 19 ноября 2021 в 00:14)
Публичный:
Нет
Тип словаря:
Слова
Текст для игры будет составляться из слов, перемешанных в случайном порядке.
Информация:
Тренерует набирать сложные тексты, вырабатывает насмотренность верстки, стилей и набор

https://ru.bem.info/methodology/html/
Источник https://ru.bem.info/methodology.min.css
Содержание:
@keyframes button-action-focus {
0% {
background-color:#ffdb4d
}to {
background-color:#fc0
}}@keyframes modal_theme_islands {
0% {
visibility: visible
margin: 0
opacity:1
}99% {
margin:0
}to {
visibility: hidden
margin: -9999px 0 0 -9999px
opacity:0
}}
@keyframes modal_theme_islands_visible {
0% {
opacity:0
}
to {
opacity:1
}}
@keyframes modal_theme_islands__content {
0% {
transform:scale(1)
}
to {
transform:scale(1.5)
}}
@keyframes modal_theme_islands_visible__content {
0% {
transform:scale(.75)
}
to {
transform:scale(1)
}}
.page {
font: 16px/2 Arial, sans-serif
display: -ms-flexbox
display: flex
-ms-flex-direction: column
flex-direction: column
margin: 0
-webkit-text-size-adjust: 100%
-ms-text-size-adjust: 100%
text-size-adjust:100%
}
.page__sitemap {
display:none
}
.page__menu {
position: fixed
top: 88px
overflow: hidden
overflow-y: auto
-webkit-overflow-scrolling: touch
width: 260px
height: calc(100vh - 80px)
-webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent)
mask-image:linear-gradient(to bottom, #000 90%, transparent)
}
@supports ((position: -webkit-sticky) or(position: sticky)) and(display: grid) {
@media (min-width: 1201px) {
.page__menu {
position: -webkit-sticky
position: sticky
top: 0
height: 100vh
margin-top:13px
}}}
.page:not(.page_promo) .page__main {
display: -ms-flexbox
display: flex
overflow: hidden
-ms-flex-direction: column
flex-direction: column
margin-left: 260px
border-bottom-left-radius: 10px
background: #fff
-ms-flex-pack: justify
justify-content:space-between
}
.page__head {
-ms-flex-order: -2
order:-2
}
.page__content, .page__side {
padding: 15px 20px 0 48px
background:#fff
}
.page__side {
margin-left: 260px
padding: 20px 20px 10px 48px
border-top-left-radius: 10px
-ms-flex-order: -1
order:-1
}
@media (max-width: 1200px) {
.page__menu {
font-size: 14px
line-height: 32px
width:233px
}
.page:not(.page_promo) .page__main, .page__side {
margin-left:233px
}}
@media (max-width: 800px) {
.page:not(.page_promo) .page__main, .page__side {
margin: 0
border-radius:0
}
.page__sitemap {
height: auto
margin-top:70px
}
.page__menu {
display:none
}
.page__content {
padding:15px 15px 0
}
.page__side {
-ms-flex-order: 0
order: 0
padding:25px 15px 0
}
.page__foot {
-ms-flex-order: 1
order:1
}}
@media print {
.page {
font-size: 14px
line-height:1.5
}}
@supports (display: grid) {
@media (min-width: 1201px) {
.page:not(.page_promo) {
display: -ms-grid
display: grid
min-height: 100vh
-ms-grid-rows: 70px 1fr auto
grid-template-rows: 70px 1fr auto
-ms-grid-columns: 260px minmax(0, 900px) minmax(160px, 1fr)
grid-template-columns:260px minmax(0, 900px) minmax(160px, 1fr)
}
.page__head, .page__sitemap {
grid-column:1/4
}
.page:not(.page_promo) .page__main {
margin: 0
border-radius: 10px
grid-column:2/3
}
.page__content {
-ms-flex-positive: 1
flex-grow: 1
padding-top:31px
}
.page__side {
margin: 0
padding: 13px 10px 10px 20px
background: 0 0
-ms-flex-order: initial
order:initial
}
@supports ((position: -webkit-sticky) or(position: sticky)) {
.page__side {
position: -webkit-sticky
position: sticky
top: 0
height:calc(100vh - 30px)
}}
.page__foot {
grid-column:2/3
}}}
.page {
background:linear-gradient(#052433 0%, #0b5174 100%)
}
.input {
-ms-touch-action: manipulation
touch-action:manipulation
}
.search {
position: absolute
z-index: 0
top: 0
right: 0
overflow: hidden
width: 160px
height:70px
}
.search_opened {
position: static
z-index: 1
overflow: visible
height:0
}
.search_opened .search__form {
border-left:1px solid rgba(255, 255, 255, .2)
}
.search_opened .search__submit {
position: absolute
right: -81px
background:#fc0
}
.search_opened .search__submit-icon, .search_opened .search__submit-icon:hover {
stroke:#000
}
.search__submit {
position: absolute
z-index: 1
top: 0
right: -80px
margin: 0
padding: 28px 31px 26px 32px
cursor: pointer
border: 0
outline: 0
background:0 0
}
.search__form {
position: absolute
z-index: 2
top: 0
bottom: 0
left: 81px
width: calc(100% - 241px)
height: 70px
background:#444
}
.search__form .input {
font-size: 17px
display: inline-block
width: calc(100% - 50px)
margin: 18px 0 0 20px
letter-spacing:1px
}
.search__form .input__control {
font: inherit
width: 100%
padding: 0
color: #fff
border: 0
outline: 0
background: 0 0
-webkit-appearance:none
}
.search__form .input__control::-webkit-input-placeholder {
opacity: 1
color:rgba(255, 255, 255, .6)
}
.search__form .input__control::-webkit-search-cancel-button {
display:none
}
.search__form .input__control::-moz-placeholder {
opacity: 1
color:rgba(255, 255, 255, .6)
}
.search__form .input__control:-ms-input-placeholder {
opacity: 1
color:rgba(255, 255, 255, .6)
}
@media (max-width: 800px) {
.search {
display:none
}
.search_opened {
position: absolute
z-index: 2
top: -20px
left: 0
display: block
width: calc(100% - 40px)
background:inherit
}
.search_opened .search__form {
display: block
border-left: 0
background:inherit
}
.search_opened .search__submit {
position: absolute
top: 39px
right: auto
left: 15px
padding: 0
background:0 0
}
.search_opened .search__submit-icon, .search_opened .search__submit-icon:hover {
stroke: #fff
stroke-width:1
}
.search__form {
position: static
display: block
width: auto
height: 47px
margin: 0 10px 0 15px
padding: 12px 0 5px 30px
border-bottom:1px solid #ccc
}
.search__form .input {
width: 100%
margin:18px 0 0
}
.search__submit {
top: -8px
left: -17px
width: 19px
height:19px
}}
.search__form {
background:#08364d
}
.search-icon {
width: 17px
height: 17px
fill: none
stroke: rgba(255, 255, 255, .65)
stroke-width:2
}
.search-icon:hover {
stroke:#fff
}
.breadcrumbs {
font-size: 17px
padding: 0
vertical-align: top
background:inherit
}
.breadcrumbs__item {
display: inline-block
margin: 0 10px 0 0
padding: 0
letter-spacing: 1px
color:#fff
}
.breadcrumbs__item::before {
margin-right: 11px
content: '/'
color:rgba(255, 255, 255, .8)
}
.breadcrumbs__item:first-child::before {
display:none
}
.breadcrumbs__link {
transition: color .3s
text-decoration: none
color:rgba(255, 255, 255, .8)
}
.breadcrumbs__link:hover, .lang-switcher__link:hover {
color:#fff
}
@media all and (max-width: 780px) {
.breadcrumbs {
position: static
margin: 5px 8px 0
padding:0
}
.breadcrumbs__item {
margin: 10px 5px 0
padding:0
}}
.logo {
display: inline-block
width: 30px
height:25px
}
.logo__logo {
transition:fill .3s
}
.logo, .logo:hover .logo__logo {
fill:#fff
}
@supports ((position: -webkit-sticky) or(position: sticky)) and(display: grid) {
@media (min-width: 1201px) {
.logo {
fill:#17a1e6
}}}
.lang-switcher {
letter-spacing: .2em
color:#fff
}
.lang-switcher__link {
text-decoration: none
color:rgba(255, 255, 255, .65)
}
.lang-switcher__separator {
display: inline-block
width: 1em
color:rgba(255, 255, 255, .65)
}
.lang-switcher__separator::before {
position: relative
left: .25em
content: '/'
}
.header__toggle {
position: absolute
z-index: 1
top: 0
right: 0
width: 70px
height: 70px
cursor:pointer
}
.header__toggle-line, .header__toggle-line::after, .header__toggle-line::before {
position: absolute
display: none
width: 25px
height: 2px
content: ''
cursor: pointer
border-radius: 1px
background:rgba(255, 255, 255, .65)
}
.header__toggle:hover .header__toggle-line::after, .header__toggle:hover .header__toggle-line::before {
background:#fff
}
.header__toggle-line::before {
top:-8px
}
.header__toggle-line::after {
bottom:-8px
}
.header__toggle-line, .header__toggle-line::after, .header__toggle-line::before {
transition:all .3s ease-in-out
}
.header__toggle_active {
z-index: 2
width: auto
height: auto
padding:36px 53px 36px 30px
}
.header__toggle_active .header__toggle-line, .header__toggle_active:hover .header__toggle-line {
background-color:transparent
}
.header__toggle_active .header__toggle-line::before {
top: 0
display: block
transform:rotate(45deg)
}
.header__toggle_active .header__toggle-line::after {
bottom: 0
display: block
transform:rotate(-45deg)
}
.header__toggle_active .header__toggle-line {
display:block
}
@media (max-width: 800px) {
.header__toggle-line, .header__toggle-line::after, .header__toggle-line::before {
display: block
width: 30px
height: 1px
background:#fff
}
.header__toggle {
z-index: 2
width: auto
height: auto
margin: 15px 15px 0
padding: 10px 30px 16px 0
cursor:pointer
}}
.sitemap {
padding: 29px 30px 50px
transition: color .3s
color: #fff
border-top:1px solid rgba(255, 255, 255, .2)
}
.sitemap__section {
margin-right:3%
}
.sitemap__section:last-child {
margin-right:0
}
.sitemap__title {
font-size: 18px
font-weight: 400
margin: 0 0 20px -11px
padding-bottom: 19px
text-indent: 10px
border-bottom:1px solid
}
.sitemap__current {
font-weight: 400
margin: -5px 0 0 -10px
padding: 5px 10px
white-space: nowrap
color: #000
background:#fc0
}
.sitemap__tree {
line-height: 1.2
margin: 0
padding: 0
list-style:none
}
.sitemap__tree-item-1 {
font-size: 16px
margin:0 0 16px
}
.sitemap__tree-item-1 + .sitemap__tree-item-3, .sitemap__tree-item-1 + :not(.sitemap__tree-item-2) ~ .sitemap__tree-item-3, .sitemap__tree-item-2 {
font-size: 16px
margin:-8px 0 20px 30px
}
.sitemap__tree-item-3 {
font-size: 14px
margin:-18px 0 14px 60px
}
.sitemap__link {
transition: all .3s
text-decoration: none
color:#fff
}
.sitemap__link:link:hover {
opacity:.8
}
.sitemap__link:visited {
color:#9ba7ad
}
@media (max-width: 800px) {
.sitemap {
padding: 0 15px
border:0
}
.sitemap__section {
width: auto
margin:0
}
.sitemap__title {
margin: 0
padding:0
}
.sitemap__tree {
margin:20px 10px 40px
}}
.sitemap__title {
border-color:rgba(161, 207, 230, .3)
}
.nav, .nav__item {
margin: 0
padding: 0
list-style:none
}
.nav {
display:block
}
.nav__item {
line-height: 1.3
word-break:break-word
}
.nav__item:last-child {
padding-bottom:70px
}
.nav__item_current .nav__title {
padding: 8px 5px 8px 29px
color: #000
background:#fc0
}
.nav__item:last-child {
margin-bottom:20px
}
.nav__item_current .nav__title::before {
transform: none
background-image: url("data:image/
}
.nav__title {
position:relative
}
.nav__title::before {
position: absolute
top: 10px
left: 11px
width: 13px
height: 13px
content: ""
transform: rotate(-90deg)
background-image: url("data:image/
background-size:cover
}
.nav__chapter {
font-size: 14px
line-height: 1.2
display:block
}
.nav__content {
display:none
}
.nav__content_visible, .nav__link {
display:block
}
.nav__link {
padding: 8px 10px 8px 30px
transition: color .3s
text-decoration: none
color:rgba(255, 255, 255, .8)
}
.nav__link:hover {
color:#fff
}
@media (max-width: 1200px) {
.nav {
width:233px
}
.nav__title::before {
position: absolute
top: 12px
left: 5px
width: 9px
height:9px
}
.nav__item_current .nav__title, .nav__link {
padding-left:18px
}}
@media (max-width: 800px) {
.nav {
display:none
}}
.aside, .aside__group {
display: -ms-flexbox
display:flex
}
.aside {
-ms-flex-align: center
align-items: center
-ms-flex-pack: justify
justify-content:space-between
}
.aside__group {
-ms-flex-wrap: wrap
flex-wrap:wrap
}
.aside__rating, .aside__tags {
margin:0 16px 8px 0
}
.aside__rating {
min-height: auto
margin-top: -3px
margin-right: 32px
white-space:nowrap
}
.aside__rating .doc-rating__total {
display:inline-block
}
.aside__rating .doc-rating__total::after {
content: ',\00a0'
}
.aside__rating .doc-rating__stars {
display: inline-block
margin: 0 10px 0 0
vertical-align:top
}
.article__heading:hover .article__heading-anchor::before, .aside__rating .doc-rating__value {
display:inline-block
}
.aside__social {
margin: 0 26px 0 0
white-space:nowrap
}
.aside__tags .article-tags__tag {
margin-bottom:8px
}
.aside__tags .article-tags__link {
color: #000
border-color:#000
}
.aside__social .social-likes__service {
margin-right:3px
}
.aside__amendments {
margin:0
}
@media (max-width: 1200px) {
.aside__amendments[class] {
color: #000
background:#eee
}}
.aside__amendments .article-amendments__link {
color:inherit
}
@media (max-width: 1024px) {
.aside {
-ms-flex-wrap: wrap
flex-wrap:wrap
}
.aside__group {
width:100%
}
.aside__amendments {
width: 100%
margin:8px 0 0 -10px
}}
@media (max-width: 800px) {
.aside__group {
-ms-flex-wrap: wrap
flex-wrap:wrap
}
.aside__rating, .aside__tags {
-ms-flex-positive: 0
flex-grow:0
}
.aside__amendments[class] {
position: relative
left: 15px
margin: 15px 0 0 -30px
padding:20px 15px
}}
@media (min-width: 1201px) {
@supports (display: grid) {
.aside, .aside__group {
display:block
}
.aside__tags {
margin:2px 0 25px
}
.aside__tags .article-tags__link {
color: #fff
border-color:#fff
}
.aside__rating {
margin: 24px 0
color:#fff
}
.aside__amendments {
width: -webkit-fit-content
width: -moz-fit-content
width: fit-content
margin:35px 0 0 -10px
}}}
@media print {
.footer {
display:none
}}
.footer {
font-size:16px
}
.footer__layout {
display: -ms-flexbox
display: flex
-ms-flex-pack: center
justify-content: center
margin: 28px 0
color:#fff
}
.footer__community {
font-weight: 600
margin: 0
padding:0
}
.footer__channel {
display: inline-block
margin-right:31px
}
.footer__channel:last-child {
margin:0
}
.footer__channel-link {
transition: all .3s
text-decoration: none
color:#fff
}
.footer__channel-link:hover {
opacity:.8
}
@media (max-width: 800px) {
.footer__layout {
margin:20px 15px
}
.footer__channel {
margin-right:15px
}}
.legos::before {
position: absolute
right: 0
left: 0
height: 7px
margin-top: 112px
content: ''
background:0 0 repeat-x
}
.legos, .legos__lego {
display: inline-block
height:119px
}
.legos {
position: absolute
top: -119px
overflow: hidden
margin-bottom: -12px
text-align: center
white-space: nowrap
width:100%
}
.legos__lego {
width: 44px
background:0 0 repeat-x
}
.legos__lego_width_2 {
width:66px
}
.legos__lego_width_3 {
width:88px
}
.article__list, .article__paragraph {
clear: left
margin:0 0 16px
}
.article__thematic-break {
clear:left
}
.article__blockquote, .article__table {
clear: left
margin:0 0 16px
}
@media print {
.article__blockquote, .article__list, .article__paragraph, .article__table, .article__thematic-break {
max-width:auto
}}
.article__list .article__list, .article__list-item, .article__list-item .article__paragraph:only-child {
margin:0
}
@media print {
.article__list-item {
margin-top:8px
}}
@media screen {
.article__paragraph + .article__list {
margin-top:-16px
}}
.article__thematic-break::before {
visibility: hidden
content: '-'
}
.article__thematic-break {
margin: -16px 0 16px
padding: 0
color: #ccc
border: 0
background: url(data:image/gifbase64,R0lGODlhBgAEAPAAAMzMzP///ywAAAAABgAEAEACB4yBgWCX2woAOw==) repeat-x 0 75%
}
.article__heading {
font: 300 100% 'OpenSans-SemiBold', Arial, sans-serif
position: relative
z-index: 1
clear: left
padding:0
}
.article__heading_level_1 {
font-size: 50px
line-height: 64px
float: left
margin:0 0 34px -2px
}
.article__heading_level_2 {
font-size: 40px
line-height: 48px
margin:48px 0 16px -1px
}
.article__heading_level_3 {
font-size: 34px
line-height: 48px
margin:34px 0 14px
}
.article__heading_level_4 {
font-size: 28px
line-height: 32px
margin:29px 0 19px
}
.article__heading_level_5 {
font-size: 24px
line-height: 32px
margin:30px 0 18px
}
.article__heading_level_6 {
font-size: 20px
line-height: 32px
margin:31px 0 17px
}
.article__heading_level_1 + .article__heading_level_2 {
position: relative
top: -7px
margin-bottom:9px
}
.article__heading_level_1 + .article__heading_level_2 + .article__heading_level_3 {
margin-top:11px
}
.article__heading_level_3 + .article__heading_level_4 {
margin-top:27px
}
.article__heading_level_4 + .article__heading_level_5 {
margin-top:-2px
}
.article__heading_level_5 + .article__heading_level_6 {
margin-top:-1px
}
@media print {
.article__heading-anchor {
display:none
}}
.article__heading-anchor::before {
position: absolute
display: none
margin: -.15ex 0 0 -1.2em
padding: 0 .4em
content: '§'
color:#ccc
}
.article__heading_level_1:hover .article__heading-anchor::before {
display:none
}
.article__heading[class] .article__inline-code {
font: inherit
background:inherit
}
.article__table {
width: 100%
border-spacing: 0
border-collapse: collapse
word-break:keep-all
}
.article__table::after {
display: block
margin-bottom: -7px
content: '\00a0'
}
.article__table-cell {
text-align: left
vertical-align: top
border-bottom:1px solid #e9e9e9
}
.article__table-cell::after {
height: 1px
content: ''
border-bottom:1px solid #fbfbfb
}
.article__table-cell_heading {
font-weight: 600
padding:0 16px 6px 0
}
.article__table-cell_heading:last-child {
padding-right:0
}
.article__table-cell {
padding:9px 16px 6px 0
}
.article__blockquote {
padding: 0 16px
border-left: 4px solid #e9e8e6
background:rgba(240, 240, 235, .4)
}
.article__code {
font: 16px/1.5 'Courier New', monospace
overflow-x: auto
-webkit-overflow-scrolling: touch
margin: 0 0 16px
padding: 16px 20px 16px 47px
white-space: pre
color: #657b83
background:rgba(240, 240, 235, .4)
}
.article__blockquote .article__code {
width: auto
margin:0 -16px 16px
}
.article__code_correctHeight {
margin-bottom:24px
}
@media print {
.article__blockquote, .article__code {
border: 0
background:0 0
}}
@media screen {
.hljs-comment, .hljs-doctype, .hljs-pi {
color:#93a1a1
}
.css .hljs-tag, .hljs-addition, .hljs-keyword, .hljs-request, .hljs-status, .hljs-winutils, .method {
color:#859900
}
.hljs-command, .hljs-doctag, .hljs-hexcolor, .hljs-link_url, .hljs-number, .hljs-regexp, .hljs-rule .hljs-value, .hljs-string, .hljs-tag .hljs-value {
color:#2aa198
}
.css .hljs-function, .hljs-built_in, .hljs-chunk, .hljs-decorator, .hljs-id, .hljs-identifier, .hljs-localvars, .hljs-name, .hljs-title {
color:#268bd2
}
.hljs-attribute, .hljs-class .hljs-title, .hljs-constant, .hljs-link_reference, .hljs-parent, .hljs-type, .hljs-variable {
color:#b58900
}
.css .hljs-pseudo, .hljs-attr_selector, .hljs-cdata, .hljs-header, .hljs-pragma, .hljs-preprocessor, .hljs-preprocessor .hljs-keyword, .hljs-shebang, .hljs-special, .hljs-subst, .hljs-symbol, .hljs-symbol .hljs-string {
color:#cb4b16
}
.hljs-deletion, .hljs-important {
color:#dc322f
}
.hljs-link_label {
color:#6c71c4
}}
.article__strong {
font: 16px/1.9 'OpenSans-SemiBold', Arial, sans-serif
}
@media print {
.article__strong {
font-size: inherit
line-height:inherit
}}
.article__image {
max-width: 100%
margin:7px 0 -1px
}
.article__inline-code {
font-family: 'Courier New', monospace
font-size: 16px
line-height: 1.8
padding: 0 2px
border-radius: 3px
background:rgba(240, 240, 235, .5)
}
@media print {
.article__inline-code {
line-height:inherit
}}
.article__link {
transition: all .3s
text-decoration:none
}
.article__link[name]:empty {
display: block
min-height: 16px
margin-bottom:-32px
}
@media screen {
.article__link:link {
color:#04b
}
.article__link:visited {
color:#909
}
.article__link:hover {
color:#c00
}}
@media print {
.article__link {
color:inherit
}
.article__link[name] {
display:none
}
.article__link::after {
content: ' (' attr(href) ')'
}}
@media (max-width: 800px) {
.article * {
line-height:1.5
}
.article__heading, .article__heading-anchor {
line-height: 1.3
zoom:60%
}
.article__heading-anchor::before {
position: absolute
top: 0
right: -17px
bottom: -2px
left: 0
display: block
content: ''
}
.article__list {
padding-left:20px
}
.article__list-item {
margin-bottom:.3em
}
.article__code {
font-size: 14px
line-height: 1
margin-right: -15px
margin-left: -15px
padding:8px 15px
}}
.article-tags {
padding:0
}
@media print {
.article-tags {
display:none
}}
.article-tags__tag {
display: inline-block
margin:0 10px 15px 0
}
.article-tags__link {
font-size: 15px
display: inline-block
padding: 0 10px
transition: all .3s
text-decoration: none
color: rgba(255, 255, 255, .8)
border: 1px solid rgba(255, 255, 255, .7)
border-radius: 3px
background:rgba(255, 255, 255, .2)
}
.doc-rating {
font-size: 14px
line-height: 1.3
visibility:hidden
}
.doc-rating_js_inited {
visibility:visible
}
.doc-rating__title {
font-size:15px
}
.doc-rating__stars {
display: block
margin:8px 0 5px
}
.doc-rating__total, .doc-rating__value {
display:block
}
.rating-stars {
position: relative
width:70px
}
.rating-stars__gray, .rating-stars_active .rating-stars__item:hover .rating-stars__item {
color:#c5c5c5
}
.rating-stars_active .rating-stars__gray .rating-stars__item:hover {
cursor: pointer
color:#f9b708
}
.rating-stars__yellow {
position: absolute
z-index: 1
top: 0
overflow: hidden
color:#f9b708
}
.rating-stars__yellow::before {
content: '★★★★★'
}
.rating-stars_active:hover .rating-stars__yellow {
display:none
}
.popup {
position:absolute
}
.z-index-group_level_0 {
z-index:1000
}
.z-index-group_level_1 {
z-index:2000
}
.z-index-group_level_2 {
z-index:3000
}
.z-index-group_level_3 {
z-index:4000
}
.z-index-group_level_4 {
z-index:5000
}
.z-index-group_level_5 {
z-index:6000
}
.z-index-group_level_6 {
z-index:7000
}
.z-index-group_level_7 {
z-index:8000
}
.z-index-group_level_8 {
z-index:9000
}
.z-index-group_level_9 {
z-index:10000
}
.feedback {
width: 360px
height:100%
}
.feedback__heading.heading {
margin:10px 0 50px
}
.feedback__close.button {
margin:10px 0 20px
}
.feedback__header {
height: 46px
padding:16px 0
}
.heading {
font-weight: 400
margin:0
}
.feedback__body {
padding-bottom:30px
}
.feedback__textarea {
height:200px
}
.feedback__radio-group {
padding-bottom:30px
}
.button, .radio, .textarea {
-ms-touch-action: manipulation
touch-action:manipulation
}
.feedback__footer {
padding-bottom: 16px
text-align:right
}
.feedback__footer .feedback__cancel {
margin-right: 12px
color:#c5c5c5
}
.feedback__wrapper {
display: none
margin:0 16px
}
.feedback__wrapper_visible {
display:block
}
.feedback__feedback-done {
display: none
margin: 16px
text-align:center
}
.feedback__feedback-done_visible {
display:block
}
.article-amendments {
font-size: 14px
line-height: 1.2
padding: 10px
color: rgba(255, 255, 255, .5)
background:rgba(255, 255, 255, .2)
}
.article-amendments__link {
text-decoration: underline
color:rgba(255, 255, 255, .8)
}
@media print {
.article-amendments {
display:none
}}
.article-translation-missed {
padding: 0 48px
background:rgba(255, 0, 0, .1)
}
@media (max-width: 1200px) {
.article-translation-missed {
margin-top:0
}}
@media (min-width: 320px) and(max-width: 568px) {
.article-translation-missed {
position: static
margin:16px 0
}}
@media (min-device-width: 320px) and(max-device-width: 568px) and(orientation: portrait) {
.article-translation-missed {
font-size: 12px
line-height:27px
}}
@media (min-device-width: 320px) and(max-device-width: 568px) and(orientation: landscape) {
.article-translation-missed {
font-size:8px
}}
@media print {
.article-translation-missed, .social-likes {
display:none
}}
.social-likes__service {
display: inline-block
width: 26px
height: 26px
margin: 0 10px 4px 0
padding: 3px
transition: all .3s
vertical-align: middle
text-indent: -9999px
border-radius:3px
}
.social-likes__service:active, .social-likes__service:focus, .social-likes__service:hover {
opacity:.8
}
.article-rewind {
margin: 0
padding: 0
list-style:none
}
@media print {
.article-rewind {
display:none
}}
.articles {
max-width: 760px
margin:-4px 0 0 162px
}
.articles__title {
font-size: 36px
font-weight: 300
line-height: 48px
margin:0 0 -1px -1px
}
.articles__link:link {
color:#04b
}
.articles__link:visited {
color:#909
}
.articles__photo {
position: absolute
width: 144px
height: 144px
margin:5px 0 10px -160px
}
.articles__date {
font-size: 15px
line-height: 15px
color:#777
}
.articles__author {
font-weight:600
}
.articles__author, .articles__position {
display: inline
margin:0
}
.articles__author + .articles__position::before {
content: ', '
}
.articles__link {
text-decoration:none
}
.articles__text {
min-height: 64px
margin:16px 0 49px
}
@media all and (max-width: 780px) {
.articles {
margin:10px 4% 0 130px
}
.articles__photo {
width: 70px
height: 70px
margin-left:-86px
}
.articles__date {
font-size:10px
}
.articles__position {
font-size:90%
}
.articles__text {
margin:10px 0 49px -86px
}}
@media all and (max-width: 480px) {
.articles {
margin-left: 0
padding:4% 10px
}
.articles__link {
font-size:28px
}
.articles__photo {
display:none
}
.articles__date {
font-size: 15px
display:block
}
.articles__text {
margin:10px 0 20px
}}
@media only screen and (min-device-width: 320px) and(max-device-width: 568px) and(orientation: portrait) {
.articles {
font-size:16px
}}
@media only screen and (min-device-width: 320px) and(max-device-width: 568px) and(orientation: landscape) {
.articles {
font-size:10px
}}
@media print {
.header {
display:none
}}
.header_opened .header__logo {
position:static
}
.header_opened + .sitemap {
display: -ms-flexbox !important
display:flex !important
}
.header_opened .header__forum, .header_opened .header__lang, .header_opened ~ div, .header_opened ~ footer {
display:none !important
}
.header__layout {
position: relative
height: 70px
white-space:nowrap
}
.header__logo {
position: fixed
padding:23px 30px 22px
}
@supports ((position: -webkit-sticky) or(position: sticky)) and(display: grid) {
@media (min-width: 1201px) {
.header__logo {
position:static
}}}
.header__breadcrumbs {
position: absolute
top: 1px
left: 90px
-ms-flex-positive: 1
flex-grow: 1
margin:18px 0 0
}
.header__forum {
float: right
margin: 20px -5px 0 10px
transition: color .3s
text-decoration: none
letter-spacing: 2px
color:rgba(255, 255, 255, .65)
}
.header__forum:hover {
color:#fff
}
.header__lang {
position: relative
z-index: 1
float: right
margin:20px 70px 0 46px
}
@media (max-width: 1200px) {
.header__logo {
padding:23px 20px 22px
}
.header__breadcrumbs {
left:90px
}}
@media (max-width: 800px) {
.header__layout {
height:auto
}
.header__logo {
position: static
padding:13px 15px
}
.header__breadcrumbs {
display:none
}
.header__forum, .header__lang {
margin-top:10px
}
.header_opened {
position:static
}
.header_opened + .sitemap {
display:block !important
}
.header_opened .header__layout {
display:none
}}
.legos_inverted_white .legos__lego, .legos_inverted_white::before {
background-image: url(data:image/pngbase64,iVBORw0KGgoAAAANSUhEUgAAABYAAAB3AQAAAAAvZ41pAAAAAnRSTlMAAHaTzTgAAAAVSURBVHgBY/j//88QxqP4A4MNLgwAuKhVpBleN0MAAAAASUVORK5CYII=)
}
.legos_inverted_white::before {
margin-top: 0
background-position:0 -112px
}
.legos_inverted_white {
position:static
}
.legos_inverted_white .legos__lego_height_2 {
background-position:0 -28px
}
.legos_inverted_white .legos__lego_height_3 {
background-position:0 -56px
}
.legos_inverted_white .legos__lego_height_4 {
background-position:0 -84px
}
.legos_inverted_white .legos__lego_height_5 {
background-position:0 -112px
}
.modal, .modal__table {
width: 100%
height:100%
}
.modal {
position: fixed
top: 0
left: 0
overflow-y: auto
-webkit-overflow-scrolling:touch
}
.modal__table {
display: table
text-align:center
}
.modal__cell {
display: table-cell
vertical-align:middle
}
.modal__content {
text-align:left
}
.modal__content, .radio-group_theme_islands {
display:inline-block
}
.radio-group_theme_islands.radio-group_size_m {
line-height:24px
}
.radio-group_theme_islands.radio-group_size_l {
line-height:30px
}
.button_theme_islands, .radio-group_theme_islands.radio-group_type_button {
display: inline-block
white-space:nowrap
}
.button_theme_islands {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
position: relative
margin: 0
padding: 0
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
color: #000
border: 0
border-radius: 3px
outline: 0
background: rgba(0, 0, 0, .2)
text-align: center
-webkit-tap-highlight-color:transparent
}
.button_theme_islands::-moz-focus-inner {
padding: 0
border:0
}
.button_theme_islands .button__text {
position: relative
display: inline-block
overflow: hidden
text-overflow: ellipsis
vertical-align:top
}
.button_theme_islands .icon {
position:relative
}
.button_theme_islands.button_type_link {
text-decoration:none
}
.button_theme_islands:before {
position: absolute
top: 1px
right: 1px
bottom: 1px
left: 1px
content: ''
border-radius: 2px
background:#fff
}
.button_theme_islands.button_hovered {
cursor: pointer
background:rgba(0, 0, 0, .3)
}
.button_theme_islands.button_focused-hard {
z-index: 1
background:rgba(178, 142, 0, .6)
}
.button_theme_islands.button_focused-hard.button:before {
box-shadow:0 0 0 1px #fc0, inset 0 0 0 1px #fc0
}
.button_theme_islands.button_pressed:before {
background:#f6f5f3
}
.button_theme_islands.button_checked {
background:rgba(153, 122, 0, .5)
}
.button_theme_islands.button_checked:before {
background:#ffeba0
}
.button_theme_islands.button_checked.button_hovered, .button_theme_islands.button_checked.button_pressed {
background:rgba(129, 103, 0, .6)
}
.button_theme_islands.button_checked.button_pressed:before, .button_theme_islands.button_view_plain.button_checked.button_pressed {
background:#fee481
}
.button_theme_islands.button_view_plain {
background:0 0
}
.button_theme_islands.button_view_plain.button_pressed {
background:#f6f5f3
}
.button_theme_islands.button_view_plain.button_checked {
background:#ffeba0
}
.button_theme_islands.button_view_plain.button_disabled {
background:0 0
}
.button_theme_islands.button_view_action {
background:#ffdb4d
}
.button_theme_islands.button_view_action:before {
display:none
}
.button_theme_islands.button_view_action.button_hovered {
background:#ffd633
}
.button_theme_islands.button_view_action.button_pressed {
background:#fc0
}
.button_theme_islands.button_view_action.button_focused-hard {
animation: button-action-focus .5s infinite linear alternate
box-shadow:none
}
.button_theme_islands.button_view_pseudo {
overflow: hidden
background:0 0
}
.button_theme_islands.button_view_pseudo:before {
background: 0 0
box-shadow:0 0 0 1px rgba(0, 0, 0, .2)
}
.button_theme_islands.button_view_pseudo.button_hovered:before {
box-shadow:0 0 0 1px rgba(0, 0, 0, .3)
}
.button_theme_islands.button_view_pseudo.button_pressed:before {
background:rgba(0, 0, 0, .05)
}
.button_theme_islands.button_view_pseudo.button_checked:before {
background: #ffeba0
box-shadow:0 0 0 1px rgba(153, 122, 0, .5)
}
.button_theme_islands.button_view_pseudo.button_checked.button_hovered:before {
box-shadow:0 0 0 1px rgba(129, 103, 0, .6)
}
.button_theme_islands.button_view_pseudo.button_checked.button_pressed:before {
background: #fee481
box-shadow:0 0 0 1px rgba(129, 103, 0, .6)
}
.button_theme_islands.button_disabled {
background:rgba(0, 0, 0, .08)
}
.button_theme_islands.button_disabled:before {
display:none
}
.button_theme_islands.button_disabled.button_checked {
background:rgba(0, 0, 0, .15)
}
.button_theme_islands.button_disabled .button__text {
color:#767676
}
.button_theme_islands.button_disabled .icon {
opacity:.3
}
.button_theme_islands.button_size_s {
font-size: 13px
line-height:24px
}
.button_theme_islands.button_size_s .icon {
width:24px
}
.button_theme_islands.button_size_s .button__text {
margin:0 10px
}
.button_theme_islands.button_size_m {
font-size: 13px
line-height:28px
}
.button_theme_islands.button_size_m .icon {
width:28px
}
.button_theme_islands.button_size_m .button__text {
margin:0 13px
}
.button_theme_islands.button_size_l {
font-size: 15px
line-height:32px
}
.button_theme_islands.button_size_l .icon {
width:32px
}
.button_theme_islands.button_size_l .button__text {
margin:0 15px
}
.button_theme_islands.button_size_xl {
font-size: 18px
line-height:38px
}
.button_theme_islands.button_size_xl .icon {
width:38px
}
.button_theme_islands.button_size_xl .button__text {
margin:0 18px
}
.button_theme_islands .icon + .button__text {
margin-left:0
}
.button_theme_islands .button__text:not(:last-child) {
margin-right:0
}
.control-group .button_checked + .button_theme_islands:before, .control-group .button_theme_islands.button_focused-hard.button:before, .control-group .checkbox_checked + .checkbox .button_theme_islands:before, .control-group .radio_checked + .radio .button_theme_islands:before {
left:0
}
.control-group .button_theme_islands {
border-radius:0
}
.control-group .button_theme_islands:before {
right: 0
border-radius:0
}
.control-group .button_theme_islands.button_checked:before {
right:1px
}
.control-group > .button_theme_islands:first-child, .control-group > :first-child .button_theme_islands, .control-group > :first-child.popup + .button_theme_islands {
border-radius:3px 0 0 3px
}
.control-group > .button_theme_islands:first-child:before, .control-group > :first-child .button_theme_islands:before, .control-group > :first-child.popup + .button_theme_islands:before {
border-radius:2px 0 0 2px
}
.control-group > .button_theme_islands:first-child.button_focused-hard.button:before, .control-group > :first-child .button_theme_islands.button_focused-hard.button:before, .control-group > :first-child.popup + .button_theme_islands.button_focused-hard.button:before {
left:1px
}
.control-group > .button_theme_islands:last-child, .control-group > :last-child .button_theme_islands {
border-radius:0 3px 3px 0
}
.control-group > .button_theme_islands:last-child:before, .control-group > :last-child .button_theme_islands:before {
border-radius: 0 2px 2px 0
right:1px
}
.control-group > :only-child .button_theme_islands {
border-radius:3px
}
.control-group > :only-child .button_theme_islands:before {
border-radius:2px
}
.radio.radio_type_button .radio__control {
position: absolute
visibility:hidden
}
.textarea_theme_islands {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
display: inline-block
background: #fff
box-sizing: border-box
margin: 0
padding: 0
min-height: 2em
border: 1px solid rgba(0, 0, 0, .2)
outline: 0
-webkit-appearance: none
-webkit-tap-highlight-color:transparent
}
.textarea_theme_islands::-webkit-input-placeholder {
color: #999
text-indent:0
}
.textarea_theme_islands::-moz-placeholder {
opacity: 1
color:#999
}
.textarea_theme_islands.textarea_focused {
border-color: #fc0
box-shadow:0 0 0 1px #fc0
}
.textarea_theme_islands.textarea_width_available {
width: 100%
resize:vertical
}
.textarea_theme_islands.textarea_disabled {
resize: none
cursor: default
color: rgba(0, 0, 0, .4)
border-color: transparent
background:rgba(0, 0, 0, .08)
}
.textarea_theme_islands.textarea_size_s {
font-size: 13px
line-height: 16px
padding-left:6px
}
.textarea_theme_islands.textarea_size_m {
font-size: 13px
line-height: 18px
padding:3px 5px
}
.textarea_theme_islands.textarea_size_l {
font-size: 15px
line-height: 20px
padding:5px 7px
}
.textarea_theme_islands.textarea_size_xl {
font-size: 18px
line-height: 22px
padding-left:11px
}
.article-rewind_type_static {
position: relative
display: -ms-flexbox
display: flex
min-height: 140px
background:#f3f1ed
}
.article-rewind_type_static .article-rewind__prev {
position: relative
overflow: hidden
width: 111px
height: 70px
white-space: nowrap
-ms-flex-item-align: center
align-self:center
}
.article-rewind_type_static .article-rewind__prev-link {
position: absolute
right:34px
}
.article-rewind_type_static .article-rewind__next-link::after, .article-rewind_type_static .article-rewind__prev-link::after {
font-size: 177px
line-height: 26px
color:#555
}
.article-rewind_type_static .article-rewind__prev-link::after {
display: inline-block
height: 70px
margin-left: 32px
content: '‹'
}
.article-rewind_type_static .article-rewind__next {
position: relative
margin-right: 88px
text-align: right
-ms-flex-positive: 1
flex-grow: 1
-ms-flex-item-align: center
align-self:center
}
.article-rewind_type_static .article-rewind__next-text {
font-size: 16px
position: absolute
right: 0
margin-top: -32px
text-decoration: none
color:#777
}
.article-rewind_type_static .article-rewind__next-link {
font-size: 40px
line-height: 46px
text-decoration: none
color:#000
}
.article-rewind_type_static .article-rewind__next-link::after {
position: absolute
top: 50%
right: -79px
height: 70px
content: '›'
transform:translateY(-50%)
}
@media (max-width: 800px) {
.article-rewind_type_static {
min-height: 100px
padding:0 15px
}
.article-rewind_type_static .article-rewind__prev {
display:none
}
.article-rewind_type_static .article-rewind__next {
position: static
margin:0
}
.article-rewind_type_static .article-rewind__next-text {
right:15px
}
.article-rewind_type_static .article-rewind__next-link {
font-size: 21px
line-height: 1.4
display:block
}
.article-rewind_type_static .article-rewind__next-link::after {
position: absolute
top: 0
right: 0
bottom: 0
left: 0
height: auto
content: ''
transform:none
}}
.modal_theme_islands, .modal_theme_islands .modal__content {
animation-duration: .2s
animation-fill-mode: forwards
animation-timing-function:ease-in-out
}
.modal_theme_islands {
display: none
visibility: hidden
background: rgba(50, 50, 50, .2)
margin:-9999px 0 0 -9999px
}
.modal_theme_islands .modal__content {
margin: 5px
border: 1px solid #bfbfbf
background-color:#fff
}
.modal_theme_islands.modal_js_inited {
display:block
}
.modal_theme_islands.modal_has-animation {
animation-name:modal_theme_islands
}
.modal_theme_islands.modal_has-animation .modal__content {
animation-name:modal_theme_islands__content
}
.modal_theme_islands.modal_visible {
visibility: visible
margin:0
}
.modal_theme_islands.modal_visible.modal_has-animation {
animation-name:modal_theme_islands_visible
}
.modal_theme_islands.modal_visible.modal_has-animation .modal__content {
animation-name:modal_theme_islands_visible__content
}
.radio_theme_islands {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
-webkit-tap-highlight-color:transparent
}
.radio_theme_islands:hover {
cursor:pointer
}
.radio_theme_islands .radio__control {
position: absolute
z-index: -1
margin: 0
opacity:0
}
.radio_theme_islands .radio__box {
position: relative
display: inline-block
border-radius: 50%
background:rgba(0, 0, 0, .2)
}
.radio_theme_islands .radio__box:before {
position: absolute
top: 1px
right: 1px
bottom: 1px
left: 1px
content: ''
border-radius: 50%
background:#fff
}
.radio_theme_islands.radio_size_m {
font-size:13px
}
.radio_theme_islands.radio_size_m .radio__box {
line-height: 14px
top: 2px
width: 14px
height: 14px
margin-right:5px
}
.radio_theme_islands.radio_size_m .radio__box:after {
top: 4px
left: 4px
width: 6px
height:6px
}
.radio_theme_islands.radio_size_l {
font-size:15px
}
.radio_theme_islands.radio_size_l .radio__box {
line-height: 17px
top: 3px
width: 17px
height: 17px
margin-right:7px
}
.radio_theme_islands.radio_size_l .radio__box:after {
top: 5px
left: 5px
width: 7px
height:7px
.radio_theme_islands.radio_checked .radio__box:after {
position: absolute
border-radius: 50%
background: #000
content: ''
<!DOCTYPE html>
<html class="ua_js_no" >
<head>
<meta charset="utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>HTML / Методология / БЭМ</title>
<script>
(function(e, c) {
e[c] = e[c].replace(/(ua_js_)no/g, "$1yes")
})(document.documentElement, "className")
</script>
nk rel="stylesheet" href="/methodology.min.css?5144" >
<meta name="viewport" content="width=device-width,initial-scale=1" >
<meta property="og:image" content="/og_image/logo_theme_generated.png" >
<meta property="og:url" content="/methodology/html/" >
<meta property="og:type" content="article" >
<meta property="og:description" content="HTML" >
<meta property="og:keywords" content="methodology" >rel="shortcut icon" href="/favicon.ico" >
</head>
<body class="page" >
<div class="header page__head i-bem" data-bem='{"header":{}}'>
<div class="header__layout" >
class="logo header__logo" href="/" >
<div class="lang-switcher header__lang" >
class="lang-switcher__link" href="//en.bem.info/methodology/html/" >EN
<span class="lang-switcher__separator" > span
</div>
class="header__forum" href="/forum/" >Форум
</div>
<div class="search header__search i-bem" data-bem='{"search":{}}'>
<span class="input input_type_search i-bem" data-bem='{"input":{}}'>
<span class="input__box" >
<input type="hidden" name="searchid" value="1944806" >
<input type="hidden" name="l10n" value="ru" >
<button class="search__submit" type="submit" >
</div>
<ul class="breadcrumbs header__breadcrumbs" >
class="breadcrumbs__item" >
class="breadcrumbs__link" href="/methodology/" >Методология
</ul>
<div class="header__toggle" >
<span class="header__toggle-line" > span
</div>
</div>
<div class="sitemap page__sitemap" >
<div class="sitemap__section sitemap__section_site_methodology" >
<h1 class="sitemap__title sitemap__title_site_methodology" >
class="sitemap__link" href="/methodology/" >Методология
</h1>
<ul class="sitemap__tree" >
class="sitemap__tree-item-1" >
class="sitemap__tree-item-1" >
class="sitemap__link" href="/methodology/faq/" >FAQ
</ul>
</div>
<div class="sitemap__section sitemap__section_site_technologies" >
<h1 class="sitemap__title sitemap__title_site_technologies" >
class="sitemap__link" href="/technologies/" >Технологии
</h1>
<ul class="sitemap__tree" >
class="sitemap__tree-item-1" >
class="sitemap__link" href="/technologies/classic/" >Классический БЭМ-стек
class="sitemap__tree-item-2" >
</ul>
</div>
<div class="sitemap__section sitemap__section_site_toolbox" >
<h1 class="sitemap__title sitemap__title_site_toolbox" >
class="sitemap__link" href="/toolbox/" >Инструментарий
</h1>
<ul class="sitemap__tree" >
class="sitemap__tree-item-1" >
class="sitemap__link" href="/toolbox/enb/" >ENB
</ul>
</div>
<div class="sitemap__section sitemap__section_site_libraries" >
<h1 class="sitemap__title sitemap__title_site_libraries" >
class="sitemap__link" href="/libraries/" >Библиотеки
</h1>
<ul class="sitemap__tree" >
class="sitemap__tree-item-1" >
class="sitemap__link" href="/libraries/classic/" >Классические БЭМ-библиотеки
</div>
<div class="sitemap__section sitemap__section_site_tutorials" >
<h1 class="sitemap__title sitemap__title_site_tutorials" >
class="sitemap__link" href="/tutorials/" >Учебные материалы
</h1>
<ul class="sitemap__tree" >
class="sitemap__tree-item-1" >
class="sitemap__link" href="/tutorials/classic/" >Классический БЭМ-стек
<div class="page__menu" >
<ul class="nav page__nav" >
class="nav__item" >
<div class="nav__title" style="margin-left:16px" >
class="nav__item" >
<div class="nav__title" style="margin-left:16px" >
class="nav__link" href="/methodology/css/" >CSS
</div>
<div class="nav__content" style="margin-left:16px" >
class="nav__link nav__chapter" href="/methodology/css/#селекторы" >Селекторы
class="nav__item nav__item_current" >
<div class="nav__title" style="margin-left:16px" >HTML</div>
<div class="nav__content nav__content_visible" style="margin-left:16px" >
class="nav__link nav__chapter" href="/methodology/html/#привязка-блоков-к-dom-узлу" >Привязка
class="nav__item" >
<div class="nav__title" style="margin-left:16px" >
class="nav__link" href="/methodology/js/" >JavaScript
</div>
<div class="nav__content" style="margin-left:16px" >
class="nav__link nav__chapter" href="/methodology/js/#единая-предметная-область" >Единая предметная область
class="nav__link nav__chapter" href="/methodology/js/#разделение-кода-на-части" >Разделение кода на части
class="nav__item" >
<div class="nav__title" style="margin-left:16px" >
class="nav__link" href="/methodology/filestructure/" >Файловая структура
class="nav__item" >
<div class="nav__title" style="margin-left:16px" >
class="nav__link" href="/methodology/redefinition-levels/" >Уровни переопределения
</div>
<div class="nav__content" style="margin-left:16px" >
class="nav__link nav__chapter" href="/methodology/redefinition-levels/#понятие-уровня-переопределения" >Понятие уровня переопределения
class="nav__item" >
<div class="nav__title" style="margin-left:16px" >
class="nav__link" href="/methodology/block-modification/" >Модификация блока
</div>
<div class="nav__content" style="margin-left:16px" >
class="nav__link nav__chapter" href="/methodology
class="nav__item" >
<div class="nav__title" style="margin-left:16px" >
class="nav__link" href="/methodology/build/" >Сборка
</div>
<div class="nav__content" style="margin-left:16px" >
class="nav__link nav__chapter" href="/methodology/build/#введение" >Введение
class="nav__item" >
<div class="nav__title" style="margin-left:16px" >
class="nav__link" href="/methodology/declarations/" >Декларации
</div>
<div class="nav__content" style="margin-left:16px" >
class="nav__link nav__chapter" href="/methodology/declarations/#способы-получения-декларации"
class="nav__item" >
<div class="nav__title" style="margin-left:16px" >
class="nav__link" href="/methodology/solved-problems/" >Какие проблемы решает
</div>
<div class="nav__content" style="margin-left:16px" >
class="nav__link nav__chapter" href="/methodology/solved-problems/#как-упростить-код-и-облегчить-рефакторинг" >Как упростить код и облегчить рефакторинг
class="nav__link nav__chapter" href="/methodology/solved-problems/#как-начать-повторно-использовать-код-и-избежать-взаимного-влияния-компонентов-друг-на-друга" >Как начать повторно использовать код и избежать взаимного влияния компонентов друг на друга
class="nav__link nav__chapter" href="/methodology/solved-problems/#как-разместить-несколько-сущностей-на-одном-dom-узле-и-избежать-«copy-paste»" >Как разместить несколько сущностей на одном DOM-узле и избежать «Copy-Paste»
</div>
class="nav__item" >
<div class="nav__title" style="margin-left:16px" >
class="nav__link" href="/methodology/history/" >История создания
</div>
<div class="nav__content" style="margin-left:16px" >
class="nav__link nav__chapter" href="/methodology/history/#типичная-верстка-в-яндексе-2005-года" >Типичная верстка в Яндексе 2005 года
class="nav__item" >
<div class="nav__title" style="margin-left:16px" >
class="nav__link" href="/methodology/articles/" >Статьи
</div>
class="nav__item" >
<div class="nav__title" style="margin-left:16px" >
class="nav__link" href="/methodology/faq/" >FAQ
</div>
<div class="nav__content" style="margin-left:16px" >
class="nav__link nav__chapter" href="/methodology/faq/#почему-бэм" >Почему БЭМ?
class="nav__link nav__chapter" href="/methodology/faq/#блоки-и-элементы" >Блоки и элементы
class="nav__link nav__chapter" href="/methodology/faq/#модификаторы-и-миксы" >Модификаторы и миксы
class="nav__link nav__chapter" href="/methodology/faq/#css" >CSS
class="nav__link nav__chapter" href="/methodology/faq/#javascript" >JavaScript
class="nav__link nav__chapter" href="/methodology/faq/#у-меня-другой-вопрос" >У меня другой вопрос
class="nav__link nav__chapter" href="/methodology/faq/#в-чем-отличие-бэм-от-oocss-amcss-smacss-suitcss" >В чем отличие БЭМ от OOCSS, AMCSS, SMACSS, SUITCSS?
class="nav__link nav__chapter" href="/methodology/faq/#в-чем-разница-между-бэм-и-web-components" >В чем разница между БЭМ и Web Components?
class="nav__link nav__chapter" href="/methodology/faq/#полезен-ли-бэм-в-маленьких-проектах" >Полезен ли БЭМ в маленьких проектах?
class="nav__link nav__chapter" href="/methodology/faq/#в-чем-разница-между-бэм-и-bootstrap" >В чем разница между БЭМ и Bootstrap?
class="nav__link nav__chapter" href="/methodology/faq/#когда-создавать-блок-когда--элемент" >Когда создавать блок, когда — элемент?
class="nav__link nav__chapter" href="/methodology/faq/#как-изменить-внешний-вид-блока" >Как изменить внешний вид блока?
class="nav__link nav__chapter" href="/methodology/faq/#зачем-в-именах-модификаторов-и-элементов-указывать-имя-блока" >Зачем в именах модификаторов и элементов указывать имя блока?
class="nav__link nav__chapter" href="/methodology/faq/#зачем-создавать-отдельные-директории-и-файлы-для-каждого-блока-и-технологии" >Зачем создавать отдельные директории и файлы для каждого блока и технологии?
class="nav__link nav__chapter" href="/methodology/faq/#наследуют-ли-элементы-блока-его-css-свойства" >Наследуют ли элементы блока его CSS-свойства?
class="nav__link nav__chapter" href="/methodology/faq/#почему-не-стоит-создавать-блоки-обертки" >Почему не стоит создавать блоки-обертки?
class="nav__link nav__chapter" href="/methodology/faq/#" >Почему не стоит создавать элементы элементов (block__elem1__elem2)?
class="nav__link nav__chapter" href="/methodology/faq/#когда-создавать-модификатор-когда--микс" >Когда создавать модификатор, когда — микс?
class="nav__link nav__chapter" href="/methodology/faq/#когда-создавать-булевый-модификатор-когда--модификатор-«ключ-значение»" >Когда создавать булевый модификатор, когда — модификатор «ключ-значение»?
class="nav__link nav__chapter" href="/methodology/faq/#как-выбрать-имя-модификатора" >Как выбрать имя модификатора?
class="nav__link nav__chapter" href="/methodology/faq/#как-сделать-глобальные-модификаторы-для-блоков" >Как сделать глобальные модификаторы для блоков?
class="nav__link nav__chapter" href="/methodology/faq/#почему-нельзя-писать-имя-модификатора-блока-в-имени-элемента-block_mod__elem" >Почему нельзя писать имя модификатора блока в имени элемента (block_mod__elem)?
<div class="page__main" >
<div class="article page__content" >
<h1 class="article__heading article__heading_level_1" id="html-по-бэм" >
class="article__heading-anchor" href="#html-по-бэм" >
HTML по БЭМ
В БЭМ HTML-разметку можно создавать
class="article__link" href=
или
class="article__link" href=
. Принципы организации HTML-кода в обоих случаях одинаковы:
</p>
<ul class="article__list" >
class="article__list-item" >
class="article__link" href=
</ul>
<h2 class="article__heading article__heading_level_2" id="привязка-блоков-к-dom-узлу" >
class="article__heading-anchor" href="#привязка-блоков-к-dom-узлу" >
Привязка блоков к DOM-узлу
Разметка страницы описывается в терминах
<h3 class="article__heading article__heading_level_3" id="несколько-блоков-на-одном-dom-узле" >
class="article__heading-anchor" href="#несколько-блоков-на-одном-dom-узле" >
Несколько блоков на одном DOM-узле
</h3>
Чтобы совместить стили и поведение нескольких
class="article__link" href="/methodology/key-concepts/
, необходимо разместить их на одном DOM-узле. Для этого в значении атрибута
<code class="article__inline-code" >class</code>
указываются имена БЭМ-сущностей, разделенные пробелом. Такой подход называется
class="article__link" href="/methodology/key-concepts/
Микс используется, например, чтобы добавить блоку или элементу модификатор. В примере ниже к стилям блока
<code class="article__inline-code" >menu</code>
добавлены новые стили модификатора этого блока
<code class="article__inline-code" >menu_theme_bright</code>
class="article__link" href="/methodology/css/
</p>
</blockquote>
<h3 class="article__heading article__heading_level_3" id="один-блок-на-нескольких-dom-узлах" >
class="article__heading-anchor" href="#один-блок-на-нескольких-dom-узлах" >
Один блок на нескольких DOM-узлах
</h3>
Пример включает особенности реализации фреймворка i-bem.js.
class="article__link" href="/platform/i-bem/html-binding/
</p>
</blockquote>
<h2 class="article__heading article__heading_level_2" id="вложенность-элементов" >
class="article__heading-anchor" href="#вложенность-элементов" >
Вложенность элементов
</h2>
class="article__link" href="/methodology/naming-convention/
class="article__link" href="/methodology/faq/
отражать иерархию в названии элемента (
<code class="article__inline-code" >block__elem1__elem2</code>
). Но в HTML элементы можно вкладывать друг в друга. Допустима любая вложенность элементов.
<h2 class="article__heading article__heading_level_2" id="использование-html-оберток" >
class="article__heading-anchor" href="#использование-html-оберток" >
Использование HTML-оберток
</h2>
Чтобы
class="article__link" href=
или
class="article__link" href=
в БЭМ принято использовать
class="article__link" href="/methodology/key-concepts/
. Если решить эти задачи с помощью миксов невозможно, применяются HTML-обертки.
</p>
<h3 class="article__heading article__heading_level_3" id="расположение-блока-относительно-других-блоков" >
class="article__heading-anchor" href="#расположение-блока-относительно-других-блоков" >
Расположение блока относительно других блоков
Чтобы позиционировать один блок относительно другого блока, используется
class="article__link" href="/methodology/key-concepts/
<ul class="article-rewind article-rewind_type_static article-rewind_lang_ru article__rewind" >
class="article-rewind__prev" >
class="article-rewind__prev-link" href="/methodology/css/" >CSS
class="article-rewind__next" >
<div class="article-rewind__next-text" >Читать далее</div>
class="article-rewind__next-link" href="/methodology/js/" >JavaScript
</ul>
<div class="social-likes aside__social" >
class="social-likes__service social-likes__service_type_facebook" href="https://www.facebook.com/sharer.php?s=100ampurl=https%3A%2F%2Fru.bem.info%2Fmethodology%2Fhtml%2Famptitle=HTMLampimage=" >Facebook
class="social-likes__service social-likes__service_type_vk" href="http://vk.com/share.php?ampurl=https%3A%2F%2Fru.bem.info%2Fmethodology%2Fhtml%2Famptitle=HTMLampimage=" >VKontakte
class="social-likes__service social-likes__service_type_twitter" href="https://twitter.com/share?ampurl=https%3A%2F%2Fru.bem.info%2Fmethodology%2Fhtml%2Famptitle=HTMLampimage=" >Twitter
</div>
<div class="doc-rating aside__rating i-bem" data-bem='{"doc-rating":{}}'>
<div class="doc-rating__title" >Оцените статью</div>
<span class="rating-stars rating-stars_active doc-rating__stars i-bem" data-bem='{"rating-stars":{}}'>
<div class="rating-stars__gray" >
<span class="rating-stars__item rating-stars__item_pos_1 i-bem" data-bem='{"rating-stars__item":{"val":1}}'>
<span class="rating-stars__item rating-stars__item_pos_2 i-bem" data-bem='{"rating-stars__item":{"val":2}}'>
<span class="rating-stars__item rating-stars__item_pos_3 i-bem" data-bem='{"rating-stars__item":{"val":3}}'>
<span class="rating-stars__item rating-stars__item_pos_4 i-bem" data-bem='{"rating-stars__item":{"val":4}}'>
<span class="rating-stars__item rating-stars__item_pos_5 i-bem"
</div>
<div class="rating-stars__yellow" style="width:0%" ></div>
span
<span class="doc-rating__total" > span
<span class="doc-rating__value" > span
<div class="modal modal_autoclosable modal_theme_islands doc-rating__modal popup popup_autoclosable i-bem" data-bem='{"modal":{},"popup":{"zIndexGroupLevel":20}}' role="dialog" aria-hidden="true" >
<div class="modal__table" >
<div class="modal__cell" >
<div class="modal__content" >
<form class="feedback doc-rating__feedback i-bem" data-bem='{"feedback":{}}'>
<div class="feedback__wrapper feedback__wrapper_visible" >
<div class="feedback__header" >
<h3 class="heading heading_level_3" >Отправить отзыв</h3>
</div>
<div class="feedback__body" >
<span class="radio-group radio-group_theme_islands radio-group_size_l radio-group_type_button feedback__radio-group control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup" >
<label class="radio radio_type_button radio_theme_islands radio_size_l i-bem" data-bem='{"radio":{}}'>
<button class="button button_togglable_radio button_theme_islands button_size_l button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false" >
<span class="button__text" >1span
</button>
<input class="radio__control" type="radio" autocomplete="off" name="val" value="1" >
</label>
<label class="radio radio_type_button radio_theme_islands radio_size_l i-bem" data-bem='{"radio":{}}'>
<button class="button button_togglable_radio button_theme_islands button_size_l button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false" >
<span class="button__text" >2span
</button>
<input class="radio__control" type="radio" autocomplete="off" name="val" value="2" >
</label>
<label class="radio radio_type_button radio_theme_islands radio_size_l i-bem" data-bem='{"radio":{}}'>
<button class="button button_togglable_radio button_theme_islands button_size_l button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false" >
<span class="button__text" >3span
</button>
<input class="radio__control" type="radio" autocomplete="off" name="val" value="3" >
</label>
<label class="radio radio_type_button radio_theme_islands radio_size_l i-bem" data-bem='{"radio":{}}'>
<button class="button button_togglable_radio button_theme_islands button_size_l button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false" >
<span class="button__text" >4span
</button>
<input class="radio__control" type="radio" autocomplete="off" name="val" value="4" >
</label>
<label class="radio radio_type_button radio_theme_islands radio_size_l radio_checked i-bem" data-bem='{"radio":{}}'>
<button class="button button_togglable_radio button_checked button_theme_islands button_size_l button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="true" >
<span class="button__text" >5span
</button>
<input class="radio__control" type="radio" autocomplete="off" name="val" value="5" checked="checked" >
</label>
span
<textarea class="textarea textarea_theme_islands textarea_size_l textarea_width_available feedback__textarea textarea__control i-bem" data-bem='{"textarea":{}}'></textarea>
</div>
<div class="feedback__footer" >
<button class="button button_theme_islands button_size_l button_view_plain feedback__cancel button__control i-bem" data-bem='{"button":{},"feedback__cancel":{}}' role="button" type="button" >
<span class="button__text" >Отменаspan
</button>
<button class="button button_theme_islands button_size_l button_view_action button_disabled feedback__submit button__control i-bem" data-bem='{"button":{},"feedback__submit":{}}' role="button" type="button" disabled="disabled" >
<span class="button__text" >Отправитьspan
</button>
</div>
</div>
<div class="feedback__feedback-done" >
<div class="face" ></div>
<h4 class="heading heading_level_4 feedback__heading" >Спасибо!</h4>
<button class="button button_theme_islands button_size_l button_view_action feedback__close button__control i-bem" data-bem='{"button":{},"feedback__close":{}}' role="button" type="button" >
<span class="button__text" >OKspan
</button>
<div class="article-amendments aside__amendments" >
Сообщить об ошибке на
class="article-amendments__issue article-amendments__link" href="https://github.com/bem-site/bem-method/issues/new" >Гитхабе
или исправить в
class="article-amendments__edit article-amendments__link" href="http://prose.io/#bem-site/bem-method/blob/bem-info-data/method/bem-for-html/bem-for-html.ru.md" >prose.io.
</div>
</aside>
</div>
<footer class="footer page__foot" >
<div class="footer__layout" >
<ul class="footer__community" >
class="footer__channel" >
</ul>
</div>

Связаться
Выделить
Выделите фрагменты страницы, относящиеся к вашему сообщению
Скрыть сведения
Скрыть всю личную информацию
Отмена