Поиск по сайту:
...греки, вложившие в такое множество слов так мало мыслей (Ф. Вольтер).

Быть веб-разработчиком в 2020 – Часть 2. Выбор правильной структуры CSS

03.04.2020
Быть веб-разработчиком в 2020 – Часть 2. Выбор правильной структуры CSS

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

  • Использование предопределенных классов позволяет сократить количество часов кода.
  • Код хорошо узнаваем и прост в освоении, идеально подходит для групповых проектов.
  • Отлично подходит для разработчиков без глубоких знаний ядра CSS.

Самые востребованные курсы по веб-разработке от известных и популярных школ можно скачать на сайте https://sliwbl.biz/forums/programmirovanie.27/ . База обучающих курсов обновляется ежедневно.

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

 

Bootstrap

Вероятно, самая популярная среда и та, которая помогла нам улучшить свой стиль программирования как веб-разработчика. Созданные бывшими сотрудниками Twitter, они использовали Bootstrap для поддержания согласованности стилей на сайте. В настоящее время в версии 4.4, в версии 4 они ввели использование flex для своих классов строк и столбцов.

Быть веб-разработчиком в 2020 – Часть 2. Выбор правильной структуры CSS

 

Плюсы

  • Огромный бэк-каталог готовых тем
  • Поддерживается многими браузерами
  • 12 колонок, система жидких сеток
  • Мобильный дружественный
Читать  Лучший плагин для каталога на WordPress

Минусы

  • Сайты начальной загрузки имеют тенденцию выглядеть похожими
  • Не такой легкий ресурс по сравнению с другими
  • Его трудно использовать с плагинами jQuery
Быть веб-разработчиком в 2020 – Часть 2. Выбор правильной структуры CSS

Пример макета начальной загрузки

 

Foundation

В настоящее время, по версии 6, Foundation был создан ZURB. Это семейство адаптивных интерфейсных сред, которые позволяют легко создавать красивые адаптивные веб-сайты для любой платформы/устройства. Настраиваемый, он подходит для индивидуального подхода.

Быть веб-разработчиком в 2020 – Часть 2. Выбор правильной структуры CSS

Плюсы

  • Предлагает большие возможности настройки
  • Легкий каркас
  • Меньше раздувания CSS в HTML
  • Сильная система сеток

Минусы

  • Не самый дружелюбный для начинающих
  • Низкая поддержка Bootstrap из-за популярности
  • Хотя он очень настраиваемый, это может быть сложно сделать
Быть веб-разработчиком в 2020 – Часть 2. Выбор правильной структуры CSS

Пример Foundation

 

Tailwind

Так что же такое Tailwind? Tailwind – это основанная на утилитах инфраструктура, которая отличается от предопределенных классов Bootstrap и Foundation, позволяя разработчику создавать собственные пользовательские проекты, не покидая HTML-документ. Вы настраиваете каждый компонент вашего сайта так, как хотите, без необходимости переопределять/записывать что-либо в файл CSS. Ниже приведен пример, взятый прямо с официального сайта Tailwind.

Быть веб-разработчиком в 2020 – Часть 2. Выбор правильной структуры CSS
Быть веб-разработчиком в 2020 – Часть 2. Выбор правильной структуры CSS

 

Как показано, в классах HTML разработчик заявляет именно то, что он хочет, вплоть до мельчайших деталей. Если вы посмотрите на классы .mt-4 .md: mt-0 , он дает веб-компоненту базовую маржу-вершину 4 rem, а затем объявляет margin-top 0 на экране среднего размера и выше. Это избавляет разработчика от создания пользовательских классов с медиа-запросами.

У вас могут возникнуть проблемы с количеством классов, которые есть у вас на одном веб-компоненте, и, если вам придется использовать этот компонент снова, придется ли вам снова печатать все это? К счастью, Tailwind позволяет вам создавать свои собственные классы, как в CSS, для компонентов, которые широко используются на сайте.

Читать  Несколько способов, чтобы посетители вернулись на ваш сайт
Быть веб-разработчиком в 2020 – Часть 2. Выбор правильной структуры CSS

 

Вывод

Мы только коснулись поверхности того, что может предложить мир CSS Framework, такие фреймворки, как Materialize , Pure.css и Bulma. Так какой же самый лучший? Ответ таков, все они великолепны, никто не лучше другого. Это действительно зависит от того, что подходит вам, разработчику или что лучше подходит для определенного типа проекта. Некоторые из них хороши с точки зрения размера, внося менее 10 КБ размера вашего проекта, другие могут быть довольно легко подобрать, например Bootstrap с его великолепной документацией и широко поддерживающим сообществом.

Из нашего личного опыта, изучив стиль кодирования Bootstrap, мы обнаружили, что наши знания Bootstrap можно перенести на другие фреймворки и позволили нам разрабатывать проекты в Foundation. Радость быть веб-разработчиком в 2020 году.  Это огромное разнообразие ресурсов, которыми мы располагаем, мы стремимся узнать как можно больше новых вещей и с нетерпением ждем начала проектов с Tailwind. в будущем. Если вы новичок в CSS Frameworks, изучите основные его принципы. При этом вы можете легко выбрать то, что могут предложить другие Frameworks.

Удачного кодирования!

Почему бы не прочитать первую часть этого блога здесь: Быть веб-разработчиком в 2020 – Часть 1: CSS или Bootstrap?

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Поделиться в соц. сетях:


0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

0 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии

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


Рекомендуемое
Если у вас возникло желание найти рабочую ссылку на сайт…

Спасибо!

Теперь редакторы в курсе.