Абстракция от CSS

Question

Позвольте мне кое-что прояснить.

I. Ненависть . CSS.

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

.. Короче говоря, это боль. ПИТА, если хотите.

Многие фреймворки стремятся абстрагироваться от HTML (пользовательские теги, система компонентов JSFs), чтобы упростить работу с этим конкретным аквариумом.

Есть ли что-то, что вы, ребята, использовали, у которой аналогичная концепция применяется к CSS? Что-то, что делает для вас кучу кросс-браузерной магии, поддерживает подобные переменные (почему я должен набирать # 3c5c8d каждый раз, когда мне нужен этот цвет), поддерживает вычисляемые поля (которые «компилируются» в CSS и JS) и т. Д.

Или я правильно об этом думаю? Я пытаюсь протолкнуть очень квадратный блок через очень круглое отверстие?

Answer 1

Лучшее, что я нашел, - это действительно изучить CSS. Я имею в виду действительно изучать CSS.

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

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

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

Все, что для этого нужно - это практиковаться, и со временем вы сможете стать хорошим в этом.

Answer 2

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

Я, конечно, с тобой, хотя. Хотя я бы считал себя маленьким экспертом по CSS, я думаю, было бы неплохо, если бы были такие инструменты для CSS, как в Javascript (Prototype, JQuery и т. Д.). Вы сообщаете инструменту, что вы хотите, и он обрабатывает несоответствия браузера за кулисами. Это было бы идеально, метинкс.

Answer 3

Вы всегда можете использовать движок шаблонов для добавления переменных и полей в ваши CSS-файлы.

Answer 4

Это уточняет мой предыдущий ответ.

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

Например, вместо этого:

a { color: red }
.entry { color: red }
h1 { color: red }

Вы можете сделать:

a, .entry, h1 { color: red }

Вы можете сохранить объявленный цвет в одном месте, выполнив это.

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

Answer 5

Извините, что говорю, ребята, но вы все упустили из виду.

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

Что если, по незнанию, вы выбрали имена классов, которые совпадают с именами Салли? Видите ли, вы не можете «скрыть» (абстрагировать) детали, когда работаете в CSS. Вот почему вы не можете исправить ошибку в IE, а затем создать автономное решение, которое другие могут использовать как есть, подобно тому, как вы называете процедуры на языке программирования, заботясь только о предварительных и постусловиях и не думая о как это работает внутри. Вы просто думаете о , чего вы хотите достичь.

Это самая большая проблема в сети: в ней полностью отсутствуют механизмы абстракции! Большинство из вас воскликнет: «В этом нет необходимости, ты прекратишь курить крэк!»

Вместо этого вы будете делать, скажем, исправление ошибок компоновки или делать закругленные углы или обсуждать «лучшую» разметку для того или иного случая снова и снова. Вы найдете сайт, который объясняет решение, затем скопируйте и вставьте ответ, затем адаптируйте его к вашему конкретному случаю, даже не задумываясь, что вы, черт возьми, делаете! Да, это то, что вы будете делать.

Конец напыщенной речи.

Answer 6

Затем возникает проблема с несколькими браузерами

Существует это , которое помогает удалить некоторые несоответствия из IE. Вы также можете использовать jQuery для добавления некоторых селекторов через javascript.

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

Answer 7

Видите, это проблема с SO - каждый ответ до сих пор подчеркивал правильность и должен рассматриваться как окончательный ответ. Позвольте мне попытаться подвести итог:

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

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

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

Answer 8

Для CSS-фреймворков вы можете рассмотреть YUI Grids . Это делает базовый макет намного быстрее и проще, хотя используется в необработанном виде и компромисс с семантикой.

Answer 9

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

Я получаю это только при попытке заставить вещи работать в IE.

Если вы изучите CSS до такой степени, что сможете кодировать большинство вещей без необходимости искать ссылку (если вы все еще регулярно просматриваете ссылку, вы на самом деле этого не знаете и не можете претендовать на жалобу, я думаю) и затем разработать для Firefox / Safari, это довольно хорошее место, чтобы быть в.

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

Answer 10

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

<?
header('content-type:text/css');
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT"); 

$someColorVar = "#cc0000";
?>
BODY {
      background-color: <?= someColorVar ?>;
     }