Абстрагирование от CSS

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

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

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

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

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

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

Но я, конечно же, с вами. Хотя я бы считал себя мелким специалистом по CSS, я думаю, что было бы неплохо, если бы были инструменты для CSS, как есть с Javascript (прототип, JQuery и т. д.). Вы говорите инструменту, что вы хотите, и он обрабатывает несоответствия браузера behind-the-scenes. По-моему, это было бы идеально.

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

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

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

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

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

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

a, .entry, h1 { color: red }

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

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

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

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

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

Это самая большая проблема с интернетом: он полностью лишен механизмов абстракции! Большинство из вас воскликнет: "It's unnecessary; you stop smoking crack!"

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

Конец этой тираде.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот вам хумерорская статья на эту тему, но и информационная: Специфика Войн

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

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

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

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

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

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

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

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

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

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

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

Я обнаружил, что полезно "выровнять почву" при написании сценариев с CSS. Вероятно, есть множество различных вариантов сценария сброса, но использование YUI resets помогло мне уменьшить количество причуд, с которыми я иначе столкнулся бы, а YUI grids иногда немного облегчает жизнь.

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

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

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

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