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

Question

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

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

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

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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

• Меньше

• SASS

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

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

[EDIT] Вот ссылка, в которой подробно описаны экспериментальные функции 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 для официального объявления спецификации.

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

Answer 3

Существует Стилус , что-то вроде 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: вы все еще можете набирать фигурные скобки и точки с запятой, если хотите,;)

Answer 4

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

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

Answer 5

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

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