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

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

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

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

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

все это занимает практика и со временем вы можете стать хорошим в этом.

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

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

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

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

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

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

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

a, .entry, h1 { color: red }

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

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

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

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

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

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

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

конец тирады.

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

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

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

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

• 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 ?>;
     }

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

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

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

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

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

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

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

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

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

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

вот статья humerours на эту тему, но и информационная: специфичность Войны!--10-->

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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