SVG резервной, вертикальный ритм, CSS структуры проекта

Привет, ребята!Добро пожаловать в более Smashing Magazine CSS Q& А. Вот как это работает: Вы посылаете в интересующие Вас вопросы о CSS, и по крайней мере один раз в месяц мы будем выбирать лучшие вопросы и отвечать на них так, чтобы каждый мог воспользоватьсяобмен.Ваш вопрос может быть об очень конкретной проблемой you’ Re имеющих, или это может быть даже вопроса о философском подходе.Мы будем принимать все kinds.

Если you’ Re заинтересована в изучении более Q&, there’ SA куча больше в моей автор archive.

CSS проекта Structure

Стивен Beiler спрашивает:

“ Не могли бы вы объяснить вашу стратегию для создания CSS?Как начать и что структура таблицы стилей выглядеть?Используете ли вы что-то вроде наконечника / комментарий помощники (например, руководство цвета стиля) или, возможно, связанных разметки, или что-то еще?Как вы организовать свой код ”?

В эти дни I’ м с использованием Sass для всех моих проектов.Sass обеспечивает то, что I’ уверен, что вы все знаете о — как переменные и Mixins, но она также предоставляет очень простой и жизненно важных функций: входит.Так же, как Вы могли бы использовать include() функции в PHP, или сделать частичную в Rails, вы можете @import другой файл в Sass Sass.В отличие от родного CSS @import, который просто делает запрос на этот файл, Sass идет и получает этот файл и включает в себя file’ Содержание с при компиляции до CSS.

Я использую эту возможность сильно при организации и структурирования CSS для проекта. Это позволяет мне сломать мой стиль в любые файлы смысла для me, как автор.Это позволяет мне ASCII рисунка:

Ascii

На мой недавний редизайн CSS-Tricks, я закончил с 28 СКС файлов, большинство из которых были модульными биты только когда-либо @ импортировать в больших таблиц стилей..Это работает очень хорошо для меня, как для Я, естественно, все организовать, а не схему организации навязали мне, ни одна построен из искусственного хаки (как огромные файлы с прокомментировал сепараторы)

. Что касается цветовой стиль руководства, один из этих файлов СКС всегда один я называю _bits.scss, которые были, я положил все мои повторного использования “ bits”, что любой из моих других файлов СКС может понадобиться..Цвет переменных, мои собственные @ Mixins и т.д. I’ фанат настройке цветов в качестве переменных сразу в проекте, так что вы можете легко ссылаться на них по мере необходимости.Если вам нужны вариации на этот цвет, вы можете использовать такие функции, как Sass darken() и lighten() в adjust.

Немного спорно, мне нравятся имена моих цветов в зависимости от их цвета, как $red $blue, а $green, Потому что тогда он принимает меня ноль секунд, чтобы запомнить и на самом деле их использовать.В то время как в прошлом, когда I’ пробовал, чтобы быть супер семантической о моих цветов и называть их бренда $, $ secondaryHighlight и $ moduleBackground или что-то подобное, я никогда не мог запомнить свой ум, и это замедлило меня down.

Когда использовать OOCSS

Michael Winczewski спрашивает:

“ Крис, что вы думаете о OOCSS?Используете ли вы его в коде, и если да, то как?Когда бы вы посоветовали не использовать его?И когда бы вы посоветовали использовать его ”?

Я думаю, что it’ с фантастическим.It’ больше из образа мышления, чем строгий набор правил.Я сомневаюсь, что я понимаю, OOCSS таким же образом, что Николь Салливан делает, или что я понимаю SMACSS таким же образом Jonathan Snook делает.Но я думаю, я понимаю, что дух за этими движениями и использовать их таким образом, что смысл me.

Что это сводится к тому, для меня это обычно: записи супер семантической разметки, но использовать имя класса, почти на каждом важном “ chunk” Тогда стилю вещей в значительной степени на основе этих имен классов..It’ S об определении моделей и стилей, что картина в умным способом.Таким образом, эта схема может быть использована повторно легко, эффективность присуща, и не семантика пострадал.И это doesn’ т означает, что схожу с ума, с именами классов, это означает, используя только правую amount.

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

Выбор Все ссылки Псевдо Classes

Ren Walker спрашивает:

Есть быстрый трюк или меньше, Sass, или верный и CSS, где вы можете выбрать все псевдо-классы элемента?Например, вместо:

a, a:visited, a:active { }

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

a:* { }

Конечно.Если you’ повторное использование Sass, вы могли бы выработать собственную @ примесь к вашим потребностям.Например:

@mixin all-link-psuedos($col) {
  &:link     { color: darken($col, 10%); }
  &:visisted { color: darken($col, 20%); }
  &:hover    { color: darken($col, 30%); }
  &:active   { color: darken($col, 40%); }
}

$linkColor: red;
a {
  color: $linkColor;
  @include all-link-psuedos($linkColor);
}

Существует выбора типа комбайнер вещи только в CSS, как well.

:-webkit-any(a:link, a:visited, a:hover, a:active) {
  color: red; 
}
:-moz-any(a:link, a:visited, a:hover, a:active) {
  color: red; 
}

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

Откаты Для SVG

Angelo D’ Ambrosio спрашивает:

“ What’? Самый простой и наиболее эффективный способ, чтобы браузер выбрать, чтобы загрузить SVG или растровой версии изображения или фона CSS, по поддержке браузеров ”

Скачать версию Modernizr, который сошел только тестирование SVG (при условии, that’ S единственный тест, вам нужно).
Выполнитьтест.Если она проходит, положить в SVG.Если это не удается, положить в bitmap.

По существу:

if (!Modernizr.svg) {
  $("#logo").css("background-image", "url(fallback.png)");
}

Modernizr isn’ T необходимые на каждый сайт в мире — it’ S необходимо на веб-сайтах, где нужно очень конкретно вилкой стиль поведения или для браузеров, которые делают или don’ T поддержкой функции.Например, если у вас есть функция геолокации на вашем сайте (но эта функция работает просто от� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 15.10.2012 by Newsbot