nikolai-shabalin/htmlcss-2__section-2.md

## htmlcss-2__section-2.md

      
    Raw
  

              htmlcss-2__section-2.md
            
          
    Вопросы к разделу «Методологии вёрстки»

Как правильно записать по БЭМ если ul со своими элементами, должен быть элементом другого списка ? (Вложенный список в другой список если так яснее).

<div class="block">
  <ul class="block__element list">
    <li class="list__item"></li>
    <li class="list__item"></li>
    <li class="list__item"></li>
  </ul>
</div>
Надеюсь правильно понял вопрос. Если что уточните.
Как проще тестировать JavaScript?


Как проще всего тестировать JS код с точками останова? Без привязки к html странице и браузеру. Я нашел только 2 относительно простых способа - онлайн редакторы (но в них зачастую нет точек останова), либо создать файл JS и запускать скрипт в редакторе кода. Но, может быть, есть еще способы?

Самый правильный это в редакторе кода, так как при работе с кодом вы в контексте редактора и находитесь, например WebStorm справляется с этим легко. https://www.jetbrains.com/help/webstorm/debugging-javascript-in-chrome.html
Про остальные редакторы не смог подсказать.
Какой фон по умолчанию?


Стиль сайта: Черный фон, белый текст. Если у нас 1 блок и в нем 2 элемента с разным оформлением(1 элемент с красным фоном, другой синий). .block__element. block__element1--theme-red .block__element. block__element2--theme-blue Какой фон по-умолчанию? Какой фон прописывать в .block__element. по-умолчанию?

<div class="block">
  <div class="block__element1"></div> <!--красный фон-->
  <div class="block__element2"></div> <!--синий фон-->
</div>

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

Создать блок .center и миксовать его там где нужно.
.center {
  margin-left: auto;
  margin-right: auto;
}
<div class="header center">...</div>
Нужно ли добавлять линтеры в проект


Вопрос по стилю кода: "Порядок объявления подробных правил, таких как font-size, font-family, line-height, должен соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой должна идти сокращённая версия." поясните пожалуйста. Вопрос по автоматизации проверки: файлы .htmlhintrc, csscomb.json их нужно установить в сборку перед 2 заданием?

Все нужные линтеры уже есть у вас в проекте. Мы о них ещё поговорим в следующих лекциях, а пока ничего дополнительного делать не нужно.
Если вы хотите попробовать какие-то другие инструменты, то смело пробуйте.
Можно ли использовать "соседние селекторы"


по БЭМ соседние селекторы нельзя использовать? Если, например, у меня в блоке есть несколько элементов, и у них разные отступы друг от друга в зависимости от того, какие именно эти элементы, то есть: если в блоке после абзаца идет другой абзац, то между ними большой отступ, а если после абзаца идет картинка или кнопка, то отступ маленький. С помощью соседних селекторов такое поведение можно легко описать, а по БЭМ как это сделать?

БЭМ не запрещает использовать селектор +.
Как переиспользовать тень по БЭМ


Если несколько блоков или элементов имеют, например, одинаковую тень, тень у нас по БЭМ будет модификатором, и как этот модификатор применять ко всем блокам без копипаста, ведь для модификатора у нас есть своя директория, в которой есть стили, скрипты, картинки, или папку модификатора закидывать в корневую и оттуда к нему обращаться?

Вынесите тень из блока в другой блок .shadow, где будет описана только тень
.shadow {
  box-shadow: моя-уникальная-тень
}
И миксуйте эту тень к нужным блокам
<div class="header shadow">
<div class="footer shadow">
Редактор кода позволяет пушить изменения. Можно ли создать векту Module-Task через консоль, и коммитить уже из редактора?

Советую привыкнуть к консоли и потом, когда уже поймёте, что поняли как всем пользоваться переходить к GUI. Я бы потерпел до конца курса.
Обязательно ли всем элементам блока присваивать классы? Или где-то допускается упрощение, скажем на ссылках или картинках или отдельных spam?

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

Об это вы узнаете на интенсивных курсах JS2.
Если коротко пробежаться, то областью видомости. У var она функциональная, а у let блочная.
К let нельзя обратиться не объявив её, с var так можно поступить.
При использовании let в цикле, для каждой итерации создаётся своя переменная.
Что такое микс в БЭМ?


Не совсем понимаю что такое микс. Это когда один класс задаётся нескольким блокам? Как visually-hidden текстовым блокам/элементам для улучшения доступности?

Миксования - это совмещение двух блоков или элементов друг с другом.
.visually-hidden {}

.header {}
.header__title {}

.title {}
<h1 class="title visually-hidden"></h1>

<section class="header">
  <h2 class="header__title visually-hidden"></h2>
</section>
Куда класть элемент


ru.bem.info - допускает использование "миксов".  
  
 
 в данном коде мы миксуем header__search-form к search-form и не ясно следующее, если использовать файловую систему как каждый блок отдельная директория, так вот в какой директории хранить header__search-form в блоке header как элемент header или в директории search-form как его "микс" ведь в нём стили блока search-form отвечающие за его геометрию?

header__search-form должен лежать в файле header. Элементы блока должны находится только у своего блока.
В search-form же должно находится всё, что относится к search-form, так чтобы мы могли взять этот блок и вставить куда угодно.
Как делаются предустановленные файлы в проект


package.json, package-lock.json .gitignore .gitattributes и прочие файлы - в реальной практике насколько часто применяются и как их создавать самому? Тут вы нам все дали, а в жизни где это все брать? Особенно пугают package.json, package-lock.json

Часть этих файлов делаются ручками, но делается один раз всего.

package.json получается при использование команды npm init -y. Дальше обновляется сам, когда вы добавляете новые зависимости. Невозбраняется и руками, то-то дописать - обновить версию пакета, добавить скрипт
package-lock.json - создается автоматически при npm install. Дальше живёт своей жизнью
.gitignore - обычно заполняется по мере требований. Если вы хотите, чтобы какая-то папка или файл не попали в git, то добаляем в этот файл. Взаимодействие с ним крайне редкое
.gitattributes - заполняется один раз и всё

На реальных проектах структура аналогична? Весь кот находится в папке source?

Часто она такая. Название папок бывает отличается, но суть в том, что есть папка source из которой беруться оригиналы и есть папка build, которая генерируется автоматически.
Об этом мы ещё поговорим на лекциях по автоматизации.
У меня вопрос по поводу материалов по подписке. Они будут открыты на время обучения или их нужно приобретать?

Вы можете активировать себе доступ - https://htmlacademy.ru/profile/presents/bought
Что такое staged


Расскажите подробнее как работает команда в терминале git diff --staged , которая показывает проиндексированные изменения и как вообще понимать понятие проиндексированные изменения? Изменения после команды git add . считаются проиндексированными? А после команды git commit -m ? Спасибо :)

Представьте себе, что index это хранилище. Когда вы делаете git add вы добавляете свой файл в хранилище.
Но файлы можно помещать не в хранилище, а класть рядом с ним такая кладовка. Это такое временное решение, что в котором мы ставим банки с вареньем.
В общем у нас есть хранилище и кладовка. Иногда хочется проверить (git diff), чем они отличаются --staged
Можно ли так вкладывать


Поскольку пишу заранее, прошу прощения, если в ходе лекции ответ уже был дан. Возможен ли такой набор классов в элементе (на строке со звездочками): < блок-1 > <*** блок-1__элемент блок-1__элемент--модификатор блок-2 ***> < блок-2__элемент > < блок-2__элемент >

Совершенно не понятна вложенность элементов друг в друга. Можете прислать пример в codepen и тогда ответ будет более точным.
Пока выглядит как рабочеспособный вариант.
Если правильно понял. Вы смиксовали block2 с элементов block1, а дальше вложенность из элементов block2. Если это так, то всё в порядке
Используются ли по этой методологии HTML теги, такие как header, main, footer, section и другие?

БЭМ не запрещает использовать семантичные теги. Я бы даже сказал, что поощряет.
Какие методологии, отличные от БЭМ, применяются на реальных проектах?

БЭМ самый популярный, но также встречается

OOCSS
Atomic CSS

Могу ли я менять элемент если модификатор находится на родителе


Для примера, есть такой код (из документации по БЭМ): 
 One
 Two
 
 Почему модификатор _active ставится на nav__item, а не на nav__link? Если при активном пункте меню мне нужно как-то изменить ссылку (убрать подчеркивание, изменить цвет и т.д.), то придется использовать контекстный селектор .nav__item_active .nav__link {}, что не рекомендуется делать по БЭМ. Как поступать в такой ситуации?

БЭМ не запрещает так делать. Это, вполне, работоспособный вариант.
Есть пять вопросов. Нужны ответы


Очень Прошу Ответить на 5 Очень Важных для понимания правильной верстки вопросов: 1) ссылка, парный тег  может ли быть в потоке документа самостоятельным элементом, то есть идти в потоке как есть, строчным боксом, или обязательно задавать ей блочность или же оборачивать в блочный элемент, или это предрассудки? и можно использовать как есть? 2) img обязательно оборачивать в блочный парный тег? 3) блочным элементам с предустановленными отступами, такие как заголовки (h) и абзацы (p), и другим если есть, правильно обнулять вертикальный отступы? 4) абсолютным позиционированием пользоваться только в крайних случаях? ведь элементы можно спозиционировать и наложить друг на друга отрицательными маржинами при статичном положении по умолчанию. 5) исходит из 4 вопроса, насколько надежна верстка отрицательными маржинами?


Она может быть такой какой вы скажете. То что она должна быть какой-то одной и никак иначе - это предрассудки.
Не обязательно. Если верстка прямо не говорит, что нужна обёртка, то можно обойтись и без неё
Обнулять - не правильно. Делаете изменения точечно, чтобы можно было их контролировать. К тому же скорее всего вы всё равно будет дописывать отступы этим элементам, тогда зачем их нужно было обнулять?
Любым позиционированием пользуйтесь по назначению - нужно вырвать из потока и перенести в другие мето.
Вполне, себе надёжна если мы предполагаем, что блоки никогда не поменяются. Ведь если блок сверху удалиться, то нижний блок с отрицательным маржином уйдёт из сайта