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

Ответ 1

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

Ответ 2

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

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

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

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

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

a, .entry, h1 { color: red }

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

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

Ответ 5

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

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

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

Это самая большая проблема с сетью: у нее полностью отсутствуют механизмы абстракции! Большинство из вас воскликнет: "Это не нужно, вы перестаете курить!"

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

Конец разговора.

Ответ 6

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

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

Я согласен с Dan, узнаю его, и это не столько проблема, даже удовольствие.

Ответ 7

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

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

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

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

Ответ 8

Для поддержки переменных я использовал 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 ?>;
     }

Ответ 9

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

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

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

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

Ответ 10

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

Ответ 11

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

Ответ 12

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

Ответ 13

Также проверьте BlueprintCSS, структуру макета в CSS. Он не решает всех ваших проблем, но многие, и вам не нужно писать CSS самостоятельно.

Ответ 14

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

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

Здесь представлена ​​статья на эту тему, но также информационная: Войны спецификаций

Ответ 15

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

Возможно создание слоя абстракции между совместимым/допустимым CSS-кодом и неудачными реализациями браузеров не будет плохой. Но если такая вещь была создана - нужно ли ее использовать JS (или jQuery)? (и это создало бы неоправданную нагрузку с точки зрения стоимости обработки?)

Я обнаружил, что полезно "выравнивать землю" при написании сценариев с помощью CSS. Есть, вероятно, множество разных вкусов reset script, но с помощью сброса YUI помогло мне уменьшить количество причуд, с которыми я когда-либо сталкивался, - и сетки YUI иногда делают жизнь немного легче.

Ответ 16

@SCdF: Я думаю, что ваше резюме здесь справедливо. Но аргумент о том, что у некоторых людей нет времени изучать CSS, является фиктивным - подумайте о нем на секунду. Замените технологию, которую вы освоили, и вы поймете, почему:

я. Ненавидеть. Ява. Есть ли что-то там, которое просто напишет это для меня? Не у всех есть время освоить Java.

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

Ответ 17

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

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

Ive писал CSS прочно более 10 лет, и я пришел к выводу, что, хотя язык является мощным и эффективным, внедрение CSS отстой. Поэтому я использую слой абстракции, например Sass или Less или xCSS для интерфейса с языком. Эти инструменты используют синтаксис, аналогичный CSS, поэтому вы решаете проблему в проблемной области. Используя что-то вроде PHP для написания CSS, но это не лучший подход.

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

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

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

Ответ 18

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

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

• Каскад и наследование
• Модель коробки
• Способы компоновки, включая поплавки и новый flexbox
• Позиционирование
• Современные лучшие практики, такие как SMACSS или BEM, чтобы ваши стили были модульными и легкими в обслуживании.

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