Какая лучшая CSS-платформа и стоит ли усилий?

Ответ 1

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

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

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

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

Ответ 2

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

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

К сожалению, есть два недостатка в использовании рамки (в общем):

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

• Рамки не являются оправданием того, что вы не обращаете внимания на перекрестные браузеры/продвинутые проблемы CSS. Вы обязательно столкнетесь с ними, так же, как вы будете работать с фреймворком PHP или JavaScript. И вам нужно знать, как с ними бороться. Существует общая поговорка, что сначала вы должны написать свою собственную структуру, прежде чем использовать чужую.

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

Ответ 3

Я посмотрел на BluePrint и несколько других, и единственная CSS-структура, которую я бы рекомендовал, - YUI Grids

Плюсы:

• Написано одной из лучших инженеров-фронтонов (IMO) (Nate Koechley)
• Очень маленький. 4KB
• Очень гибкий (1000 различных макетов)
• Поддерживает макеты ширины (100%), а также предустановленные макеты фиксированной ширины при 750px, 950px и 974px и возможность легко настраивать любое число.
• Поддерживает легкую настройку ширины для макетов с фиксированной шириной.
• Столбцы шаблонов независимы от исходного кода, поэтому вы можете сначала разместить свой самый важный контент на уровне разметки для улучшения доступности и оптимизации поисковой системы (SEO).
• Верхний колонтитул самоочистки. Независимо от того, какой столбец длиннее, нижний колонтитул остается внизу.
• Макеты менее 100% автоматически центрируются.
• Несколько семантических названий классов (лучше, чем верхний, левый, правый и т.д.)

Минусы:

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

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

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

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

• Если вы находитесь под давлением вовремя.

• Если вы не знаете css и не делаете знайте кого-то, кто может написать его для вы.

• Если вы не слишком дорогой стандарты и т.д.

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

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

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

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

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

Ответ 7

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

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

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

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

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

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

Ответ 8

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

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

Ответ 9

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

Ответ 10

Компас Я думаю, это потрясающе. Убедитесь, что вы видите screencast.

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

Ответ 11

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

Ответ 12

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

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

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

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

Ответ 13

У Matt Raible из AppFuse славы был конкурс CSS Framework некоторое время назад, чтобы разработать CSS Framework для AppFuse. Результаты опубликованы здесь. Есть несколько вариантов, и я сам использовал их, потому что я использую AppFuse и считаю их очень хорошими.

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

Ответ 14

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

Ответ 15

Хорошая ссылка Я нашел: Топ-12 рамок CSS и как их понять

Ответ 16

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

Ответ 17

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

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

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

Ответ 18

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

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

Ответ 19

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

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

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

Ответ 20

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

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

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

Ответ 21

Craig,

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

Матф

Ответ 22

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

Ответ 23

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