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

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

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

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

24.08.2008 23:33:25
Прочитав ваш вопрос, я чувствую, что вы не полностью понимаете CSS
Jon Limjap 30.10.2008 03:45:02
Ты совершенно прав. Я не. На самом деле, хотя это было 2 месяца назад, я все еще не знаю. По сути, я хочу, чтобы этот способ не
SCdF 30.10.2008 03:55:58
Я согласен с вами в комментарии о нескольких браузерах, но это не вина CSS, настоящая проблема заключается в том, что браузеры и их программисты не поддерживают стандарты COUGH Internet Explorer COUGH . Но в конце концов, изучение CSS было единственным лучшим выбором, который я сделал в веб-разработке.
PHLAK 31.10.2008 19:31:58
Существуют основные упущения в спецификации CSS, связанные с базовым макетом страницы. Грустный. Это так же хорошо, как и HTML.
BuddyJoe 14.01.2009 01:33:08
18 ОТВЕТОВ
РЕШЕНИЕ

Вы всегда можете использовать template engineдля добавления variablesи calculated fieldsк своим файлам CSS.

9
26.02.2020 13:55:04

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

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

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

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

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

34
24.08.2008 23:47:41
Даже если вы полностью освоите CSS, вы все равно будете бороться с недостатками языка. Я писал CSS с тех пор, как он был поддержан в конце 90-х, но я использую слой абстракции. Это просто хорошая практика.
Rimian 17.12.2010 23:48:42

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

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

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

5
23.05.2017 10:27:50

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

2
25.08.2008 00:35:50
И, честно говоря, вам даже не нужно больше знать о неправильной модели коробки IE5. Включите стандартный режим и не волнуйтесь о последних трех людях, использующих IE5.5 ... Проблема с браузером не та, что раньше!
bobince 30.10.2008 14:03:37

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

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

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

4
23.08.2017 03:13:45

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

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

11
25.08.2008 15:46:19
Вам не нужно использовать Ruby, чтобы использовать Sass! Я использую это для приложений php. Но вы также можете использовать xCSS.
Rimian 17.12.2010 23:50:31

Это развивает мой предыдущий ответ.

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

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

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

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

a, .entry, h1 { color: red }

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

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

7
14.01.2016 19:01:50

Для поддержки переменных я использовал 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 ?>;
     }
3
25.08.2008 01:51:33
Это работает, но вам лучше решить проблему в области проблемы. Sass, Less и xCSS реализуют переменные в синтаксисе CSS.
Rimian 17.12.2010 23:52:23

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

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

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

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

3
25.08.2008 02:30:56

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

2
25.08.2008 05:46:00

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

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

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

2
25.08.2008 16:02:38
Наоборот, я начинаю с придания вещам общего стиля, если это возможно, и уточняю при необходимости. Ключ должен помнить бит каскадирования.
Adriano Varoli Piazza 30.10.2008 14:06:36

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

3
30.10.2008 14:19:01

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

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

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

0
30.10.2008 02:53:48
Это не так уж и актуально в CSS. Это похоже на использование одного и того же цвета в разных местах. Не столько везде "color: # 333", но вроде "border-color: # 333". Почему я не могу сделать # 333 переменной, которую использую везде?
SCdF 30.10.2008 03:57:50
Абстракция поверх CSS может использоваться для генерации CSS-файлов, которые развертываются, а не читаются непосредственно браузером.
Kathy Van Stone 8.06.2010 18:48:43

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

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

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

0
30.10.2008 13:45:08

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

3
30.10.2008 14:01:34

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

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

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

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

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

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

6
8.07.2009 09:12:44
Я решил вашу самую большую проблему: CSS - это абстракция дизайна от контента.
Rimian 26.01.2011 01:47:27
@Rimian: Какова ваша точка зрения? Вы хотели сказать, что CSS, рассматриваемый как формальный язык, имеет некоторые возможности абстракции? Например, есть ли у него переменные и функции?
Artyom Shalkhakov 26.01.2011 08:36:17
Извините, мне было непонятно. Вы упомянули, что в Интернете отсутствуют механизмы абстракции. Но CSS это абстракция, не так ли?
Rimian 26.01.2011 10:18:45
Да, CSS - это своего рода абстракция, но не так, как я предполагал.
Artyom Shalkhakov 26.01.2011 11:32:22
С другой стороны, CSS позволяет абстрагировать повторяющиеся стили (для этого есть механизм каскадирования, плюс селекторы, предназначенные не для одного, а для множества элементов). Однако стили и селекторы также становятся повторяющимися, и CSS не имеет никаких средств для обработки такого рода повторений (например, вы не можете выразить «это, когда при конкретном идентификаторе станет селектором« #id li »») где конкретный идентификатор заменяется местозаполнителем: «#foo li» или «#bar li» для id = foo или id = bar).
Artyom Shalkhakov 26.01.2011 11:39:06

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

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

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

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

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

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

0
18.12.2010 00:18:41
Этот пост привлек несколько отрицательных голосов. Кто-нибудь хочет прокомментировать?
Rimian 26.01.2011 01:26:04

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

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

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

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

0
19.09.2016 19:01:03