Представляем перевод статьи «Why CSS Grid is better than Bootstrap for creating layouts » от Per Harald Borgen, опубликованный на сайте ru.hexlet.io.

CSS Grid - это новый способ создания макетов в интернете. Впервые полноценная система вёрстки доступна прямо в браузере, что даёт массу преимуществ.

Эти преимущества становятся особенно выразительными, если вы сравните CSS Grid с самым популярным фреймворком Bootstrap . Вы можете не только создавать макеты, которые раньше были невозможны без JavaScript, но ваш код станет легче поддерживать и понимать.

Давайте посмотрим на три главных причины, почему я думаю, что CSS Grid превосходит Bootstrap.

Разметка станет проще

Замена Bootstrap на CSS Grid сделает HTML более чистым. Хотя это не самое важное преимущество, оно, вероятно, первое, которое вы заметите.

Для наглядности я создал фиктивный макет веб-сайта, чтобы можно было сравнить код, необходимый для двух версий. Вот:

Bootstrap

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

Тут мне хочется, чтобы вы обратили внимание вот на что:

1. Каждая строчка должна быть с отдельным тэгом
   .
2. Для обозначения макета должны использоваться имена классов (col-xs-2).
3. Когда этот шаблон усложняется, HTML тоже.

Если это адаптивный сайт, тэги выглядят как правило ещё хуже:

CSS Grid

Теперь давайте посмотрим на способ реализации того же в CSS Grid. Вот HTML:

Я мог использовать семантические элементы, но решил придерживаться div, чтобы сравнение с Bootstrap выглядело понятнее.

Можно заметить сразу, что эта разметка проще. Уродливые имена классов и дополнительные тэги div для каждой строчки - в прошлом. Это просто контейнер для сетки и позиции внутри неё.

И в отличие от Bootstrap, эта разметка не станет слишком сложной с ростом сложности макета страницы.

В примере с Bootstrap от вас не требовалось добавлять CSS, в CSS Grid в этом конечно есть необходимость. Если конкретно, вам необходимо добавить это:

Для некоторых это может быть аргументом в пользу Bootstrap: вам не нужно беспокоиться о CSS для создания простой сетки - вы просто строите макет в HTML.

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

Намного больше гибкости

Предположим, вы хотите менять макет в зависимости от размера экрана. Например, поднимать меню в верхний ряд, для просмотра с мобильных устройств.

Другими словами - изменить макет с такого:

на такой:

CSS Grid

Делать это с CSS Grid очень просто. Мы добавляем media-запрос и перемешиваем разные блоки как хотим:

Возможность создания макета подобным образом - не заботясь о том, как написан HTML - называется независимостью от порядка в коде (source order independence), и это гигантская победа для разработчиков и дизайнеров.

CSS Grid позволяет превратить HTML в то, чем он должен был быть. В разметку контента, а не визуальность, которая предназначена для CSS.

Bootstrap

Если бы мы захотели сделать то же самое в Bootstrap, нам бы потребовалось менять HTML. Нам нужно было бы поднять тег menu в верхний ряд, в добавок к header, потому что menu во втором ряду в заложниках.

Сделать такое с наличием медиа-запроса - не тривиальная задача. Такое можно провернуть только вместе с HTML и CSS, и вам бы пришлось возиться с JavaScript.

Этот пример показывает огромное преимущество CSS Grid, которое я испытал на себе.

Больше никаких ограничений 12 колонками

Это не самая крупная проблема, но она множество раз выводила из себя. Поскольку Bootstrap grid разделён на 12 колонок, у вас появятся проблемы, если вы захотите макет из пяти. Или семи. Или девяти. Или из числа, которое не двенадцать.

С CSS Grid всё не так. Вы можете сделать свой собственный макет из стольких колонок из скольких хотите. Вот макет из семи колонок.

Это делается установкой значения repeat(7, 1fr) для grid-template-columns, вот так:

Возможно, есть хак-способов сделать подобное в Bootstrap… И я в курсе, что Bootstrap 4 использует Flexbox, который даёт возможность такой гибкости, но он всё ещё никак не выйдет из бета-версии.

Перед тем, как завершить эту статью, естественно, нужно поговорить о поддержке браузеров. На момент написания этой статьи, 75% глобального веб-трафика поддерживает CSS Grid.

Но, перед тем, как вы целиком откажетесь от мысли пользоваться CSS Grid, я советую прислушаться к тому, что говорит Мортен Ранд-Хендриксен об этом. Он утверждает, что CSS Grid - это возможность переосмыслить то, как мы представляем обратную совместимость:

«CSS Grid - это модуль разметки, он позволяет нам менять разметку документа без вмешательства в порядок исходного кода. Другими словами CSS Grid - это абсолютно визуальный инструмент, и если его правильно использовать, он не будет влиять на внутренние связи содержимого в документе. Из этого следует простой, но удивительный факт: отсутствие поддержки CSS Grid в старом браузере не должно влиять на восприятие посетителя сайта, оно должно просто менять это восприятие».

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

Заключение

«Чем больше я использую CSS Grid, тем больше убеждена, что нет никакого преимущества в добавлении слоя абстракции поверх него. CSS Grid - это фреймворк разметки, вшитый прямо в браузер».

Здравствуйте, уважаемые читатели блога сайт. Сегодня я хотел бы поговорить о том, зачем вам может понадобиться при вашей работе с сайтом знание языка HTML (читайте про то, что это такое ), основы работы с таблицами каскадных стилей CSS (вступительную статью по теме вы найдете ), а так же понимание хотя бы основ и принципов , построения программ на языке PHP и логики работы с базами данных MySQL.

позволяет делать сайты, не владея все упомянутыми выше премудростями, но при этом у вас по ходу работы, наверняка, будут возникать вопросы и проблемы, которые вы не сможете решить средствами даже самой навороченной CMS (Joomla, WordPress, Друпал и т.д.).

Зачем может понадобиться при работе над сайтом знание языков (разметки, стилей, серверного программирования)

Либо вы не найдете такого пункта в админке CMS среди множества других настроек (логика авторов движков при размещении некоторых пунктов настройки остается непонятной и, возможно, здесь играет определенную роль сила привычки самого автора), либо разработчики вообще не включат такой пункт в админку системы управления контента. Невозможно реализовать настройки для всего через админку — туда, обычно, выводят только самые необходимые и часто используемые настройки.

Зачастую бывает проще решить проблему не штатными, предусмотренными в админке движка средствами, а напрямую, правя что-то в базе данных или же корректируя содержимое определенных файлов движка через доступ к ним по ФТП.

Да, для этого потребуется потратить время на изучение хотя бы основ языка разметки HTML, понять каким образом влияют каскадные таблицы стилей на внешний вид вебстраниц, а так же разобраться с устройством базы данных, научиться вносить в нее изменения. И, пожалуй, самое сложное — это понять базовые принципы написания кода на языке PHP для того, что бы понимать, что и где можно безболезненно поменять, а что трогать не стоит.

Начну я, конечно, с оформления вебстраниц (собственно, на данный момент я уже это дело закончил и вы можете ознакомиться с результами и ). Как я уже упоминал в одном из предыдущих постов, до недавнего времени все ресурсы состояли из страничек в формате HTML. Причем, там задавалось и наполнение вебсайта (тексты, изображения, таблицы) и его оформление (цвета, фон, отступы).

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

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

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

C появлением таблиц стилей многие теги языка гипертекстовой разметки и их атрибуты стали считаться устаревшими и не рекомендованными для использования. Вместо них советуют использовать свойства CSS, выполняющие те же действия. Это отнюдь не означает, что HTML теперь уже изучать не надо, просто уменьшилось количество тегов и их атрибутов, которые надо знать и уметь использовать для создании и поддержания в должном состоянии сайта. Я постараюсь рассказать про те теги, которые я сам постоянно использую.

В каком редакторе лучше править или вносить изменения в код

Ничего сложного в этом нет, ведь по сути это даже не язык программирования, а гипертекстовая разметка, нечто похожее на синтаксис в русском языке. Что хотелось бы сразу посоветовать, опираясь на собственный опыт? Пробуйте писать теги самостоятельно в блокноте, типа Notepad++ (читайте мой ), а не в программах, типа Дримвьювер. Почему?

Да потому, что в этом случае вы набьете руку и запомните написание тегов и атрибутов. Да, в программах типа Дримвьювера удобнее верстать, т.к. вы тут же сможете его посмотреть в браузере, а варианты написания того или иного тега можно выбрать из выпадающего списка.

Но дело в том, что вам в основном придется править уже существующий код в файлах вашего движка и гораздо удобнее будет, если вы будете помнить написание всех тегов и их атрибутов наизусть (благо их не так много). Зачем для исправления одного тэга открывать файл в громоздком Дримвьевере, когда для этих целей вполне достаточно обычного блокнота, ну, или его продвинутого аналога под название Нотепад плюс плюс (ссылка приведена чуть выше).

Хотя, это мое личное мнение (ИМХО) и вам решать, что удобнее. Например, Евгений Попов , по курсам которого я изучал все это дело, судя по всему, приверженец Дримвьевера. Важно в принципе одно – чтобы вы правили код в том редакторе, который способен сохранять все внесенные изменения и который может, при желании, вернуть все как было (взад).

В этом случае, как бы вы не напортачили, все будет поправимо. И, конечно же, очень удобна подсветка синтаксиса языка, на котором вы пишете или редактируете код. Notepad++ — это безусловно мой выбор! О его возможностях я рассказал в приведенной чуть выше статье.

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

В то время, как теги вебстраниц в современной CMS не записаны в каком-то одном или нескольких файлах, как было раньше, а генерируется (интерпретируется) из PHP. И именно уже сгенерированный таким образом Html код подсовывается браузеру для того, чтобы он в свою очередь интерпретировал его в удобоваримую для нас форму интернет-странички. Хитро, не правда ли?

Поэтому правка тегов в любой CMS не является такой уж тривиальной задачей, даже если вы полностью освоились с языком гипертекстовой разметки. Ведь тэги вам придется править в PHP файлах и, следовательно, нужно будет знать хотя бы его базовые понятия и синтаксис.

Но не волнуйтесь, для того чтобы править дизайн больших познаний в PHP от вас не потребуется. Тэги там лежат, как бы сказать, на поверхности и не составляет большого труда их идентифицировать и поправить при необходимость.

Какие инструменты вы сможете использовать

Проблема возникает, как правило, в другом. Как найти тот файл с расширением PHP, в котором формируется нужный фрагмент тэгов? Вот вопрос вопросов. Да, конечно, если у вас есть опыт в работе с данным движков, то вы, я думаю, соориентируетесь. Но если вы новичок и не знаете какой из сотен Пхп файликов за что отвечает?

Тут вам поможет великолепный плагин для не менее великолепного браузера , а так же упомянутый выше Notepad++, и не безызвестный многим . Эта связка программ поможет вам горы свернуть и позволит сэкономить массу времени.

В ближайших постах я собираюсь подробно рассказать, как использовать эти программы для эффективного решения возникающих проблем с сайтом. Да, чуть не забыл про незаменимую программу, позволяющую получить доступ по FTP – FileZilla ( уже имеется статья на эту тему). Ну и про мы, конечно же, тоже поговорим.

Ну вот, цели намечены, задачи поставлены, осталось только их выполнять. За сим разрешите откланяться.

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Красивые русские шрифты для сайта и компьютера в онлайн сервисе Google Font - где скачать и как установить Адаптивный (отзывчивый) дизайн - оптимизация сайта для его просмотра на мобильных устройствах
Gif, Png или Jpg - форматы растровой графики для веба, их плюсы и минусы при использовании на сайте

Это вторая статья руководства по CSS для начинающих , объясняющая взаимосвязь между CSS и документами. В ней вы узнаете, как добавить CSS стили для документа, который вы создали в процессе изучения первой статьи.

Информация: Зачем нужен CSS?

CSS используется для определения стилей ваших документов, в том числе дизайна, верстки и вариаций макета для различных устройств и размеров экрана. Вы можете разместить стили CSS внутри тега документа с встроенной таблицей стилей, или приложить отдельный CSS-файл, который будет определять ваши стили извне. Чтобы привязать внешнюю таблицу стилей к документу, просто добавьте ссылку на таблицу стилей в заголовке документа.

У внешней таблицы стилей есть множество преимуществ. Сохранение стилей отдельно от содержания HTML:

• Помогает избежать дублирования
• Облегчает обслуживание
• Позволяет делать изменения для всего сайта в одном месте

Используя CSS, вы храните информацию о стилях в общих файлах, которые доступны всем страницам. Например, когда документы ссылаются на те таблицы стилей, которые определяют цвет заголовков h2, вы можете применить стиль для тегов заголовков h2 на глобальном уровне путем изменения одного атрибута CSS.

Когда пользователь открывает веб-страницу, браузер загружает информацию стиля вместе с содержанием страницы.

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

Как заставить HTML и CSS работать вместе? В целом, HTML используется для описания содержимого документа, а не его стиля. CSS же используется, чтобы указать стиль документа, но не содержание. Позже в руководстве вы увидите некоторые исключения из этого правила.

Подробнее

Язык разметки, типа HTML также обеспечивает некоторые способы задания стилей.

Например, в HTML вы можете использовать тег , чтобы сделать текст жирным, либо указать цвет фона страницы в теге .

При использовании CSS, задание стилей средствами языка разметки обычно не используется, поскольку вся информация о стилях легко доступна для чтения и изменения в CSS-файле.

Действие: Создание таблицы стилей

1. Создайте новый текстовый файл в том же каталоге, что и doc1.html , созданный в первой статье.
2. Сохраните его как style1.css . Этот файл будет вашей таблицей стилей.
3. Скопируйте и вставьте в CSS-файл приведённую ниже строку, после чего сохраните файл: strong {color: red;}

Привязка таблицы стилей к документу

1. Для привязки вашего документа к таблице стилей, необходимо внести в HTML-файл некоторые исправления. Добавьте строки, приведённые ниже:

   C ascading S tyle S heets

2. Сохраните файл, и откройте его в браузере. Таблица стилей сделает заглавные буквы красными:

В дополнение к красному, в CSS имеются и другие названия цветов.

• Tutorial

Ошибки и советы я написал по-своему опыту. Если найдутся ошибки типа «вредных советов», то буду рад услышать конструктивную критику. Пост предназначен для начинающих изучать HTML и CSS, но, возможно, специалистам тоже будет интересно ознакомиться с данным материалом.

1. W3C Validator

Рекомендуется проверять HTML и CSS сайта через сервис validator.w3.org. Данный сервис просканирует код и отобразит ошибки, например:

• не закрыт тег;
• не рекомендованные символы в ссылках;
• используется не рекомендованный тег;
• не указан обязательный атрибут;
• и другое.

2. Вёрстка в формате UTF-8

При вёрстке страницы, надо убедиться, что кодировка файла установлена в UTF-8 (без BOM) . Каждый текстовый редактор устанавливает кодировку по-своему.

Файл в формате UTF-8 позволяет использовать нестандартные символы (например, символы различных языков, знак валюты и другие).

Также надо сообщить браузерам, что страница открывается в кодировке UTF-8. Это делается через тег ниже:

3. Одинаковые id у нескольких элементов

Значение атрибута id в HTML-коде не должно повторяться.

4. Спрайты

Несколько маленьких картинок рекомендуется соединять в один файл (такой файл называется спрайт). Это уменьшит количество запросов на сайт и улучшит скорость загрузки страницы.

Сейчас также популярно вместо спрайтов использовать шрифты с иконками. Т.е. вместо букв выводятся иконки шестерёнки, смайлика и других иконок. В качестве примера можно привести иконки glyphicons, которые используются в Twitter Bootstrap.

Преимущества шрифтов к спрайтам, это сохранение качества при изменении размера иконок и меньший размер. Но недостаток, нельзя использовать больше одного цвета в иконке.

5. Много селекторов

Не рекомендуется использовать больше трёх селекторов, т.к. это влияет на производительность сайта.

/* не рекомендуется, большая вложенность */ .page .item .title a {} /* можно сократить */ .page .item a {}
Браузеры читают CSS справа налево. Т.е. в коде выше, сначала будут выбраны все ссылки, что есть на странице, а потом будут выбраны те ссылки, которые находятся внутри элемента.item.

6. Стили в HTML

HTML предназначен для вывода информации (текст, картинки). Оформления контента (изменить размер, цвет, шрифт) происходит в CSS.

Ошибка в коде

Ошибка в коде

7. Неправильное названия классов

Многие верстальщики, когда надо сделать текст зелёным цветом, прикрепляют к нему класс.green.

Текст сообщения

Это неправильно, т.к. при смене дизайна, многие цвета могут измениться, например, текст сообщения может выводиться синим цветом вместо зелёного. Тогда придётся искать все теги, у которых есть класс.green и заменять его на.blue.

Текст сообщения

Текст сообщения

8. Пиксели в дробных значениях

Некоторые браузеры позволяют указывать пиксели в дробных значениях, например «1.5px». Но это неправильно, т.к. пиксель это неделимая единица. Вместо «1.5px» лучше использовать «1.5em».

P { /* не правильно */ letter-spacing: 1.5px; /* правильно */ letter-spacing: .005em; }

9. Использование классов вместо id

Рекомендуется делать выборку по классам вместо id, т.к. селекторы с id имеют больший вес, чем у классов, и их сложно будет переопределить.

#modal a { color: blue; } /* цвет ниже не получится переопределить, т.к. #modal имеет больший вес, чем у классов */ .modal-header a { color: #333; } /* в этом случае придётся добавить #modal */ #modal .modal-header a { color: #333; }
Также не рекомендуется использовать!important, т.к. его вес выше, чем у атрибута id, и его также будет сложно переопределить.

10. Меню

Меню должно быть оформлено как список.

Главная Новости О компании

• Главная
• Новости
• О компании

11. Пропущенный alt у картинок

В тегах надо указывать атрибут alt (можно пустой).

12. Теги

На странице должен быть только один заголовок в теге

. В основном, в этом теге находится название страницы.

13. Транскрипция

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

/* неправильно */ .tovar {} .stranica {} .zapros {} /* правильно */ .product {} .page {} .query {}

14. Clearfix

Про clearfix сложно написать в двух словах, но укажу момент, которые многие верстальщики, по моему мнению, делают ошибку.

Класс.clearfix надо указывать в родительском теге, а не ставить рядом.

15. HTML - язык программирования

Некоторые новички в HTML думают, что HTML это язык программирования. На самом деле HTML не является языком программирования, его можно сравнить с Microsoft Word. Например, чтобы текст сделать жирным, в Word надо нажать на кнопку, а в HTML надо прописать код. Т.е. HTML это просто инструмент, который добавляет текст, картинки, таблицы и другие элементы.

У меня есть этот html:

Parting is such sweet sorrow! - Bill Rattleandrollspeer

И этот css (добавлен в конец сайта Site.css):

Fancify { font-size: 1.5em; font-weight: 800; font-family: Consolas, "Segoe UI", Calibri, sans-serif; font-style: italic; }

Итак, я бы ожидал, что цитата ("Parting - такая сладкая скорбь!") будет выделена курсивом и другого шрифта, чем имя цитаты (Bill Rattleandrollspeer), поскольку его тег span имеет класс "fancify", прилагается к нему. Класс следует обязательно увидеть, поскольку файл, в котором он появляется, ссылается на файл макета, который использует файл Site.css.

Какую ошибку новобранец я делаю сейчас?

UPDATE

Я подумал, может быть, проблема в том, что я добавил новый класс в Site.css после этого раздела в этом файле:

/******************** * Mobile Styles * ********************/ @media only screen and (max-width: 850px) {

Но я переместил его выше, и он все еще не работает, и не видел через F12 | Проверьте элемент для соответствующей метки.

ОБНОВЛЕНИЕ 2

Вот как сходит HTML:

Parting is such sweet sorrow!

И вот мое правило css в Site.css:

P span label .fancify { font-size: 1.5em; font-weight: 800; font-family: Consolas, "Segoe UI", Calibri, sans-serif; font-style: italic; display: inline; }

Но это не распознается. Я считаю это казнью css/html протокола и должен быть рассмотрен каким-то мировым телом. Опять же, я мог бы совершить какую-то глупую ошибку.