Семантическая структура страницы

Основные понятия БЭМ нейминга

Блоки

Блок — это независимый самодостаточный элемент страницы. Простой тест на то можно ли определить элемент как блок. Блок можно вырвать с его места расположения на странице и разместить на абсолютно чистую страницу, при этом он не потеряет своей актуальности, будет понятно о чем он и какой контент в нем представлен, он не утратит своего смысла.

Классическим вариантом блока является карточка товара, карточка со статьей, отдельно секция с товаром или со статьей, шапка, подвал, и другие секции или целостные элементы страницы.

Имя для блока описывается одним или несколькими словами. Несколько слов в имени блока разделяются дефисом .

Имя блока пишется строчными буквами, не имеет заглавных. В имени используются полные слова, без сокращений.

Неправильно:

product_card
productCard
ProductCaRD
s-products
btnPrimary
Card

Правильно:

product-card
section-products
header
footer
button
card

Элементы

Элемент — это составная часть блока. Элемент является частью блока и находится внутри него.

Если мы рассмотрим блок карточки с товаром, то его внутренние составные части это и есть элементы данного блока. Например элементами карточки с товаром будут: заголовок карточки, цена, изображение товара, описание товара, кнопка покупки.

Элементы всегда принадлежать какому-либо блоку. Не бывает независимых элементов. Принадлежность элемента к блоку описывается двойным подчеркиванием . В имени элемента всегда вначале указывается имя блока к которому он принадлежит, далее после двойного подчеркивания идет имя элемента.

Рассмотрим пример с элементами внутри карточки.

Неправильно:

card-title
cardPrice
card_description
card--button

Правильно:

card__title
card__price
card__description
card__button

Модификаторы

Модификатор — это дополнительный класс который добавляется к html тегу с блоком или элементом. Модификатор — модифицирует (изменяет) отображение блока на странице. Модификатор не может использоваться на теге отдельно от блока или элемента.

Имя класса модификатора содержит в себе имя блока или элемента для которого он создается, далее идет разделитель в виде двух дефисов , и в конце имя модификатора.

Например у нас есть блок карточки товара , и нужно сделать модификатор для карточки товара по распродаже, который будет менять ее фон. Имя такого модификатора будет следующее:

Давайте придумаем модификатор для элемента. Например в карточке товара есть его цена. Цена это элемент блока card и имеет класс . Модификатором для такого элемента будет класс , в котором мы сначала повторяем имя элемента, далее после двойного дефиса указываем имя модификатора.

Неправильные имена модификаторов:

card_sale
card-sale
cardSale
sale

Правильные имена модификаторов:

card--sale
cart__price--sale

Использование модификаторов

Модификатор всегда применяется к блоку или элементу. Нельзя использовать на теге только модификатор, без класса блока или элемента.

Неправильное использование модификаторов:

<div class="card--sale">
  <div class="card__price--sale">12000 РУБ</div>
</div>

Правильное использование модификаторов:

<div class="card card--sale">
  <div class="card__price card__price--sale">12000 РУБ</div>
</div>

Class: Menu​

Process:

Creates a new menu.

Static Methods

The class has the following static methods:

menu Menu | null

Sets as the application menu on macOS. On Windows and Linux, the
will be set as each window’s top menu.

Also on Windows and Linux, you can use a in the top-level item name to
indicate which letter should get a generated accelerator. For example, using
for the file menu would result in a generated accelerator that
opens the associated menu. The indicated character in the button label then gets an
underline, and the character is not displayed on the button label.

In order to escape the character in an item name, add a proceeding . For example, would result in displayed on the button label.

Passing will suppress the default menu. On Windows and Linux,
this has the additional effect of removing the menu bar from the window.

Note: The default menu will be created automatically if the app does not set one.
It contains standard items such as , , , and .

Returns — The application menu, if set, or , if not set.

Note: The returned instance doesn’t support dynamic addition or
removal of menu items. can still
be dynamically modified.

macOS

action string

Sends the to the first responder of application. This is used for
emulating default macOS menu behaviors. Usually you would use the
property of a .

See the
for more information on macOS’ native actions.

template (MenuItemConstructorOptions | MenuItem)[]

Returns

Generally, the is an array of for constructing a
MenuItem. The usage can be referenced above.

You can also attach other fields to the element of the and they will become properties of the constructed menu items.

Instance Methods

The object has the following instance methods:

• Object (optional)
  • BrowserWindow (optional) — Default is the focused window.
  • number (optional) — Default is the current mouse cursor position.
    Must be declared if is declared.
  • number (optional) — Default is the current mouse cursor position.
    Must be declared if is declared.
  • number (optional) macOS — The index of the menu item to
    be positioned under the mouse cursor at the specified coordinates. Default
    is -1.
  • Function (optional) — Called when menu is closed.

Pops up this menu as a context menu in the .

browserWindow BrowserWindow (optional) — Default is the focused window.

Closes the context menu in the .

menuItem MenuItem

Appends the to the menu.

id string

Returns the item with the specified

• Integer
• MenuItem

Inserts the to the position of the menu.

Instance Events

Objects created with or returned by emit the following events:

Note: Some events are only available on specific operating systems and are
labeled as such.

Returns:

event Event

Emitted when is called.

Event: ‘menu-will-close’

Returns:

event Event

Emitted when a popup is closed either manually or with .

objects also have the following properties:

A array containing the menu’s items.

Each consists of multiple s and each
can have a submenu.

Не используйте ненужный атрибут type

Это, возможно, наиболее общая проблема, встречаемая в HTML5 галерее. Хотя это и не ошибка, я считаю, что лучше избегать этого.

В HTML5 нет необходимости указывать атрибут type для элементов <script> и <style>. Хотя от них может быть непросто избавиться, если они автоматически добавляются Вашей CMS, нет смысла включать их в код, если Вы пишете его самостоятельно или можете управлять шаблонами. Т.к. все браузеры по-умолчанию считают, что все скрипты написаны на JavaScript, а стили — это CSS, такая разметка становится избыточной:

Вместо этого Вы можете просто написать:

Помимо прочего, Вы также можете уменьшить количество кода, расходующегося на указание кодировки. Глава Марка Пилгрима о семантике в книге Dive into HTML5 описывает все такие практики.

Не используйте как обёртку для оформленияСкопировать ссылку

Одна из самых распространённых проблем, которую я часто вижу в разметке сайтов — это произвольная замена элементов структурными элементами из HTML5, особенно замена оформительской обёртки на . В XHTML или HTML4 я бы увидел что-нибудь такое:

Вместо этого я вижу следующее:

Честно говоря, это неправильно:  — это не обёртка. Элемент определяет смысловую секцию содержимого для создания структуры документа. Он должен содержать заголовок. Если вы ищете элемент для того чтобы обернуть в него всю страницу (в стиле HTML или XHTML), подумайте, не применить ли стили непосредственно к элементу , как описано у Крока Кеймена. Если же вам всё ещё нужна дополнительная обёртка, используйте . Раз уж Доктор Майк объясняет, что не мёртв, а вам не удаётся найти ничего более удачного, пожалуй, этот элемент будет самым подходящим для создания оформительской обёртки.

Таким образом, корректной разметкой для упомянутого выше примера с использованием HTML5 и пары ролей ARIA будет следующий код

Обратите внимание, что вам, в зависимости от дизайна, всё ещё могут понадобится экстра-элементы

Если вы не уверены, какие элементы использовать, я рекомендую вам обратиться к нашей для разметки содержимого.

Типы пунктов меню

Модуль wxPython поддерживает
четыре типа пуктов:

• ITEM_NORMAL – обычный текст;

• ITEM_SEPARATOR
  – разделитель (сепаратор);

• ITEM_CHECK
  – пункт с флажком;

• ITEM_RADIO
  – пункт с возможностью перебора.

С первыми двумя
мы уже познакомились. Для демонстрации двух других создадим еще одну вкладку:

viewMenu = wx.Menu()

Добавим туда следующие
строчки:

viewMenu.Append(wx.ID_ANY, 'Статустная строка', kind=wx.ITEM_CHECK)
viewMenu.Append(wx.ID_ANY, 'Тип RGB', 'Тип RGB', kind=wx.ITEM_RADIO)
viewMenu.Append(wx.ID_ANY, 'Тип sRGB', 'Тип sRGB', kind=wx.ITEM_RADIO)

Смотрите, здесь
последним именованным параметром идет kind, определяющий
тип пункта меню. У первого стоит ITEM_CHECK, а у двух
других — ITEM_RADIO.

Добавим эту
вкладку на панель меню:

menubar.Append(viewMenu, "&Вид")

Запустим
программу и увидим вот такой эффект:

Смотрите, первую
строчку можно отмечать флажком, а последние две только перебирать: либо RGB, либо sRGB.

Давайте теперь
посмотрим как все это можно отследить в обработчиках этих событий. Пропишем в
начале вот такие константы:

VIEW_STATUS = 2
VIEW_RGB = 3
VIEW_SRGB = 4

Укажем их при
создании строчек меню:

self.vStatus = viewMenu.Append(VIEW_STATUS, 'Статустная строка', kind=wx.ITEM_CHECK)
self.vRgb = viewMenu.Append(VIEW_RGB, 'Тип RGB', 'Тип RGB', kind=wx.ITEM_RADIO)
self.vSrgb = viewMenu.Append(VIEW_SRGB, 'Тип sRGB', 'Тип sRGB', kind=wx.ITEM_RADIO)

И, далее, повесим обработчики:

self.Bind(wx.EVT_MENU, self.onStatus, id=VIEW_STATUS)
self.Bind(wx.EVT_MENU, self.onImageType, id=VIEW_RGB)
self.Bind(wx.EVT_MENU, self.onImageType, id=VIEW_SRGB)

Объявим два метода:

    def onStatus(self, event):
        if self.vStatus.IsChecked():
           print("Показать статусную строку")
        else:
            print("Скрыть статусную строку")
 
    def onImageType(self, event):
        if self.vRgb.IsChecked():
            print("Режим RGB")
        elif self.vSrgb.IsChecked():
            print("Режим sRGB")

Смотрите, мы
здесь используем метод IsChecked(), чтобы определить: выбран ли
данный пункт. И в соответствии с этим выводим в консоль сообщения. Запустим
программу и убедимся, что все работает корректно.

Видео по теме

wxPython #1: обзор модулей для GUI и порядок установки wxPython

wxPython #2: общая структура интерфейса

wxPython #3: создание меню и подменю — MenuBar, Menu, MenuItem, Bind, Append, AppendSeparator

wxPython #4: контекстное меню и панель инструментов (toolbar)

wxPython #5: схемы (layout) размещения виджетов, BoxSizer

wxPython #6: сайзеры — GridSizer, FlexGridSizer, GridBagSizer

wxPython #7: механизм обработки событий — Bind, Unbind

wxPython #8: примеры событий, назначение id виджетам

wxPython #9: стандартные диалоговые окна

wxPython #10: пользовательские диалоговые окна, класс Dialog

wxPython #11: базовые виджеты — StaticText, TextCtrl, Button, ToggleButton, CheckBox и другие

wxPython #12: продвинутая работа с виджетами — ListBox, SplitterWindow, HtmlWindow, Notebook

wxPython #13: графика — контекст устройства, Pen, Brush и градиентная заливка

wxPython #14: графические примитивы, система координат, единицы измерений

wxPython #15: регионы (wx.Region) и операции с ними

wxPython #16: буферизация графических данных — MemoryDC, Blit

wxPython #17: демонстрация программы wxFormBuilder

и

<div> и <span> — это элементы HTML, которые действуют как контейнеры исключительно для целей стилизации. В виде основных контейнеров они не несут какого-либо всеобъемлющего смысла или семантического значения. Абзацы семантически уже потому, что содержимое внутри элемента <p> известно и понятно как абзац. <div> и <span> не содержат какого-либо значения и являются просто контейнерами.

Блочные и строчные элементы

Большинство элементов либо блочные, либо строчные. В чём разница?

Блочные элементы начинаются с новой строки, накладываются друг на друга и занимают всю доступную ширину. Блочные элементы могут быть вложены друг в друга и обёртывать строчные элементы. Обычно мы видим как блочные элементы используются для больших кусков контента, такого как абзацы.

Строчные элементы не начинаются с новой строки. Они попадают в обычный поток документа, выстраиваются друг за другом, а их ширина основана на их содержимом. Строчные элементы могут быть вложены друг в друга, однако, они не могут обёртывать блочные элементы. Обычно мы видим строчные элементы в качестве маленьких кусков контента, таких как отдельные слова.

И <div> и <span>, однако, являются чрезвычайно важными при создании сайта, потому что они дают нам возможность применять целевые стили к набору контента.

<div> является блочным элементом, который обычно используется для идентификации больших групп содержимого и который помогает построить макет и дизайн веб-страницы. <span> с другой стороны является строчным элементом и обычно применяется для идентификации мелких групп текста внутри блочного элемента.

Мы обычно видим <div> и <span> с атрибутом class или id в целях стилизации. Выбор значения или имени атрибута class или id требует некоторого внимания. Мы хотим, чтобы выбранное значение было связано с содержимым элемента, а не с его оформлением.

Например, если у нас есть <div> с оранжевым фоном, который содержит ссылки социальных сетей, нашей первой мыслью может быть дать <div> значение class как orange. Что произойдёт, если оранжевый фон позже сменится на синий? Значение класса orange потеряет смысл. Более разумным выбором для значения class будет social, поскольку он относится к содержимому <div>, а не к его стилю.

Комментарии в HTML и CSS

Предыдущий код включает в себя восклицательные знаки внутри HTML и это нормально. Это не элементы, это комментарии.

HTML и CSS даёт нам возможность оставлять комментарии в коде и любой контент обёрнутый в комментарий не будет отображаться на веб-странице. Комментарии помогают держать наши файлы организованно, позволяют устанавливать напоминания и предлагают нам способ более эффективно управлять кодом. Комментарии становятся особенно полезны, когда есть несколько человек, работающих с одними и теми же файлами.

Комментарии в HTML начинаются с <!— и заканчиваются —>. Комментарии в CSS начинаются с /* и заканчиваются */.

Функционал

Софт отличается наличием точных настроек, которые позволят вам адаптировать программу и загружаемую игру под свои требования. Дополнительные настройки — не менее важный критерий при выборе эмулятора. Например, если вы скачаете MEmu на компьютер, то сможете выбирать разрешение экрана (в том числе выводить изображение в полноэкранный режим), выбирать место размещения панели навигации (она может быть снизу или сверху или находиться в режиме скрытия). Вы также быстро получите рут-права, запустите вириальную клавиатуру и многое другое. Также в программе есть отдельные кнопки, которые позволяют одним нажатием создать скриншот, очистить память, отрегулировать громкость или изменить ориентацию экрана.

Если у вас появилось желание запустить на компьютере мобильные приложения, то у вас есть два способа реализации свой идеи.

Первый подразумевает использование apk-файла. Найти загрузочный файл игры или приложения можно на просторах сети. Вам надо будет лишь открыть полученный таким образом файл через эмулятор. Это можно сделать, воспользовавшись специальной кнопкой на панели задач, которая открывает проводник. Через него вы просто указываете путь к нужному файлу. Но есть способ проще. Достаточно запустить эмулятор, найти файл в той директории, где он сохранен, и дважды по нему кликнуть. Далее программа запустит автоматическую установку, после которой ярлык утилиты появится в главном окне эмулятора.

Второй способ подразумевает работу с Google Play. Для этого, правда, нужен еще гугл-аккаунт.

Разработчики предусмотрели желания многих пользователей. Например, некоторые из них предпочитают на компьютере тестировать приложения, чтобы потом, в случае, если их все устроило, перенести его на мобильное устройство. В MEmu для этого есть все возможности. В частности, вам надо лишь подключить смартфон иди планшет к своему ПК, используя для этого USB-кабель, кликнуть соответствующую кнопку на панели задач и дождаться окончания установки.

С помощью эмулятора также можно отрегулировать управление. Например, вы можете отключить виртуальную клавиатуру, чтобы использовать физическую. Буквально в несколько кликов можно за клавишами, которые вам удобны, закрепить нужные для игр действия

В результате чего вы будете управлять так, как вам удобнее, что особенно важно в шутерах, где счет идет на секунды и от того, как оперативно вы действуете, зависит исход игры

Выпадающее меню

Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.

Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

<ul id="navbar">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О нас</a></li>
</ul>

Подпункты мы разместим в отдельном списке, вложив его в элемент <li>, который содержит родительскую ссылку относительно подпунктов. Теперь мы имеем четкую структуру нашей будущей панели навигации:

<ul id="navbar">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a>
    <ul>
      <li><a href="#">Адрес</a></li>
      <li><a href="#">Телефон</a></li>
      <li><a href="#">Email</a></li>
    </ul>
  </li>
  <li><a href="#">О нас</a></li>
</ul>

Попробовать »

Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент <li> список снова был преобразован в блочный элемент:

#navbar ul { display: none; }
#navbar li:hover ul { display: block; }

Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.

#navbar, #navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar li { float: left; }
#navbar ul li { float: none; }

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

#navbar ul {
  display: none;
  position: absolute;
  top: 100%;
}
#navbar li {
  float: left;
  position: relative;
}
#navbar { height: 30px; }

Попробовать »

Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:

#navbar ul {
  display: none;
  background-color: #f90;
  position: absolute;
  top: 100%;
}
#navbar li:hover ul { display: block; }
#navbar, #navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar {
  height: 30px;
  background-color: #666;
  padding-left: 25px;
  min-width: 470px;
}
#navbar li {
  float: left;
  position: relative;
  height: 100%;
}
#navbar li a {
  display: block;
  padding: 6px;
  width: 100px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
#navbar ul li { float: none; }
#navbar li:hover { background-color: #f90; }
#navbar ul li:hover { background-color: #666; }

Попробовать »

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Шаблоны элемента управления Menu

Посредством свойств StaticMenuItemTemplate и DynamicMenuItemTemplate элемент управления Menu поддерживает также и шаблоны. Эти шаблоны определяют HTML-код, который будет генерироваться для каждого элемента меню, предоставляя вам полный контроль.

Интересно отметить, что шаблон можно использовать независимо от того, как заполняется класс Menu — декларативно или программно. С точки зрения шаблона всегда осуществляется привязка к объекту MenuItem. Это значит, что шаблон всегда должен извлекать значение для элемента из свойства MenuItem.Text, как показано в следующем примере:

Одна из целей использования средств шаблонов Menu состоит в том, чтобы показать множество фрагментов информации, полученной из объекта данных. Например, может понадобиться отобразить заголовок и описание, полученные из SiteMapNode для данного элемента (а не просто заголовок). К сожалению, сделать это невозможно. Дело в том, что объект Menu связан непосредственно с объектом MenuItem. Объект MenuItem предоставляет свойство DataItem, но на момент добавления его в меню это свойство больше не будет иметь ссылки на SiteMapNode, которая использовалась для его заполнения. В результате, практически ничего нельзя сделать.

5 последних уроков рубрики «HTML5»

• В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.

• Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

• HTML5 — глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

• Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

• Знакомство с фрэймворком Webix

  В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

How to create custom menu items

The methods for adding custom menu items are in the UI Registry part of the editor API editor.ui.registry. The API has three methods for adding menu items:

• (identifier, configuration)
• (identifier, configuration)
• (identifier, configuration)

The two arguments these methods take are:

• — a unique name for the button
• — an object containing your configuration for that button.

Define the custom toolbar button with the callback of the TinyMCE configuration to add it to the editor. This callback is invoked automatically for every initialized editor instance. Access to the UI registry API occurs when the callback receives a reference to the editor instance as its argument.

ШАГ 2: изменяем цвета

Возможно, вы видите некоторый черный текст на белом фоне, но это
зависит от конфигурации браузера. Для того чтобы страница выглядела
более стильно, мы можем сделать очень легко одну простую вещь —
добавить цвета. (Оставьте окно браузера открытым — мы к нему еще
вернемся)

Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим
CSS стили и HTML разметку в разные файлы. Раздельное хранение
хорошо тем, что легче использовать те же самые стили для множества
HTML файлов: Вам нужно написать CSS стили только один раз. Но на
этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент <style> к HTML файлу.
Определения стилей будут внутри этого тэга. Возвращаемся к
редактору и добавляем следующие пять строчек в заголовок HTML кода
между тэгами <head> и </head>. Строки, которые надо
добавить выделены красным (с 5-й по 9-ю).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>

Первая строка говорит браузеру о том, что это таблица стилей и
что она написана на CSS (“text/css”). Вторая строка говорит, что мы
применяем стиль к элементу “body”. Третья устанавливает цвет текста
в пурпурный, а следующая устанавливает цвет фона в желто-зеленый
оттенок.

Таблицы стилей CSS создаются согласно правилам. Каждое
правило состоит из трех частей:

1. селектор (в нашем примере: “body”), которые
   говорит о том, к какой части документа применить правило;

2. свойство (в нашем примере свойствами являются
   ‘color’ и ‘background-color’), которое указывает что именно мы
   устанавливаем у данного элемента, выбранного селектором;

3. и значение (‘purple’ и ‘#d8da3d’), которое
   устанавливает значение атрибута.

Наш пример показывает что правила могут быть скомбинированы. Мы
установили два свойства, так же мы могли задать их раздельно:

body { color: purple }
body { background-color: #d8da3d }

но поскольку оба правила относятся к body мы записали “body”
один раз и поместили свойства и значения вместе. Для получения
большей информации о селекторах смотрите главу 2 из Lie & Bos.

Фон элемента body так же является фоном целого документа. Мы
явно не назначили другим элементам (p, li, address…) фона, так что
по умолчанию у них его нет (или он прозрачный). Свойство ‘color’
устанавливает цвет текста элемента body, но все остальные элементы
внутри body наследуют этот цвет, пока для них не задан другой в
виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или
“Save” из файлового меню) и переключитесь обратно в браузер. Если
вы нажмете кнопку “обновить” , то изображение сменится со “скучной”
страницы на разукрашенную (но все еще однообразную) страницу. Кроме
ссылок сверху, весь текст должен быть пурпурный на желто-зеленом
фоне.

Теперь браузер показывает страницу к которой мы добавили цвет.

Выводы и пример разметки с БЭМ неймингом

Пример карточки с товаром. Блок — это карточка, её элементы это изображение, название, цена и ссылка «подробнее».

<div class="card">
  <img class="card__img" src="img/apple-watch.jpg">
  <h3 class="card__title">Apple Watch</h3>
  <span class="card__price">12000 РУБ</span>
  <a class="card__read-more" href="#">Подробнее</a>
</div>

Пример карточки с товаром с модификатором. Модификатор sale установлен для блока карточки и для элемента с ценой.

<div class="card card--sale">
  <img class="card__img" src="img/apple-watch.jpg">
  <h3 class="card__title">Apple Watch</h3>
  <span class="card__price card__price--sale">12000 РУБ</span>
  <a class="card__read-more" href="#">Подробнее</a>
</div>

Пример карточки с вложенными элементами. Зачастую вам могу потребоваться дополнительные обертки внутри блока. Они также будут являться его элементами

Важно помнить все элементы внутри блока принадлежат непосредственном этому блоку. Даже если они вложены друг в друга

Не бывает элементов от элементов. Элементы бывают только от блока.