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

Question

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

Я. Ненавидеть.CSS.

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

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

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

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

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

Answer 1

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

Answer 2

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

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

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

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

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

Answer 3

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

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

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

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

Answer 9

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

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

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

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

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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

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

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

Answer 15

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

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

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

Answer 16

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

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

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

Answer 17

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

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

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

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

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

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

Answer 18

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

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

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

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