Языки стилей, обеспечивающие большую дисциплину, чем CSS? (Но не МЕНЬШЕ и САСС)

Таблицы стилей CSS имеют привычку увеличиваться и хаотично с течением времени.

Существует множество правил, советов и школ мысли, которые помогают достичь более чистого CSS. (Например здесь). Тем не менее, все они требуют постоянной активности, активности и много дисциплины на стороне сопровождающего, со смешанным реальным успехом. Как Николь Салливан так красиво говорит:

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

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

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

Есть ли какие-либо исследования в этой области? Что-нибудь попробовать?

Один очень интересный связанный инструмент CSS Lint, но то, о чем я прошу, идет еще дальше.

Изменить: LESS и SASS абсолютно идут в правильном направлении, но они не то, что я ищу. Они вносят некоторые очень приятные функции и являются находкой для разработчика CSS, но то, о чем я, спрашиваю, идет еще дальше и больше в определенные, принудительные структуры.

Ответ 1

Вы можете легко написать код спагетти на любом интерпретируемом языке, поэтому действительно то, что вы ищете, является компилятором CSS. Это то, что Google GWT делает для JavaScript, генерируя его из кода Java.

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

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

Наконец, каскадная часть - это то, что большинство новых дизайнеров имеют самую высокую тенденцию ошибиться. Если вы уделяете пристальное внимание DOM и каскадной логике, воспользуйтесь некоторыми хорошими сбрасываниями или сетками на основе сетки и включите такие инструменты, как LESS (Ruby) или LessPHP, вы получите CSS, который гораздо удобнее работать. Мне нравится МЕНЬШЕ, потому что он дает вам квази-функции, переменные и вложенные свойства, которые действительно помогают очистить ваш CSS.

Ответ 2

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

Есть два усилия, которые я знаю, чтобы сделать именно это:

Less
SASS

Оба нацелены на предоставление улучшенной версии CSS, которая позволяет писать с большей структурой.

Кроме того, Google продемонстрировала версию Chrome, которая включает в себя ряд дополнений к CSS по аналогичным направлениям. Это интересно, потому что это указывает на будущее направление CSS, но в краткосрочной и среднесрочной перспективе вам нужно будет использовать Less или Sass, так как даже работа в Chrome очень экспериментальна и не будет выпущена в течение некоторого времени (и даже если это так, вам нужно подождать, пока другие браузеры последуют этому примеру).

[РЕДАКТИРОВАТЬ] Здесь ссылка, в которой указаны экспериментальные CSS-функции Google в Chrome: http://johanbrook.com/design/css/webkit-css-variables-mixins-nesting/

[ДОПОЛНЕНО 18 апреля 2012] В этой области был некоторый прогресс, так как я написал этот ответ. Медленный прогресс, но прогресс тем не менее. Хорошей новостью является то, что переменные CSS только что были опубликованы в качестве спецификации первого проекта W3C. См. http://lists.w3.org/Archives/Public/www-style/2012Apr/0228.html для официального объявления спецификации.

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

Ответ 3

Ну, вы, кажется, знаете о Николь Салливан, поэтому, если вы уже знаете об OOCSS, я извиняюсь, но никто, кажется, не поднял ее. Если вы этого не сделаете, это мой собственный проект, чтобы сделать это. Это только в Alpha-тестировании прямо сейчас, но вы спросили об усилиях и не закончили языки, так что, возможно, это будет именно то, что вы ищете. Он определенно утверждает, что должен быть для решения проблем, которые вы описываете, но я не использовал его сам.

https://github.com/stubbornella/oocss/wiki

Ответ 4

Существует Stylus, что-то вроде LESS и SASS, но с прозрачными микшинами.

Это означает, что вы можете скрыть сложность, связав ее с новыми парами ключ/значение. Пример с сайта:

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

form input
  padding 5px
  border 1px solid
  border-radius 5px

Возможно, этот синтаксис - это то, что вам нужно?

PS: вы все равно можете напечатать фигурные скобки и точки с запятой, если хотите;)

Ответ 5

Вы проверили Compass? Компас - это основа, построенная вокруг Сасса. Я думаю, что это в основном добавляет функции и шаблонный код для добавления библиотеки предопределенных mixins и еще чего-то. Однако Compass может быть еще ближе к тому, что вы хотите. Компас основан на Blueprint, который представляет собой прямолинейную CSS-структуру (которая также может стоить к).

Для меня лучший подход - взять Compass и Sass (или CSS, Blueprint/LESS и что-то сравнимое) и написать очень сжатые и подробные инструкции по стилю, которые вы могли бы разработать сверхурочно, когда вы выясните, что лучше всего работает: первые мысли по этому вопросу, независимо от опыта, могут быть ошибочными. Когда у вас есть эти рекомендации, вы можете поговорить с людьми в Sass, Compass, LESS, Blueprint, независимо от того, работаете ли вы в некоторых хорошо продуманных и "исследованных" рекомендациях. Или вы можете начать вносить свой вклад в эти замечательные проекты, которые, я считаю, все под лицензией с открытым исходным кодом (Sass находится в MIT, LESS находится под Apache, и я думаю, Compass и Blueprint также в той или иной форме лицензии с открытым исходным кодом). Вилка и удовольствие: D