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

Question

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

I. Ненависть . CSS.

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

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

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

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

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

Answer 1

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

Answer 2

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

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

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

Answer 3

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

Answer 4

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

Answer 5

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

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

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

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

Answer 6

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

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

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

Answer 7

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

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

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

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

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

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

Answer 8

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

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

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