Десктопщик познает веб, часть вторая⁠⁠

Я долго не писал, потому что меня забанили здесь (P.S. еще до того, как это стало мейнстримом)

Итак, название первой было "Я хочу научиться писать простой современный веб-сайт" часть первая https://pikabu.ru/story/ya_khochu_nauchitsya_pisat_prostoy_s... П - программист, Н - новичок.

П: Итак, CSS-фреймворки по сути это библиотека уже готовых компонентов со стилями, что очень упрощает и ускоряет верстку. Одно из популярных из них является Bootstrap, которая включает в себя адаптивную верстку. На ноутбуке сайт отображает так, на планшете по-другому, на смартфоне этак. Попробуй.

Н: Ну наконец-то! Удобства! Становится приятно работать. Создам-ка я темное меню (navBar-dark). Мммм, что-то мне не нравятся ссылки серого цвета. Сделаю-ка я их белым цветом. Так, если убрать navbar-dark класс, они приобретают стандартный синий цвет, поэтому оставляем этот класс и просто меняем цвет тексту вот так:

.navbar-dark a{

color: red;

}

Но цвет не изменился! Почему? Смотрим стили, OMG, сколько классов чтобы просто изменить цвет.

.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {

color: #fff;

} (это стили для активной ссылки, я знаю, просто для примера)

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

П: Единообразие кода, возможная защита при подключение внешнего стиля, чтобы он не переписал текущий стиль. Изучай. (P.S. А знаете, веб улучшается. Я, помня с каким трудом менял цвет меню в Bootstrap 3, попробовал повторить тоже самое в 4 – и был приятно удивлен. Поэтому про использования стилей !important для переименование стандартных стилей не пришлось писать, хотя в 3 это было и я хотел про это написать.)

…

Н: Привет… Словом, проблема с выпадающим меню.

П: Что на этот раз?

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

П: Если тебе нужен CSS, попробуй всякие хаки (велосипеды), типа использование чекбоксов, :focus. А для того, чтобы стиль использовался для клика мыши, тебе лучше изучить и использовать язык программирования JavaScript, чтобы делать обработку событий мыши.

Н: Ну вот почему, почему опять двадцать пять! Почему, если я навожу мышку на элемент, то стиль срабатывает, навожу фокус, то стиль срабатывает, нажимаю и не отпускаю левую кнопку мыши, то стиль все еще работает, а если просто сделать по элементу клик, то неееет, так уже делать нельзя, тут уже нужен JavaScript. А разве наведение мышки на элемент, удержание левой кнопки мыши - это разве не события мыши? (Да, я знаю, раньше даже такого функционала в CSS2 не было, только в JavaScript’e)

П: Нууу… да, есть такие события. Изучай JavaScript. Он позволяет производить математический операции, обработка данных на клиенте, взаимодействовать с пользователем и событиями. Изучай.

...

Н: Слушай, тут такая проблема. Я изучил JavaScript, потом скачал плагин календаря на сайт, решил его настроить, а там синтаксис кода непонятный, доллары везде отображаются…

П: Пф… Это означает, что плагин платный. Типа ватермарки в коде.

Н: Правда?

П: Нет же, это JQuery. Это библиотека JavaScript, которая позволяет легко взаимодействовать и получать доступ к элементам (тегам).

Н: Какая еще библиотека, у неё синтаксис другой! Похоже на другой язык.

П: Нет. Ты с легкостью можешь использовать там JavaScript. JQuery использовали, так как на тот момент возможности JavaScript’a были весьма скудны.

Н: Мда… А, знаешь, мне начинает нравится. Удобно обращаться с DOM, синтаксис доступа к элементам похож на CSS код. Есть множество плагинов. Есть приятный Ajax, не надо перезагружать страницу. Да и JQuery обладает столькими полезными функциями, что даже можно не использовать стандартные функции JavaScript…

П: JQuery считается устаревшим.

Н: Но, но как! Почти все плагины, которые я знаю, требуют JQuery. Даже Bootstrap 4!

П: Поверь мне, лучше углубиться в JavaScript. Изучай.

…

Часть 3 уже на подходе, общий итог и неожиданный поворот гарантирован. Будет ближе к вечеру.