htmlcss-2__section-3.md

Вопросы к разделу «Препроцессоры и автоматизация»

Статья "Культ Карго CSS" меня смущает, что делать?

Я в замешательстве, у вас в материалах под заголовком БЭМ стоит статья «Культ карго CSS», который в принципе опровергает систему БЭМ в пользу более длинных и понятных CSS селекторов ( может не длинных, но понятных ), и проповедует препроцессоры ( с этим спору нет ), и что самое ужасное, говорит, что id... ЭТО ХОРОШО. Но потом в том же списке куча статей по описанию БЭМ системы и вообще академия очень не любит id. У меня двоякие чувства, так-как статья написана очень грамотно и явно не последним человеком в мире веба. Чему верить я не знаю... Учиться как учат, или учесть и эти знания...

Статью "Культ Карго CSS" всегда нужно читать в паре с Архитектура CSS. Их цель посеять в вас зерно сомнения, чтобы вы сами разобрались нужна ли вам методологии в проекте и для чего.

Почему <button>

Вопрос по прошлой лекции про БЭМ. Почему интерактивные элементы (меню, слайдеры) верстались под button(я так понимаю интерактивность будет задаваться с помощью JS), а не под возможные переключения посредством CSS?

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

Как настроить препроцессор (sass), окружение для работы, нужно ли устанавливать дополнительное ПО ?

Все настройки препроцессоров мы пришлём вам после третьей лекции и вы сможете посмотреть их в файле gulpfile.js.

Правильно ли сделали оглавление?

В макете погнали form.html начинается с оглавление "Направления", но это больше походе на личный кабинет с моими планами и моими предпочтениями. Вы уверены что заглавие "Направления" подходит к этому блоку? Так как на главной блок "Направления" соответствуют направлениям, и там есть выбор страны.

Это страница рассказывает в каком направление будет путешественник и чем он будет заниматься в своём путешествие.

Насколько я понял, в реальной разработке гораздо чаще используется препроцессор Sass, почему тогда курсы по Less ?

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

Новые возможности Sass будут рассматриваться на курсе?

В подкасте Веб-стандарты Вадим Макеев рассказывал о важных изменениях в SASS. Возможен ли расширенный рассказ об этом с примерами применения. Мне показалось, что это важные вещи и для новичка не очень простые. Или будет какая-то статья на сайте? Это было бы тоже неплохо.

На этом потоке эти возможности рассматриваться не будут. Всю необходимую минформацию можно узнать в официальном блоге или уже в переводе на habr.com

Как пользоваться stylelint?

Как пользоваться Stylelint? Как прикрутить его к редактору(интересует VSCode).

Работает в вашей консоли по команде npm run test. После третьей лекции

extends": "stylelint-config-htmlacademy" - это набор правил, который где-то хранится(где?) или только "rules": { "declaration-no-important": true, "indentation": [2, {"ignore": ["inside-parens"]}] }

Эти правила храняться в папке node_modules.

CSSComb - похожий зверь или нет?

В целом, да.

Есть замена препроцессорам?

Препроцессоры позволяют гибко решать многие задачи разработчиков. Но мир не стоит на месте. Есть ли уже сейчас какие-то технологии, которые в обозримом будущем придут на смену препроцессорам? и если да, то какие? Спасибо

Некоторые разработчики возвращаются обратно к CSS. Прям прорывных технологий пока не видно, но с другой стороны, чем CSS не прорывной?

Почему при работе с препроцессорами мы не начали изучать Gulp?

Начиная работать с SASS (LESS) не было бы логичней начать с Gulp? Ну например: как создавать (как правильно создавать) package.json, что делать если что-то пошло не так и что может пойти не так в этом процессе и т.д. по тонкостям установки и работы с gulp. Ведь без него код не будет компилироваться. Отчего же мы бежим впереди паровоза? Да, нам сейчас прислали исходники для инсталляции галп и создания файла node_modules. Но в реальных проектах так не будет. Нас научат этому?

Мы ещё рассмотрим работу с Gulp. Чтобы начать разбираться с Gulp нужно разобраться с JavaScript. Сейчас с Gulp и его конфигурацией можно познакомится, а в дальнейших лекциях мы ещё о нём поговрим.

Как наиболее эффективно и правильно создавать миксины и примеси, чтобы потом использовать их где надо и как надо?

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

Установка пакетов после получения обновлений Кекса

Добрый день!
Получил обновления от Кекса, установил NodeJS LTS 12.13.0 (актуальную на текущий момент)
Пытаюсь теперь установить недостающие пакеты командой npm install, находясь в директории с проектом. В результате у меня выходит:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 11994 packages in 27.978s
found 2 low severity vulnerabilities
run npm audit fix to fix them, or npm audit for details

Получается, что у меня не поддерживаемая платформа. С этим можно будет выполнять проект или нужно будет что-то сделать?
Команда npm audit fix, соответственно, предупреждение не решает

@katanaevav, какая у вас ОС?

@katanaevav, какая у вас ОС?

Windows 10 x64 (версия 1809)

Кекс хорошо потрудился и подготовил для вашего проекта графику, шрифты и конфигурацию для сборки препроцессора.

Я так понимаю, что нам дали готовые файлы конфигураций для сборки. А все же, на реальных проектах это все потребуется создавать руками? Если я, например, захочу попрактиковаться на том же барбершопе или макете из рассылки, то как мне сделать так же, как и на личном проекте интенсива?
В интернете все разнится. Одни пишут про установку - gem install sass
В задании npm i
На сайте https://sass-scss.ru/ - npm install -g sass
В итоге нет понимания что же делать за рамками интенсива, когда нужно взять другой проект и сверстать его с препроцессором.

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

1. gem install sass и npm install -g sass устанавливают Sass как инструмент в вашу ОС, глобально, вне зависимости от проекта. В первом случае, устанавливается версия на Ruby (устаревшая, нереомендуемая), во втором — LibSass/Dart-версия, но тоже глобально и для всех проектов.
2. Мы же предлагаем вам файл package.json, в котором хранятся зависимости вашего проекта, которые говорят о вашем проекте и только о нём, то есть работают только в рамках папки, в корне которой лежит этот package.json. Делая npm i, вы говорите npm «установи зависимости моего проета, описанные в package.json, в папку node_modules моего текущего проекта». И дальше вы можете использовать Sass в с помощью gulp в gulpfile.js.

@katanaevav, у вас получилось разобраться и починить сборку?

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

1. gem install sass и npm install -g sass устанавливают Sass как инструмент в вашу ОС, глобально, вне зависимости от проекта. В первом случае, устанавливается версия на Ruby (устаревшая, нереомендуемая), во втором — LibSass/Dart-версия, но тоже глобально и для всех проектов.
2. Мы же предлагаем вам файл package.json, в котором хранятся зависимости вашего проекта, которые говорят о вашем проекте и только о нём, то есть работают только в рамках папки, в корне которой лежит этот package.json. Делая npm i, вы говорите npm «установи зависимости моего проета, описанные в package.json, в папку node_modules моего текущего проекта». И дальше вы можете использовать Sass в с помощью gulp в gulpfile.js.

То есть я могу использовать слегка модифицированный package.json из курса академии для своих проектов?

@dreadwood, да, конечно, мы постарались усреднить и немного упростить типичный стек для сборки фронтенда. Другое дело, что вы можете смело его расширять и усложнять, когда поймёте как и зачем.

@katanaevav, у вас получилось разобраться и починить сборку?

@pepelsbey, разобраться получилось. Немного "погуглив" и поговорив с наставником понял, что это всего-лишь предупреждение и является нормальным для win10x64.
Данную операцию пробовал проделать на разных рабочих местах с такой же программной архитектурой и эти предупреждения снова появлялись.
На функционал это не повлияло. Команды npm test и npm start отрабатывают должным образом.
Спасибо!