Scaling backwards: Yandex's BEM methodology on small projects
In the development of interfaces, separate frameworks are no longer so important: when the tools are available, our task is to choose the right ones. To make the right choice, you should start with a general approach, with a methodology . Most methodologies, however, are developed by large companies. Are they applicable in small projects or do they need to be reinvented for successful use?
Most likely, you already know about one of these methodologies, developed by Yandex , BEM . BEM states that three entities (blocks, elements and markers) are enough to write HTML and CSS, set the structure of the code and the component structure, and then scale the project to the highest level.
I worked at Yandex for a long time and saw how this methodology works on large projects. In Yandex, BEM is used to develop CSS and JavaScript components, using this methodology they also write templates and define dependencies between components. There are BEM tools, various experiments with code, research are encouraged. On the scale of a large company, this effort pays off and enables Yandex to quickly and efficiently develop hundreds of services at the same time.
Can small teams get the same from BEM? I was not at all sure. Yet BEM is an abstraction that comes with tools and technology. For a small company, the benefits of switching to the “full stack” of these technologies are doubtful, many of the tools are initially adapted to large and complex tasks. Perhaps, then the idea itself, the methodology itself, will be useful?
')
Initially, this article of mine was published in the well-known Smashing Magazine . But I decided that it could be interesting at Habré too, because many here are doing their own small projects.
On the question of whether BEM can be applied in such areas, I returned a little over a year ago when I moved to Berlin to work at a small startup company, Deltamethod. The company had bold plans for development, and the team and I decided to try the BEM approach. I wanted to get the same bonuses that Yandex had: reuse of the code, “live” Style Guide, scalability and fast development. In addition to this, we wanted to generally keep the used technology stack and improve the code gradually, rather than rewriting the entire service from scratch.
We spent some time on architectural, basic things, introducing BEM step by step, checking the result and moving forward again. We continue to write down ideas, useful tips, create small tutorials. Now I am sure that BEM can also be used on small projects. Below I will talk about our developments, maybe it will be useful for you.
Let's remember the basics. It is argued that semantics is the foundation of web development, but different frontend technologies use different semantic models. A modern HTML-based web application is most often just a jumble of div and span tags. CSS as a technology does not offer any structure at all. High-level JavaScript components use certain abstractions, but they are weakly related to CSS or HTML markup. From the point of view of designers and UX-specialists, interfaces are generally described by terms that are far from technical implementation. Nevertheless, we use all these subject areas together. It's time to recall BEM: after all, this is a general semantic model for markup, styles, code, and UX. Let's take a closer look.
A block is an independent entity with its own meaning ; it represents a separate interface block on the page.
For example, blocks can be:
To set a block, you need to invent a name for it and determine its purpose. The interface may simultaneously contain several instances of the same block (for example, different buttons or several menus). Any web interface can be described as a hierarchical block structure. The simplest example is the HTML description of the page itself, if we imagine that each tag is a block. However, from the point of view of semantics, this is not very meaningful, because HTML was designed for the presentation and design of texts, not interactive web applications.
An element is a part of a block that is associated with it both in meaning and functionally. The element does not exist and is not used without the block to which it belongs. But not all units must have elements.
Examples of elements:
Elements also have names. If there are several identical elements within a block, then they go under the same name (for example, table cells or list items). Elements are defined by meaning , and not based on the HTML layout of the block; Thus, a single element can be represented by a complex HTML structure.
Modifiers are flags for blocks or elements, they define properties or states. Modifiers are boolean (for example,
How to use BEM if we are still forced to write HTML? You need a naming convention that binds DOM nodes to BEM entities. BEM uses CSS classes to define this relation. In this case, blocks, elements and modifiers are not placed on DOM nodes exclusively; On one tag several blocks can be defined at once, or the block element can be combined with the container of another block. Using the same DOM node to host multiple entities is called a “mix.” Remember that mixes are made for convenience, you can only combine compatible: do not turn everything into a mess, mixing blocks and elements.
By forming a document from BEM entities, starting with the root block (
If you are already thinking about whether to try BEM on a project, a legitimate question arises: “How to transfer an existing project to BEM, can this be done gradually?”
Sure you may. Let's start by highlighting a few blocks. We will start with semantics, and we will discuss specific technologies such as CSS and JavaScript later. As you remember, the block can only be an independent entity. For example, headers are blocks. They have no internal elements, but the levels of headings (from the largest to the smallest) can be defined as modifiers of the “key-value” type.
If more levels are needed later, we will define additional modifiers. Here I will say that the HTML4 developers were most likely wrong, inventing
Let's say we got this:
As a second example, you can take a form, its controls (or controls , as they are called) are also blocks: input fields, buttons, and other bricks. In HTML, this is all implemented quite randomly. Different things (input fields, radio buttons and checkboxes) are combined into one tag, while others (very similar to them) are defined by separate tags
Most likely, you already know about one of these methodologies, developed by Yandex , BEM . BEM states that three entities (blocks, elements and markers) are enough to write HTML and CSS, set the structure of the code and the component structure, and then scale the project to the highest level.
I worked at Yandex for a long time and saw how this methodology works on large projects. In Yandex, BEM is used to develop CSS and JavaScript components, using this methodology they also write templates and define dependencies between components. There are BEM tools, various experiments with code, research are encouraged. On the scale of a large company, this effort pays off and enables Yandex to quickly and efficiently develop hundreds of services at the same time.
Can small teams get the same from BEM? I was not at all sure. Yet BEM is an abstraction that comes with tools and technology. For a small company, the benefits of switching to the “full stack” of these technologies are doubtful, many of the tools are initially adapted to large and complex tasks. Perhaps, then the idea itself, the methodology itself, will be useful?
')
Initially, this article of mine was published in the well-known Smashing Magazine . But I decided that it could be interesting at Habré too, because many here are doing their own small projects.
On the question of whether BEM can be applied in such areas, I returned a little over a year ago when I moved to Berlin to work at a small startup company, Deltamethod. The company had bold plans for development, and the team and I decided to try the BEM approach. I wanted to get the same bonuses that Yandex had: reuse of the code, “live” Style Guide, scalability and fast development. In addition to this, we wanted to generally keep the used technology stack and improve the code gradually, rather than rewriting the entire service from scratch.
We spent some time on architectural, basic things, introducing BEM step by step, checking the result and moving forward again. We continue to write down ideas, useful tips, create small tutorials. Now I am sure that BEM can also be used on small projects. Below I will talk about our developments, maybe it will be useful for you.
BEM Basics
Let's remember the basics. It is argued that semantics is the foundation of web development, but different frontend technologies use different semantic models. A modern HTML-based web application is most often just a jumble of div and span tags. CSS as a technology does not offer any structure at all. High-level JavaScript components use certain abstractions, but they are weakly related to CSS or HTML markup. From the point of view of designers and UX-specialists, interfaces are generally described by terms that are far from technical implementation. Nevertheless, we use all these subject areas together. It's time to recall BEM: after all, this is a general semantic model for markup, styles, code, and UX. Let's take a closer look.
Blocks
A block is an independent entity with its own meaning ; it represents a separate interface block on the page.
For example, blocks can be:
- headline
- button,
- navigation menu.
To set a block, you need to invent a name for it and determine its purpose. The interface may simultaneously contain several instances of the same block (for example, different buttons or several menus). Any web interface can be described as a hierarchical block structure. The simplest example is the HTML description of the page itself, if we imagine that each tag is a block. However, from the point of view of semantics, this is not very meaningful, because HTML was designed for the presentation and design of texts, not interactive web applications.
Items
An element is a part of a block that is associated with it both in meaning and functionally. The element does not exist and is not used without the block to which it belongs. But not all units must have elements.
Examples of elements:
- the navigation menu (block) containing menu items (items),
- table (block), within which the rows, cells and headers (elements).
Elements also have names. If there are several identical elements within a block, then they go under the same name (for example, table cells or list items). Elements are defined by meaning , and not based on the HTML layout of the block; Thus, a single element can be represented by a complex HTML structure.
Modifiers
Modifiers are flags for blocks or elements, they define properties or states. Modifiers are boolean (for example,
visible: true or false ) or either represent a key-value pair (code> size: large, medium , small ). This is somewhat similar to the attributes in HTML, but still not the same. An entity may have several modifiers if these modifiers describe different things.
Blocks in the DOM
How to use BEM if we are still forced to write HTML? You need a naming convention that binds DOM nodes to BEM entities. BEM uses CSS classes to define this relation. In this case, blocks, elements and modifiers are not placed on DOM nodes exclusively; On one tag several blocks can be defined at once, or the block element can be combined with the container of another block. Using the same DOM node to host multiple entities is called a “mix.” Remember that mixes are made for convenience, you can only combine compatible: do not turn everything into a mess, mixing blocks and elements.
BEM tree
By forming a document from BEM entities, starting with the root block (
<body> or even <html> ) and ending with deeply nested blocks, you create a semantic layer on top of the existing DOM structure. This layer is called a BEM tree. The BEM tree makes it possible to interact with the whole document in terms of BEM, from the point of view of semantics, abstracting from the features of the DOM implementation.
The first steps
If you are already thinking about whether to try BEM on a project, a legitimate question arises: “How to transfer an existing project to BEM, can this be done gradually?”
Sure you may. Let's start by highlighting a few blocks. We will start with semantics, and we will discuss specific technologies such as CSS and JavaScript later. As you remember, the block can only be an independent entity. For example, headers are blocks. They have no internal elements, but the levels of headings (from the largest to the smallest) can be defined as modifiers of the “key-value” type.
If more levels are needed later, we will define additional modifiers. Here I will say that the HTML4 developers were most likely wrong, inventing
<h1> ... <h6> . They created different tags, while the modifiers of the same entity block were required. In HTML5, they are trying to fix this with sectional elements, but with support in browsers, this is not very good.
Let's say we got this:
BLOCK heading MOD level: alpha, beta, gamma
As a second example, you can take a form, its controls (or controls , as they are called) are also blocks: input fields, buttons, and other bricks. In HTML, this is all implemented quite randomly. Different things (input fields, radio buttons and checkboxes) are combined into one tag, while others (very similar to them) are defined by separate tags
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist, , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , ,multiline— . HTML , — , .textfieldlabel. , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. -<label>,<input>.
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
selectlabel, -select.. , select,optiondisabled. , : , —option(, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; (_), .
CSS-, :
.b-heading .b-text-input
b-«» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(,.b-block__elem1__elem2-).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
,tag.class.class, CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, .i-bem.js, , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown.
, CSS, CSS-, .
b-editor:
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
,type:inplace.
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClickb-link,_pseudo_yes. .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-,this.elem('name')this.findBlockOutside('b-block'). ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS,i-bem.jsAPI ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers (setModgetMod)
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks, .
(/pages/intro) : ,/pages/intro/blocks, ( ) «» (_decoratedb-heading).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common,mobiledesktop, . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist, , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , ,multiline— . HTML , — , .textfieldlabel. , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. -<label>,<input>.
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
selectlabel, -select.. , select,optiondisabled. , : , —option(, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; (_), .
CSS-, :
.b-heading .b-text-input
b-«» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(,.b-block__elem1__elem2-).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
,tag.class.class, CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, .i-bem.js, , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown.
, CSS, CSS-, .
b-editor:
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
,type:inplace.
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClickb-link,_pseudo_yes. .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-,this.elem('name')this.findBlockOutside('b-block'). ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS,i-bem.jsAPI ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers (setModgetMod)
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks, .
(/pages/intro) : ,/pages/intro/blocks, ( ) «» (_decoratedb-heading).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common,mobiledesktop, . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist, , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , ,multiline— . HTML , — , .textfieldlabel. , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. -<label>,<input>.
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
selectlabel, -select.. , select,optiondisabled. , : , —option(, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; (_), .
CSS-, :
.b-heading .b-text-input
b-«» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(,.b-block__elem1__elem2-).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
,tag.class.class, CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, .i-bem.js, , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown.
, CSS, CSS-, .
b-editor:
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
,type:inplace.
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClickb-link,_pseudo_yes. .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-,this.elem('name')this.findBlockOutside('b-block'). ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS,i-bem.jsAPI ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers (setModgetMod)
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks, .
(/pages/intro) : ,/pages/intro/blocks, ( ) «» (_decoratedb-heading).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common,mobiledesktop, . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist, , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , ,multiline— . HTML , — , .textfieldlabel. , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. -<label>,<input>.
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
selectlabel, -select.. , select,optiondisabled. , : , —option(, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; (_), .
CSS-, :
.b-heading .b-text-input
b-«» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(,.b-block__elem1__elem2-).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
,tag.class.class, CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, .i-bem.js, , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown.
, CSS, CSS-, .
b-editor:
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
,type:inplace.
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClickb-link,_pseudo_yes. .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-,this.elem('name')this.findBlockOutside('b-block'). ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS,i-bem.jsAPI ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers (setModgetMod)
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks, .
(/pages/intro) : ,/pages/intro/blocks, ( ) «» (_decoratedb-heading).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common,mobiledesktop, . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist, , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , ,multiline— . HTML , — , .textfieldlabel. , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. -<label>,<input>.
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
selectlabel, -select.. , select,optiondisabled. , : , —option(, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; (_), .
CSS-, :
.b-heading .b-text-input
b-«» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(,.b-block__elem1__elem2-).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
,tag.class.class, CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, .i-bem.js, , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown.
, CSS, CSS-, .
b-editor:
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
,type:inplace.
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClickb-link,_pseudo_yes. .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-,this.elem('name')this.findBlockOutside('b-block'). ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS,i-bem.jsAPI ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers (setModgetMod)
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks, .
(/pages/intro) : ,/pages/intro/blocks, ( ) «» (_decoratedb-heading).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common,mobiledesktop, . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist, , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , ,multiline— . HTML , — , .textfieldlabel. , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. -<label>,<input>.
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
selectlabel, -select.. , select,optiondisabled. , : , —option(, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; (_), .
CSS-, :
.b-heading .b-text-input
b-«» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(,.b-block__elem1__elem2-).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
,tag.class.class, CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, .i-bem.js, , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown.
, CSS, CSS-, .
b-editor:
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
,type:inplace.
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClickb-link,_pseudo_yes. .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-,this.elem('name')this.findBlockOutside('b-block'). ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS,i-bem.jsAPI ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers (setModgetMod)
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks, .
(/pages/intro) : ,/pages/intro/blocks, ( ) «» (_decoratedb-heading).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common,mobiledesktop, . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist, , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , ,multiline— . HTML , — , .textfieldlabel. , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. -<label>,<input>.
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
selectlabel, -select.. , select,optiondisabled. , : , —option(, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; (_), .
CSS-, :
.b-heading .b-text-input
b-«» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(,.b-block__elem1__elem2-).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
,tag.class.class, CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, .i-bem.js, , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown.
, CSS, CSS-, .
b-editor:
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
,type:inplace.
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClickb-link,_pseudo_yes. .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-,this.elem('name')this.findBlockOutside('b-block'). ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS,i-bem.jsAPI ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers (setModgetMod)
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks, .
(/pages/intro) : ,/pages/intro/blocks, ( ) «» (_decoratedb-heading).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common,mobiledesktop, . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist, , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , ,multiline— . HTML , — , .textfieldlabel. , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. -<label>,<input>.
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
selectlabel, -select.. , select,optiondisabled. , : , —option(, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; (_), .
CSS-, :
.b-heading .b-text-input
b-«» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(,.b-block__elem1__elem2-).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
,tag.class.class, CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, .i-bem.js, , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown.
, CSS, CSS-, .
b-editor:
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
,type:inplace.
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClickb-link,_pseudo_yes. .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-,this.elem('name')this.findBlockOutside('b-block'). ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS,i-bem.jsAPI ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers (setModgetMod)
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks, .
(/pages/intro) : ,/pages/intro/blocks, ( ) «» (_decoratedb-heading).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common,mobiledesktop, . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist, , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , ,multiline— . HTML , — , .textfieldlabel. , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. -<label>,<input>.
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
selectlabel, -select.. , select,optiondisabled. , : , —option(, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; (_), .
CSS-, :
.b-heading .b-text-input
b-«» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(,.b-block__elem1__elem2-).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
,tag.class.class, CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, .i-bem.js, , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown.
, CSS, CSS-, .
b-editor:
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
,type:inplace.
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClickb-link,_pseudo_yes. .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-,this.elem('name')this.findBlockOutside('b-block'). ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS,i-bem.jsAPI ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers (setModgetMod)
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks, .
(/pages/intro) : ,/pages/intro/blocks, ( ) «» (_decoratedb-heading).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common,mobiledesktop, . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist, , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , ,multiline— . HTML , — , .textfieldlabel. , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. -<label>,<input>.
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
selectlabel, -select.. , select,optiondisabled. , : , —option(, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; (_), .
CSS-, :
.b-heading .b-text-input
b-«» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(,.b-block__elem1__elem2-).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
,tag.class.class, CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, .i-bem.js, , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown.
, CSS, CSS-, .
b-editor:
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
,type:inplace.
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClickb-link,_pseudo_yes. .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-,this.elem('name')this.findBlockOutside('b-block'). ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS,i-bem.jsAPI ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers (setModgetMod)
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks, .
(/pages/intro) : ,/pages/intro/blocks, ( ) «» (_decoratedb-heading).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common,mobiledesktop, . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist, , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , ,multiline— . HTML , — , .textfieldlabel. , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. -<label>,<input>.
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
selectlabel, -select.. , select,optiondisabled. , : , —option(, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; (_), .
CSS-, :
.b-heading .b-text-input
b-«» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(,.b-block__elem1__elem2-).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
,tag.class.class, CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, .i-bem.js, , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown.
, CSS, CSS-, .
b-editor:
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
,type:inplace.
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClickb-link,_pseudo_yes. .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-,this.elem('name')this.findBlockOutside('b-block'). ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS,i-bem.jsAPI ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers (setModgetMod)
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks, .
(/pages/intro) : ,/pages/intro/blocks, ( ) «» (_decoratedb-heading).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common,mobiledesktop, . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist, , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , ,multiline— . HTML , — , .textfieldlabel. , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. -<label>,<input>.
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
selectlabel, -select.. , select,optiondisabled. , : , —option(, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; (_), .
CSS-, :
.b-heading .b-text-input
b-«» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(,.b-block__elem1__elem2-).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
,tag.class.class, CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, .i-bem.js, , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown.
, CSS, CSS-, .
b-editor:
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
,type:inplace.
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClickb-link,_pseudo_yes. .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-,this.elem('name')this.findBlockOutside('b-block'). ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS,i-bem.jsAPI ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers (setModgetMod)
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks, .
(/pages/intro) : ,/pages/intro/blocks, ( ) «» (_decoratedb-heading).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common,mobiledesktop, . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist, , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , ,multiline— . HTML , — , .textfieldlabel. , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. -<label>,<input>.
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
selectlabel, -select.. , select,optiondisabled. , : , —option(, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; (_), .
CSS-, :
.b-heading .b-text-input
b-«» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(,.b-block__elem1__elem2-).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
,tag.class.class, CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, .i-bem.js, , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown.
, CSS, CSS-, .
b-editor:
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
,type:inplace.
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClickb-link,_pseudo_yes. .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-,this.elem('name')this.findBlockOutside('b-block'). ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS,i-bem.jsAPI ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers (setModgetMod)
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks, .
(/pages/intro) : ,/pages/intro/blocks, ( ) «» (_decoratedb-heading).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common,mobiledesktop, . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist, , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , ,multiline— . HTML , — , .textfieldlabel. , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. -<label>,<input>.
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
selectlabel, -select.. , select,optiondisabled. , : , —option(, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; (_), .
CSS-, :
.b-heading .b-text-input
b-«» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(,.b-block__elem1__elem2-).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
,tag.class.class, CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, .i-bem.js, , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown.
, CSS, CSS-, .
b-editor:
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
,type:inplace.
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClickb-link,_pseudo_yes. .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-,this.elem('name')this.findBlockOutside('b-block'). ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS,i-bem.jsAPI ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers (setModgetMod)
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks, .
(/pages/intro) : ,/pages/intro/blocks, ( ) «» (_decoratedb-heading).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common,mobiledesktop, . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , . . , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .
. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .. , datalist , , .
, :
BLOCK text-input MOD multiline MOD disabled ELEMENT text-field ELEMENT label
, . , , multiline — . HTML , — , . textfield label . , , .
BLOCK checkbox ELEMENT tick-box ELEMENT label
BLOCK radio ELEMENT radio-button ELEMENT label
. - <label> , <input> .
BLOCK select MOD disabled MOD multiple ELEMENT optgroup ELEMENT option MOD disabled MOD selected
select label , - select . . , select , option disabled . , : , — option (, !). .
. , !
CSS
, CSS. ?
, CSS- , . CSS , .
CSS
:
, ; , ; ( _ ), .
CSS-, :
.b-heading .b-text-input
b- «» . , . , , CSS ( !) .
CSS- , :
.b-text-input__label .b-text-input__text-field
(, .b-block__elem1__elem2 -).
, . CSS- «», , :
.b-text-input_disabled .b-select__option_selected
. — «-», :
.b-heading_level_alpha
- :
<div class="b-heading b-heading_level_alpha">BEM</div>
CSS -
CSS . — CSS. BEM ID, . .
CSS-:
CSS - , , .
«» : CSS-. , , , ( CSS ) . , , .
. :
td.data { background-color: white } td.summary { background-color: yellow }
:
.final-summary { background-color: green }
, tag.class .class , CSS-.
, :
td.final-summary { background-color: green }
, , , .
, ?!
— , . , , , . CSS , .
? , CSS, Cascading Style Sheets?
, - . , , . , , , ( !) , :
; ; .
CSS-, . , . « » ( ) , . , . , , — , , .
CSS , CSS- . , CSS . , 250 — , . CSS , , « ».
, CSS?! , , , . , , — . , :
.b-text-input_disabled .b-text-input__label { display: none; }
, , , , ( ), - ! , .
, ( , , CSS-). , ( !), .
( )
, CSS? : , . « », . «» , ( ) . - CSS- . ; . , .
— . , . ?
, (Nicolas Gallagher) , . , , .
, , : -, , . , .
, - , . — , , .
JavaScript -
- JavaScript-?
CSS, .
, (HTML, CSS, JavaScript, , ) — polyfill, , jQuery, API DOM.
HTML , . , Web Components, , , , API, .
. , «», , , . «- » — .
— . — , «», «». , SQL XSLT — , , , . , .
, . i-bem.js , , , , , -.
BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */
b-dropdown .
, CSS, CSS-, .
b-editor :
BEMDOM.decl('b-editor', { onSetMod: { hotkeys: { windows: function() { this.delMod('theme'); this.loadKeyMap('windows'); }, emacs: function() { this.setMod('theme', 'unix'); this.loadKeyMap('emacs'); enableEasterEgg(); }, '': function() { this.clearKeyMaps(); this.delMod('theme'); } } } /* … */
, .
, , ( — ):
BEMDOM.decl({ block : 'b-popup', modName : 'type', modVal : 'inplace' }, { appear: function() { // makeYouHappy(); } });
, type : inplace .
«» -, , , . , . :
BEMDOM.decl({ block: 'b-link', 'modName': 'pseudo', 'modVal': 'yes' }, { _onClick : function() { // _onClick, // b-link this.__base.apply(this, arguments); // CSS, // // this.setMod('status', 'clicked'); } });
_onClick b-link , _pseudo_yes . .
HTML- JavaScript , -.
-
, ? — -, , DOM, (, , ):
BEMDOM.decl('b-checkbox-example', { onSetMod: { js: { inited: function() { var checkbox = this.findBlockInside({ block: 'b-form-checkbox', modName: 'type', modVal: 'my-checkbox' }); BEMDOM.append(this.domElem, 'Checkbox value: ' + checkbox.val()); } } } } );
, API-, this.elem('name') this.findBlockOutside('b-block') . ( ), , - -.
.
, , .
-, .
CSS-, ( ). , CSS, i-bem.js API ( ):
// setter this.setMod(modName, modVal); // getter this.getMod(modName); // this.hasMod(modName, modVal); // this.toggleMod(modName, modVal); // this.delMod(modName);
, .
-
JavaScript- , - .
«» , :
-, DOM-
API, DOM,
-.
, .
, .
, CSS ( ,
..). inline CSS .
, - .
jQuery,
- :
jQuery BEM plugin jQuery BEM Helpers ( setMod getMod )
— Style Guide
, - .
, , ™. , PDF-, , , . , , - : - , «» .
, , « »? « », . , , ? «», .
, «» .
. (), ( ).
, « » «», , (, , «» -). : , , «pixel perfect» . , ( — --) ! — , . , , .
, , , — , , — UX-. , , « ».
, ( ) , « » , - . , (-, , ) ; , — . , , :
: . , — . , , , , — , .
, , . , , API , « » , . : , , , : , — .
, - , , :
() , , () , .
. , ?
// b-popup // _hidden _size _big _medium _large _direction _left _right _top _bottom _color-scheme _dark _light // __anchor-node __popup-box __close-btn __controls __ok __cancel
- ( ), , , , !
, . - CSS-, YAML .
, . , . , .. , ( - ?!), — , .
, . , — , .
— « » , -. , — . , :
/blocks /b-button /b-heading /b-flyout /b-menu /b-text-field
( ..) .
:
/blocks … /b-jquery /b-model
«» :
/b-menu b-menu.js b-menu.css b-menu.tpl
«» — , :
/b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
, . .
, ? () . JS- , ? , (JS, HTML, CSS) .
, . .
, :
/common /blocks /b-heading /b-menu … /pages /intro /blocks /b-heading b-heading_decorated.css /b-demo /b-wizard …
/common/blocks , .
( /pages/intro ) : , /pages/intro/blocks , ( ) «» ( _decorated b-heading ).
, ( , , ).
- :
/common.blocks /desktop.blocks /mobile.blocks
common , mobile desktop , . , , .
- ( ). , . - , . « ».
- , JavaScript CSS , UglifyJS CSS Optimizer . RequireJS , , .
-? bem-tools .
, , : , , .
, , ... ?
. - , , , , : -.
.
, . , DOM . , , . , « » -, .
? , , , , .Source: https://habr.com/ru/post/234905/
All Articles