Github: github.com/nzbin/snack
предисловие
Эта статья назревала полгода, или так долго мусолилась. Я так много хочу сказать, но не могу даже начать. Легкие фреймворки в наши дни растут как грибы после дождя. Я думаю, что каждый должен обобщить общие потребности на работе и написать CSS-фреймворк, который им подходит. В предыдущих статьях я упоминал объектно-ориентированный CSS (например, BEM, OOCSS, SMACSS, см.vanseodesign.com/css/d...). Это идея и не требует конкретных Проблема CSS, в основном стратегия именования классов! Есть еще много людей, которые до сих пор имеют поверхностное представление о front-end фреймворке, думая, что Bootstrap предназначен только для back-end персонала, а front-end не нужен. Я не знаю, откуда взялось это утверждение, я не любил использовать фреймворки в первую очередь, может быть, как и многие люди, боязнь новых знаний, боязнь сложности в навигации, неумение решать проблемы при встрече и т. д. Самый критический момент заключается в том, что многие думают, что стиль фреймворка фиксированный, и изменять его слишком хлопотно, лучше написать его по чертежу проекта.
Зачем использовать фреймы
Зачем использовать рамку? Очевидный ответ — эффективность. Кроме того, существует множество значений использования фреймворков или исследовательских фреймворков, таких как конкретная реализация объектно-ориентированных идей. Когда я работал в прошлой компании, я тоже использовал самый примитивный метод написания CSS для первых нескольких проектов. Одна из вещей, которая беспокоит меня больше всего в проекте, — это именование классов. Я думаю, что большинство людей называют в соответствии с функцией, что приводит к большому количеству избыточности, и один и тот же компонент может быть написан много раз. В качестве простого примера, как показано на рисунке ниже, интерфейс входа в персональный центр.
Многие люди, включая меня, могут выбрать следующие методы именования и компоновки классов, когда я только начинал, и их универсальность очень мала.
<div class="login-area">
<div class="login-img">
<img src="..." />
</div>
<div class="login-text">
<a href="...">请点击登录</a>
</div>
</div>Тем не менее, чтобы понять Bootstrap, люди должны смотреть, чтобы найти объект медиа-объекта на карте - это не что иное, как некоторые небольшие детали необходимо настроить
<div class="media">
<div class="media-left">
<img src="..." />
</div>
<div class="media-body media-middle">
<a href="...">请点击登录</a>
</div>
</div>Чтобы центрировать текст с изображением, мы можем использовать Bootstrap.media-middleвспомогательный класс. Если вам нужно настроить некоторые вспомогательные детали настройки класса в соответствии с вашими потребностями на работе, конечно, это пример на мобильной стороне, вы можете выбрать медиа-объект, связанный с мобильной стороной.
Кроме того, когда проект был пересмотрен, модификация исходного метода была еще хуже, можно сказать, это был кошмар, длинные файлы CSS, запутанное разделение функций, имена классов, значения цветов и т. д. В конце концов, я могу только стиснуть зубы и постепенно изменить его. Именно в тот момент я понял значение фреймворков и важность интерфейсных инструментов. Я сделал вывод из своей работы,Либо вы можете использовать определенный фреймворк, либо реализовать фреймворк самостоятельно..
Сравнение интерфейсных фреймворков
目前市面上前端框架主要分重量级与轻量级。重量级主要有 Bootstrap、Semantic、UIkit、Foundation 等，轻量级有 Pure、Skeleton、Miligram 等。经常关注前端动态的工程师会发现轻量级框架每年都层出不穷。在我上面提到的主流轻量级框架之外还有很多类似的框架。我一直问自己，为什么要重复造轮子。经过研究，我发现这些轻量级框架其实大多都不能胜任工作需求，而且模仿的痕迹很重，基本上都或多或少的有 Bootstrap 的影子。那么这些轻量级框架有没有意义呢？ Конечно.但是就我个人观点，选择轻量级框架反倒不如自己实现一个框架。因为大多轻量级框架就像是工作总结，是根据自己的业务需求实现的。所以大多不具有通用性。
Сравнение интерфейсных фреймворков в основном основано на Bootstrap, Semantic и UIkit, потому что лично я считаю, что эти три являются наиболее репрезентативными, и их стили дизайна имеют свои особенности. Foundation также используется многими крупными компаниями, но, по моему личному мнению, и простота использования, и стиль оформления фреймворка немного уступают другим фреймворкам.
Среди них Bootstrap и Semantic — лучшее воплощение объектно-ориентированного подхода.
Позвольте мне сначала рассказать о преимуществах Bootstrap, не о стиле дизайна, не о модулях, не о спецэффектах, а о сетках, адаптивных сетках. Сетка Bootstrap имеет абсолютное преимущество по сравнению с другими фреймворками, будь то разделение сетки или стиль имени класса, это классика. Если читатели взглянут на исходные файлы Bootstrap Less, они почувствуют изобретательность Bootstrap в создании адаптивных сеток. На самом деле до Bootstrap было много схем сетки, но это дает людям ощущение, что он недостаточно аккуратен, а имена классов громоздки и трудно запоминаются. Многие более поздние фреймворки, особенно легкие фреймворки, в основном имеют тень Bootstrap.
Давайте посмотрим на стратегию именования классов, сравнив сетки и кнопки нескольких фреймворков.
Bootstrap
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
<button class="btn btn-primary" type="submit">Button</button>Semantic
<div class="ui grid">
<div class="ten wide column"></div>
<div class="six wide column"></div>
</div>
<button class="ui primary basic button">Primary</button>Foundation
<div class="row">
<div class="small-3 columns"></div>
<div class="small-9 columns"></div>
</div>
<button type="button" class="primary button">Primary</button>UIkit
<div class="uk-grid">
<div class="uk-width-1-2"></div>
<div class="uk-width-1-2"></div>
</div>
<button class="uk-button uk-button-primary" type="button">Primary</button>Pure
<div class="pure-g">
<div class="pure-u-1-2"></div>
<div class="pure-u-1-2"></div>
</div>
<button class="pure-button pure-button-primary">A Primary Button</button>Благодаря приведенному выше сравнению вы должны были обнаружить различия в стратегиях именования этих фреймворков. Нельзя отрицать, что Bootstrap имеет самое классическое наименование.
Я видел, как кто-то обсуждал в Интернете простоту использования фреймворка. Некоторые люди говорили, что имя класса Bootstrap слишком длинное. Однако при сравнении вышеупомянутых фреймворков класс Bootstrap не громоздкий, а произойдет при написании фреймворка с препроцессором, более гибким.
Имя класса Semantic является самым простым, и это правда, что оно верно благодаря множеству атрибутивных модификаций. Но слишком сильно модифицированный класс будет слегка запутанным при написании фрейма, это мастерство, зависит от людей.
Сетка Foundation должна быть самой богатой, похожей на Bootstrap по стратегии, но разделяет общедоступные свойства, вы также можете взглянуть на конкретные детали.
UIkit и Pure используют одинаковую стратегию, добавляя префиксы, чтобы отличить их от других фреймворков, но, очевидно, имена классов слишком многословны. Я тоже думал об этом, когда писал фреймворк, но в итоге отказался от этого.
О препроцессорах CSS
В препроцессорах CSS нет ничего нового, но сколько людей на самом деле используют их на работе? Сколько людей владеют функциями препроцессора?
Я не использовал препроцессоры, когда работал раньше, потому что я этого не делал, поэтому я не понимал преимуществ препроцессоров. В основном я нахожу это хлопотным, потому что не так удобно писать CSS напрямую, чтобы компилировать его с помощью компилятора. Но преимущества препроцессоров были реализованы во время сопровождения проекта. Позже попробовал препроцессор в нескольких проектах, но с модульностью было не очень понятно. В качестве инструмента препроцессор может реализовывать модульное написание CSS, так как же должны быть разделены модули? Кроме того, у препроцессора есть много возможностей, но большинство людей поначалу используют только переменные и вложенность, а остальные возможности используются редко. Я считаю, что в процессе самостоятельной реализации облегченного фреймворка мы сможем получить всестороннее представление о препроцессоре.
В настоящее время существует три популярных препроцессора: Less, Sass и Stylus, какой из них вы выберете, полностью зависит от ваших собственных привычек. Сначала я выучил Less из-за Bootstrap, но выбрал Sass из-за своей привычки, а во-вторых, у Sass более широкие функции.
Независимо от того, работаете ли вы или пишете свои собственные проекты, вы должны создать среду проекта, то есть установить ряд пакетов npm. По сравнению с методом последовательной разработки, процесс предварительной подготовки для разработки инструментов немного сложнее, но как только среда будет установлена, последующая разработка будет проще.
Miligram, легкий фреймворк, очень популярен на Github, но, честно говоря, он не очень полезен. Тем не менее, то, как построена структура, стоит изучить. Хотя CSS для многих прост, написать фреймворк по-прежнему очень сложно, поэтому вам нужно учиться у некоторых отличных фреймворков.
npm, используемый для написания фреймворка, выглядит примерно так:
--autoprefixer
--node-sass
--npm-run-all
--rimraf
--onchangeНа самом деле, самое главное — это node-sass, а остальные — вспомогательная генерация и модификация CSS-файлов.Если вам интересно, вы можете зайти на официальный сайт npm и поискать эти плагины, чтобы понять конкретное использование.
Написание облегченных фреймворков
Наконец, основная мысль этой статьи достигнута.
Чтобы кратко представить, я назвал структуру, которую я написал Snack, первоначальное значение слова «фаст-фуд», в основном выражающее значение простоты. Несмотря на то, что это легкий фреймворк, я не хочу использовать легкий вес в качестве уловки, ведь легкий вес означает отсутствие и упущение определенных функций. Смысл этого фреймворка больше в общении и обучении.Я стараюсь учиться на превосходстве других фреймворков, максимально упрощаю имена классов и пытаюсь изучить некоторые более общие компоненты.
Большинство облегченных фреймворков — это просто фреймворки CSS, не включающие JS-часть, и в основном используются для верстки веб-страниц. Причина, по которой я планирую написать свой собственный фреймворк, заключается в том, что в работе слишком много повторяющихся вещей, и фреймворк может очень хорошо интегрировать эти разрозненные компоненты. С другой стороны, написание небольшого проекта для изучения чего-то нового — это весело.
Написание фреймворка было чем-то, что я хотел сделать в прошлом году, но это заняло много времени из-за времени. В начале написания фреймворка я впал в недоразумение, я планировал спроектировать еще какие-то авангардные стили, типа трехмерных кнопок, плавающих панелей и т.д., типа стиля на картинке ниже.
Но Япония приняла .com/shots/52459…
Но в процессе написания фреймворка с перерывами я постепенно нашел направление.Стиль на картинке выше это всего лишь скин, и не стоит делать акцент на нем в начале написания фреймворка. Конечно, хороший дизайн пользовательского интерфейса также является частью успеха фреймворка.
Модульное деление
Первым шагом в написании фреймворка является определение того, какие модули он должен содержать. Поскольку это облегченная структура, модуль определенно не такой всеобъемлющий, как утяжеленная структура, только некоторые основные компоненты. При сравнении некоторых облегченных фреймворков и рабочих сводок наиболее часто используемые модули включают сетки, мультимедиа, кнопки, типографику, формы, таблицы, панели и вспомогательные инструменты.
Среди часто используемых компонентов нужно сосредоточиться на сетках, формах и панелях.Медиа-компоненты также очень важны, но здесь не так много места для свободы.Я напрямую использовал медиа-компоненты Bootstrap.
стратегия именования
Во-первых, это иерархия и структура именования классов. Именование классов всегда было для меня запутанной областью, когда я только начинал работать, я всегда ломал голову в поисках знакомого и лаконичного названия класса. Я стараюсь избегать перекрытия имен классов Bootstrap при написании фреймворков, но не полностью. Сравнивая с другими фреймворками, обнаружится, что такая ситуация будет неизбежной, ведь имена классов будут иметь определенную регулярность и иерархию. На данный момент я предпочитаю стиль Bootstrap. Ниже приведено сравнение с формой Bootstrap.
Структура формы Bootstrap и имя класса
--div.form-horizontal
--div.form-group
--label.control-label
--input.form-controlСтруктура формы Snack и имя класса
--div.form-horizontal
--div.form-group
--label.control-label
--input.form-controlСтруктура формы в целом хороша, но некоторые части нуждаются в доработке. Некоторые рамки не даютinputВместо того, чтобы давать имя класса родительскому элементу, я лично сомневаюсь в этой практике: отсутствие имени класса снизит гибкость написания и использования фреймворка.
Вторая стратегия — декорирование компонентов.Например, кнопки и панели имеют несколько контекстов (цвет, размер и т. д.) На этом этапе я сделал некоторые упрощения при написании фреймворка, и стиль несколько семантический.
<button class="btn primary">primary</button>
<table class="table bordered striped">...</table>
<div class="boxes primary">...</div>Стратегия модификации классов — это вопрос благожелательного мнения, а что касается того, какой метод лучше, то это еще надо исследовать в процессе написания фреймворка.
система сетки
Демонстрационный пример:nzbin.github.io/snack/#grid
Любой кадр должен быть основан на сетке для гибкой компоновки. Ранее я упоминал, что сущностью Bootstrap является система сетки. При написании системы сетки необходимо использовать функцию цикла препроцессора, иначе это будет ненужная повторяющаяся работа. Я сталкивался с некоторыми облегченными фреймворками, написанными на Less, и их сеточная система не использует циклы. Такой исходный код немного резковат. Возможно, автор не знаком с функцией цикла Less. Конечно, цикл Less сам по себе относительно слаб.Его немного неудобно использовать. По поводу цикла препроцессора можете обратиться к моему предыдущему переводуэта статья, в котором более подробно сравниваются возможности циклов трех популярных препроцессоров. Кратко, Меньше Циклов нет, но их можно реализовать рекурсивно, в то время как в Sass и Stylus есть настоящие циклы.
Система сеток, которую я написал, также имеет 12 столбцов по умолчанию, но позже обнаружил, что в сетке с 12 столбцами отсутствует наиболее часто используемая ширина столбцов (например, 10%, 20%, 30% и т. д.) Например, показанный пример от CodePen ниже использует сетку из 12 колонок. Этого нельзя было сделать, поэтому я добавил еще один растр из 10 колонок, но он по-прежнему не мог охватить все, но он был гибким.
See the Pen snack-gridНажмите, чтобы просмотреть
Использование сеток такое же, как в Bootstrap, за исключением сеток с 12 столбцами, необходимо добавить сетки с 10 столбцами и равномерно разделенные сетки..cols-Добрый
<!-- 默认 12 列栅格，所以省略 cols-12 -->
<div class="row">
<div class="col-5"></div>
<div class="col-7"></div>
</div>
<!-- 10 列栅格 -->
<div class="row cols-10">
<div class="col-3"></div>
<div class="col-7"></div>
</div> Эта сетка не отвечает, есть только одна точка останова, и все сетки будут отображаться в одной строке на маленьком экране телефона. С одной стороны, этот дизайн соответствует первоначальному замыслу большинства легковесных фреймворков, с другой стороны, я планирую написать еще один фреймворк для мобильной стороны, ведь стили веб-стороны и мобильной стороны вполне разные, и было бы лучше разделить их в соответствии с потребностями бизнеса. Но недавно я изменил исходный файл, чтобы зарезервировать метод расширения для отзывчивости.
форма
Демонстрационный пример:На юг до Bin.GitHub.IO/snack/#form…
Основная структура формы закуски отображается в стратегии названия выше, а основная форма не очень обсуждается в стиле, за исключением структуры. Скажи здесь в формеcheckboxструктурная корректировка, первый взгляд на Bootstrapcheckboxструктура.
<!-- checkbox -->
<div class="checkbox">
<label>
<input type="checkbox" value=""> checkbox
</label>
</div>
<!-- checkbox-inline -->
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> checkbox
</label>Вышеуказанные две структуры не могут быть отклонены.Если есть небольшое отклонение, стиль будет спутан, а гибкость будет плохой. Во-вторых, мне было интересно, можно ли объединить эти две структуры для повышения гибкости. После долгих размышлений я нашел метод.Структура Snack выглядит следующим образом:
<!-- checkbox -->
<div class="checkbox">
<label>
<input type="checkbox" value=""> checkbox
</label>
</div>
<!-- checkbox-inline -->
<div class="checkbox inline">
<label>
<input type="checkbox" value=""> checkbox
</label>
</div>Вы также можете добавлять стили непосредственно вlabelна этикетке. Кроме того, еслиinputперейти кlabelНе по прямому назначению это не проблема, а именно:
<!-- checkbox -->
<div class="checkbox">
<input type="checkbox" id="checkbox1" value="">
<label for="checkbox1">checkbox</label>
</div>
<!-- checkbox-inline -->
<div class="checkbox inline">
<input type="checkbox" id="inlineCheckbox1" value="">
<label for="inlineCheckbox1">checkbox</label>
</div>Преимущество этой структуры в том, что ее можно настроитьinputстиль, подробности см. в CodePen ниже.scssдокумент.radioнастройки иcheckBoxэто то же самое.
See the Pen snack-formsНажмите, чтобы просмотреть
Вспомогательный класс
Вспомогательный класс представляет собой комбинацию ряда классов, таких как размер шрифта, значение цвета, отступы, поля и левое и правое плавание. Это особенно распространено в некоторых системах управления фоном, созданных с помощью Bootstrap, поэтому макет будет более гибким. Ниже приведен вспомогательный класс для границы.
.border-left-right {
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}
.border-top-bottom {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.border-left {
border-left: 1px solid #eee;
}
.border-right {
border-right: 1px solid #eee;
}
.border-top {
border-top: 1px solid #eee;
}
.border-bottom {
border-bottom: 1px solid #eee;
}Подробнее о вспомогательных классах читайте в этой статье "Как написать общий вспомогательный класс》
коробка в сборе
Демонстрационный пример:Nanzhibin.GitHub.IO/snack/#Сеет зло…
Блочный компонент — один из самых приятных модулей во всей моей структуре. Основная причина создания этого компонента заключается в том, что компонент списка Bootstrap и компонент панели могут быть интегрированы. Конечно, у такого подхода есть плюсы и минусы. Компонент коробки особенно заметен в макете системы управления фоном. Его имена также разнообразны, например, панель, виджет, портлет, ibox, карта и т. д. Каждая структура системы управления фоном будет выполнять углубленную разработку этого компонента, что показывает его важность в макете. Также важно дать компоненту правильное имя класса.После долгих размышлений я, наконец, использовал его.boxИмя класса, конечно, вообще стараются не использоватьbox, потому что имя класса является более общим. Следующий CodePen имитирует компоненты списка и панели Bootstrap.
See the Pen snack-boxesНажмите, чтобы просмотреть
тема
Добавление темы к рамке — забавная вещь. Тема Snack по умолчанию белая, потому что мне нравится черный, и, наконец, добавлена темная ночная тема.Чтобы написать тему, вам нужно только изменить цвет компонентов.демонстрационный документНа странице пользователя используется тема темной ночи. Нажмите красную кнопку выше, чтобы переключить тему.
Суммировать
Если меня спросят, какой фреймворк лучше, я без колебаний выберу Bootstrap. В работе можно выбрать фреймворк по сложности потребностей, если бизнес относительно тяжелый, то лучше всего вести вторичную разработку по Bootstrap, в противном случае можно выбрать какой-нибудь облегченный фреймворк, и лучше всего строить колеса в соответствии с вашими потребностями. Для меня было бы честью выбрать или одолжить мой каркас.