Какой CSS-фреймворк самый лучший и стоят ли они затраченных усилий?

https://stackoverflow.com/questions/203069

03-07-2019
|

Вопрос

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

Решение

CSS-"фреймворки" полностью упускают суть.

CSS не похож на JavaScript, где вы можете включить базовую библиотеку / фреймворк, а затем вызывать из него функции и объекты для выполнения работы более высокого уровня.Все, что может дать вам CSS-фреймворк, - это декларативные правила:некоторые вещи для сброса правил браузера по умолчанию, некоторые стили классов, которые необходимо принудительно использовать для создания вашей страницы, и правила компоновки с использованием 'float' и 'clear'.Вы можете написать это в нескольких строках CSS самостоятельно, вместо того чтобы раздувать сотню правил фреймворка.

В частности, "макет сетки" восходит к старым плохим временам смешивания вашей презентации с вашей разметкой.'div class="span-24"' ничем не лучше таблицы, вам придется вернуться туда и изменить разметку, чтобы повлиять на макет.И все фреймворки, которые я видел, основаны на плавающих блоках с фиксированными пикселями, что делает невозможным создание гибкого макета, доступного в широком диапазоне размеров окон.

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

Другие советы

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

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

К сожалению, у использования фреймворка (в целом) есть два недостатка:

Фреймворк диктует общую структуру и механику вашего CSS-кода.Теперь я не говорю о сбросе CSS (они полезны сами по себе, но они не являются настоящими фреймворками).;Я говорю о честном и хорошем фреймворке, который уже принял решения о том, какие семантические теги вы собираетесь использовать в своем документе и т.д.Таким образом, вы становитесь зависимыми от фреймворка, и когда в фреймворке возникает ошибка, вам чаще всего приходится исправлять ее самостоятельно.
Фреймворки не являются оправданием для того, чтобы не обращать внимания на проблемы с кроссбраузерностью / расширенным CSS.Вы неизменно столкнетесь с ними, точно так же, как при работе с фреймворком PHP или JavaScript.И вам нужно знать, как с ними бороться.Существует распространенная поговорка, что вы должны сначала написать свой собственный фреймворк, прежде чем использовать чужой.

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

Я просмотрел BluePrint и несколько других, и единственный CSS-фреймворк, который я бы порекомендовал, это Сетки ЮИ

Плюсы:

Автор: один из лучших инженеров по интерфейсу (IMO) (Нейт Кечли).
Очень маленький.4 КБ
Очень гибкий (1000 различных макетов)
Поддерживает макеты с плавной шириной (100%), а также предустановленные макеты с фиксированной шириной в 750px, 950px и 974px, а также возможность простой настройки на любое количество пикселей.
Поддерживает простую настройку ширины для макетов фиксированной ширины.
Столбцы шаблона не зависят от порядка расположения источников, поэтому вы можете поместить наиболее важный контент первым на уровне разметки для улучшения доступности и поисковой оптимизации (SEO).
Самоочищающийся нижний колонтитул.Независимо от того, какой столбец длиннее, нижний колонтитул остается внизу.
Макеты размером менее 100% автоматически центрируются.
Несколько семантических имен классов (лучше, чем top, left, right и т.д.)

Минусы:

Много дополнительной разметки по сравнению с рукописными HTML и CSS
Требуется некоторое обучение, чтобы понять, как создавать сложные макеты

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

Компас это настоящий CSS фреймворк в том смысле, что он предоставляет вам не только шаблоны (как YUI, так и blueprint), но также повторно используемые конструкции и высокоуровневые объявления, сохраняя при этом знакомый синтаксис CSS.

Потратьте время на изучение и понимание (действительно понимание!) нескольких css-фреймворков, таких как BluePrint и YUI, а также на сброс css, как у Эрика Мейера.Затем найдите время, чтобы создать свой собственный reset и / или фреймворк, основанный на ваших методах работы и типе сайтов, которые вы создаете.

Лично я использую большую часть Eric Meyer reset с некоторыми собственными классами и сбросами, плюс несколько идей из BluePrint и YUI.

Недавно я наблюдал, как Эрик Мейер выступал с презентацией о CSS-фреймворках, в которой он задал вопрос:"итак, какой из них подходит мне?" Затем он ответил на вопрос, показав пустой слайд.Его точка зрения заключалась в том, что, безусловно, в большинство перезагрузок и фреймворков встроены некоторые полезные концепции, но та, которая подойдет вам лучше всего, - это та, которую вы пишете для себя (это стоит затраченных усилий).

Зачем использовать css-фреймворки?

Если у вас мало времени.
Если вы не знаете css и не знаете кого-то, кто может написать это за вас.
Если вы не слишком дорожите стандартами и т.д.

Я знаю программистов, которые были действительно счастливы использовать blueprint или 960, поскольку это позволяет им создавать макет самостоятельно, не обращаясь к интерфейсному разработчику.Это идеально подходит для личных проектов или стартапов с ограниченными ресурсами.

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

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

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

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

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

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

Совет №17 в Прагматичный Программист говорит:"Программа, близкая к проблемной области".Использование уровня абстракции может приблизить вас к решению реальных проблем верстки.Например:возможно, вы сможете сосредоточиться на улучшении пользовательского опыта за счет дополнительного времени, которое у вас есть, а не на незначительной настройке пикселей.

Это не значит, что вы должны жертвовать качеством ради количества.Все дело в эффективности.

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

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

На самом деле я потратил добрую часть последних 24 часов, расследуя это самостоятельно, хех.Мой вывод состоял в том, что хороший сброс (я использовал Сброс YUI), и, возможно, что-то еще для настройки базового уровня (Шрифты YUI в моем случае это было полезно;может быть, "дополнительные вкусности" BluePrint найдутся в вашем) - хорошая идея.Но, "фреймворк" --- который обычно представляет собой что-то вроде Сетки ЮИ---является слишком ограничительным, заставляя вас использовать их имена классов, идентификаторы и т.д.и редко вписывается в ваш сайт так, как это сделал бы CSS, созданный вручную.

Итак, вкратце:перезагрузки кажутся довольно приятными;хорошо бы исключить все вариации, например, вmargin-vs-padding для списков, или интервал между абзацами, или что-то еще.Но это все, что я мог бы предположить.

да, я им не пользовался, но я думаю истощенный возможно, это хорошая альтернатива, которую стоит проверить.он похож на blueprint по области видимости, но также поддерживает эластичные макеты (отсюда и название), и вы можете указывать значения в px, em или % и даже смешивать их.

Компас, по-моему, потрясающий.Убедитесь, что вы видите скринкаст.

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

Я думаю, что эта видеопрезентация генеральный директор Site Point Кевин Янк ответит на ваш вопрос.Я действительно рекомендую посмотреть его.

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

Я поражен так называемыми "экспертами по CSS", которые критикуют эти инструменты, на самом деле не вникая в них и не используя.Необходимы ли они?Нет.Если вам нравится ваш собственный фреймворк (у вас ведь есть свой собственный, не так ли?CSS-фреймворк - это просто тщательно определенная библиотека (каждый должен использовать ее), тогда, во что бы то ни стало, продолжайте ее использовать.Никто не заставляет вас использовать другие фреймворки, и я не вижу людей, которые используют фреймворки, говорящих пуристам CSS, что они "делают это неправильно".

Критика фреймворков с такой точки зрения просто выявляет незащищенность, а также невежество.Например, смехотворно думать, что человек будет использовать такой инструмент, как Compass, не зная CSS.Вы ведь понимаете, верно, что фреймворк обычно не пишет весь ваш CSS за вас?Вы все еще можете вырваться и написать свой собственный CSS в контексте большинства фреймворков.На самом деле, если вы не знаете CSS, вы можете быстро разочароваться.

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

Мэтт Райбл из AppFuse fame некоторое время назад провел конкурс CSS Framework на разработку CSS-фреймворков для AppFuse.Результаты опубликованы здесь.Есть несколько вариантов, и я использовал некоторые сам, потому что я использую AppFuse и нахожу их очень хорошими.

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

Я с большим успехом использовал BluePrint на сайте (я мог бы упомянуть сайт здесь, но я уверен, что сообщение было бы помечено как спам!).Я не уверен, буду ли я использовать его в будущем, хотя, потому что одна из идей CSS, на мой взгляд, заключалась в том, чтобы не иметь жестко закодированной логики верстки.У вас не должно быть css-элементов с именами span-24 и span-12 для определения макета, но что-то вроде SearchBox и MainContent.По крайней мере, я так это себе представляю.

Хорошая ссылка, которую я нашел : Топ-12 CSS-фреймворков и как их понять

Вот мой пост в блоге о CSS фреймворках Когда использовать CSS framework?

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

Я считаю, что грамотное использование Compass миксинов Sass в Compass является блестящим и большим шагом на пути к Святому Граалю поддерживаемой семантической разметки.Я не думаю, что хотел бы использовать фреймворк, такой как Blueprint или YUI, без абстракции, такой как Compass, чтобы исключить классы представления из разметки.

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

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

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

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

Это определенно отстой - добавлять код презентации в вашу разметку, хотя, с другой стороны, он удобочитаем.Хотя мне нравится концепция "вы можете переделать дизайн, не касаясь разметки", если вы создаете сайт, где этого на самом деле все равно не произойдет, и вам просто нужно было сделать это вчера, Blueprint - это то, на что стоит обратить внимание.

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

Я использовал BluePrint и YUI, но меня всегда расстраивают некоторые имена, которые они дают своим идентификаторам и классам.

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

Обязательно используйте хорошее соглашение об именовании, на случай, если кто-то другой в будущем придет редактировать css, тогда у него будет хорошее представление о том, к чему относится название каждого стиля.

Крейг,

Компас - это то, что вы ищете:это позволяет вам переименовывать ваши CSS-классы Blueprint, например "span-24", вашими собственными именами.Это также расширяет функциональность CSS с помощью переменных и миксинов.Действительно, те, кто преждевременно судит о фреймворках, не проверив Compass, "упускают суть". Это похоже на тех людей, которые много лет назад говорили нам, что мы упускаем главное, используя CSS вместо HTML-таблиц для наших макетов.

-Мэтт

проверьте http://www.ez-css.org/.один из самых простых и легковесных css-фреймворков для работы.:)

Взгляните на эту демонстрацию:http://www.richstyle.org/demo-web.php Этот фреймворк основан на идее, что "HTML-тегов должно быть достаточно".Я думаю, что повторное использование является наиболее важным фактором при выборе программного компонента, включая веб-фреймворк.Для разработчиков веб-фреймворков, чем больше вы придерживаетесь стандартов, тем больше вы гарантируете повторное использование.

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow