splincodewd Jan 19 2016 at 01:59

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

4 min

55K

CSS *

+16

Comments 28

Psychosynthesis Jan 19 2016 at 03:28

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

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

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

taliban Jan 21 2016 at 12:25

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

Psychosynthesis Jan 28 2016 at 02:43

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

Invision70 Jan 19 2016 at 04:30

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

dom1n1k Jan 19 2016 at 04:42

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

Cледует.

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

linoleum Jan 19 2016 at 06:22

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

mayorovp Jan 19 2016 at 09:10

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

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

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

Dolios Jan 19 2016 at 11:31

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

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

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

RUQ Jan 19 2016 at 12:02

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

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

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

Alexious_sh Jan 19 2016 at 13:15

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

RUQ Jan 19 2016 at 13:33

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

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

UFO just landed and posted this here

AlexKeller Jan 19 2016 at 18:39

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

vintage Jan 19 2016 at 20:12

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

RUQ Jan 20 2016 at 10:07

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

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

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

vintage Jan 20 2016 at 12:29

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

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

RUQ Jan 20 2016 at 13:21

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

.container
    .child
    .child

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

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

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

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

RUQ Jan 20 2016 at 13:26

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

UFO just landed and posted this here

Vend3tta Jan 19 2016 at 16:20

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

UFO just landed and posted this here

xargon Jan 19 2016 at 17:08

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

c01nd01r Jan 19 2016 at 19:23

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

UFO just landed and posted this here

jmaks13 Jan 19 2016 at 17:22

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

UFO just landed and posted this here