Несколько дельных советов по CSS

[Psychosynthesis]

Последнее не сильно отличается от обычного задания по тегу и в общем случае врядли будет сильно полезно.

a { color: #008000; text-decoration: underline; }

Вообще половина примеров — вполне себе элементарные знания, никаких особых хитростей тут нет. Особенно удивляет что кто-то может не знать 2 и 4.

[taliban]

Вы похоже не поняли последний стиль, он применится только тем ссылкам, которые не имеют класса, а не все подряд.

[Psychosynthesis]

Я понял, потому и написал «не сильно отличается». Не вижу этому применения при правильно выстроенной иерархии стилей в интерфейсе.

[Invision70]

Это все понятно, так что насчет дельных советов?

[dom1n1k]

Вам не следует добавлять высоту строки для каждого параграфа или заголовка

Cледует.

Как минимум половину пунктов я бы из «дельных советов» перенес в категорию «сомнительные трюки». Почти у всех есть побочные эффекты, делающие их, скажем так мягко, неуниверсальными.
В принципе, заметки любопытные и для углубленного понимания технологии полезные. Но в продакшн я бы отсюда мало что потащил.

[linoleum]

Лоботомированная сова… в продакшне так лучше не делать. Я уже вижу как другой разработчик тратит полчаса на «а откуда тут этот отступ». А когда найдет сову, то сам пойдёт делать лоботомию, угадайте кому.

[mayorovp]

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

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

Я бы не рискнул использовать подобные трюки без контекста (.enable-owl * > *)

[Dolios]

Надо, наверное, тоже начать куски букваря по css перепечатывать. Стану популярным автором :-)
splincodewd все что есть в вашем посте, есть в любом учебнике по css. За исключением, разве что, трюка с «совой», который, впрочем, весьма дурно пахнет, имхо. Только у вас, в отличие от учебника, все разрозненно и бессистемно.

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

Желающим разобраться, советую какую-нибудь хорошую книгу почитать. Например, эту:
www.allitebooks.com/css-the-missing-manual-4th-edition

[RUQ]

А вот я не понимаю. Flexbox, все круто, и пример про «Динамические внешние отступы при помощи flexbox», то есть вроде бы мечта сбылась. Просто говоришь ширину блока, и space-between, а оно уже само там.

Но, что если у меня 6 блоков и на каком-то разрешении помещается в ряд 4. Что будет с оставшимися 2? А я вам скажу, они будут просто по краям. Как так...flexbox ведь?

Я встречал какие-то странные хаки, дескать надо подставить несколько фальшивых (пустых блоков) до недостающего и тогда все будет ок, но это чушь. Другими словами, пока без inline-block никуда)

[Alexious_sh]

Media queries и flex-wrap вам в этом случае помогут.

[RUQ]

В том-то и дело, что я ожидал от flexbox, решения простой задачи равномерного распределения ячеек в зависимости от ширины. А вместо этого мне предлагают завязываться на физические величины (media-queries). Flex-wrap — тут не при чём.

На мой взгляд оптимальным решением было-бы, например специальное свойство для последней строки, наверное.

[AlexKeller]

Может, я не совсем корректно вас понял насчет последней строки, но простейший флекс позволяет сделать так:

[vintage]

Не понял, а что ещё вы ожидали от space-between? Вам точно он нужен, а не какой-нибудь margin-right: calc( 10% + 10px )?

[RUQ]

Не от space-between, и даже не от space-around. А ожидал от flexbox решения простой задачи распределения карточек с фиксированной шириной и например фиксироваными отступами по центру контейнера + каждая карточка должна быть одинакова по высоте (по контенту самой большой карточки).

Ваше предложение, её кстати тоже не решает, так как карточки будут выровнены по левому краю контейнера. Посмотрите как это решается например в twitter bootstrap — отрицательные маргины у контейнера.

Возможно как вариант взять от flexbox stretch по поперечной оси, а всё остальное от сетки из inline-block'ов.

[vintage]

margin: 0 calc( 10% + 10px )?

Нарисуйте картинку лучше.

[RUQ]

Я же говорю в вашем случае блоки будут по левому краю. Лучшая картинка, хм ну например так:

.container
    .child
    .child

.conatainer
    text-align: center
    margin: 0 -15px;

.child
    display: inline-block
    width: 300px
    margin: 0 15px;

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

P.S. Чувствую себя занудой.

[RUQ]

Короче я дозанудничал, если вы имеете ввиду margin: 0 calc( 10% + 10px ) для блоков внутри flex-контейнера, без всяких там space-between, то таки да, скорее всего это оно.

[Vend3tta]

Привет из 2012-го :)

[xargon]

По поводу слайдера — не совсем понятно, что имеется ввиду.

[c01nd01r]

Что-то вроде details в HTML5

[jmaks13]

Прочитав статью вспомнил студента проходившего у меня практику. Я его как то спросил где нужно использовать класс clearfix, на что он ответил, что на всякий случай ставит его везде.