Как правильно записать по БЭМ если 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>
Надеюсь правильно понял вопрос. Если что уточните.
Как проще всего тестировать 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, то вешать класс бессмысленно и можно отказаться от его указания на элементе.
Об это вы узнаете на интенсивных курсах 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
из которой беруться оригиналы и есть папка build
, которая генерируется автоматически.
Об этом мы ещё поговорим на лекциях по автоматизации.
У меня вопрос по поводу материалов по подписке. Они будут открыты на время обучения или их нужно приобретать?
Вы можете активировать себе доступ - https://htmlacademy.ru/profile/presents/bought
Расскажите подробнее как работает команда в терминале git diff --staged , которая показывает проиндексированные изменения и как вообще понимать понятие проиндексированные изменения? Изменения после команды git add . считаются проиндексированными? А после команды git commit -m ? Спасибо :)
Представьте себе, что index это хранилище. Когда вы делаете git add
вы добавляете свой файл в хранилище.
Но файлы можно помещать не в хранилище, а класть рядом с ним такая кладовка. Это такое временное решение, что в котором мы ставим банки с вареньем.
В общем у нас есть хранилище и кладовка. Иногда хочется проверить (git diff
), чем они отличаются --staged
Поскольку пишу заранее, прошу прощения, если в ходе лекции ответ уже был дан. Возможен ли такой набор классов в элементе (на строке со звездочками): < блок-1 > <*** блок-1__элемент блок-1__элемент--модификатор блок-2 ***> < блок-2__элемент > < блок-2__элемент >
Совершенно не понятна вложенность элементов друг в друга. Можете прислать пример в codepen и тогда ответ будет более точным.
Пока выглядит как рабочеспособный вариант.
Если правильно понял. Вы смиксовали block2
с элементов block1
, а дальше вложенность из элементов block2
. Если это так, то всё в порядке
БЭМ не запрещает использовать семантичные теги. Я бы даже сказал, что поощряет.
БЭМ самый популярный, но также встречается
- 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 вопроса, насколько надежна верстка отрицательными маржинами?
- Она может быть такой какой вы скажете. То что она должна быть какой-то одной и никак иначе - это предрассудки.
- Не обязательно. Если верстка прямо не говорит, что нужна обёртка, то можно обойтись и без неё
- Обнулять - не правильно. Делаете изменения точечно, чтобы можно было их контролировать. К тому же скорее всего вы всё равно будет дописывать отступы этим элементам, тогда зачем их нужно было обнулять?
- Любым позиционированием пользуйтесь по назначению - нужно вырвать из потока и перенести в другие мето.
- Вполне, себе надёжна если мы предполагаем, что блоки никогда не поменяются. Ведь если блок сверху удалиться, то нижний блок с отрицательным маржином уйдёт из сайта
Не нужно стараться всё уместить в логику БЭМ. Напомню, что БЭМ это абстракция над HTML и CSS. И правила работы HTML и CSS БЭМ не отменяет. Если БЭМ усложняет работу с кодом, то им можно пренебречь. Но в вашем случае можно объявить глобальный блок
.global
и всем его детям раздать box-sizing: border-box.