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

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

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

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

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

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

You can always use a template engine to add variables and calculated fields to your CSS files.

Then comes the multiple browser issue

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

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

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

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

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

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

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

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

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

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

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

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

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

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

a, .entry, h1 { color: red }

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

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

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

Solutions to problems seem to often involve jiggering numbers around like some chef trying to work out exactly how much nutmeg to put in his soon-to-be famous rice pudding

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

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

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

Также ознакомьтесь с ЧертежCSS, фреймворком макета в CSS. Он решает не все ваши проблемы, а многие, и вам не нужно писать CSS самостоятельно.

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

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

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

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

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

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

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

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

I. Hate. Java. Is there something out there that will just write it for me? Not everyone has the time to master Java.

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

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

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

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

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

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

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

Конец разглагольствования.

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

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

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

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

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

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

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

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

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

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