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 и его конфигурацией можно познакомится, а в дальнейших лекциях мы ещё о нём поговрим.

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

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

@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 отрабатывают должным образом.
Спасибо!