Устойчивый HTML + CSS

Great Rash · September 13, 2012

Текст мелковат как-то...

Больше проблем нет?

UPD: Что говорит нам парадигма БЭМ? А говорит она нам, что есть неделимые Блоки, в которые входят Элементы, возможно, с Модификаторами. Так вот я считаю, что если ты вставил в блок не элемент, а что-то еще, то ты сам себе злобный Буратино... Иначе (если учитывать вообще все случаи) CSS будет выглядет примерно так:


.block-1, .block-1 table, .block-1 th, .block-1 td, .block-1 blockquote, .block-1 ul, .block-1 li, .block-1 ol, ... и т.п. {
  селектор: значение;
}

.block-2, .block-2 table, .block-2 th, .block-2 td, .block-2 blockquote, .block-2 ul, .block-2 li, .block-2 ol, ... и т.п. {
  селектор: значение;
}

...

.block-n, .block-n table, .block-n th, .block-n td, .block-n blockquote, .block-n ul, .block-n li, .block-n ol, ... и т.п. {
  селектор: значение;
}

Если я не прав то объясни в чем?

Burevestnik · September 13, 2012

Я правильно понимаю что проблема в этом блоке
т.е. нет отступа нижнего у тега <p>?
Да

Хм :blink: ... что то никак не получается реализовать (точнее не получается реализовать именно все возможные варианты одновременно).

вот наработки http://jsfiddle.net/LLpnM/ в данном варианте работает либо при последнем <p> либо при первом. В зависимости от очередности правил в css

Если кто нибудь уже нашел решение и это вообще возможно - подскажите

s0rr0w · September 13, 2012

UPD: Что говорит нам парадигма БЭМ? А говорит она нам, что есть неделимые Блоки, в которые входят Элементы, возможно, с Модификаторами. Так вот я считаю, что если ты вставил в блок не элемент, а что-то еще, то ты сам себе злобный Буратино... Иначе (если учитывать вообще все случаи) CSS будет выглядет примерно так:
Если я не прав то объясни в чем?

Извини, надо было сразу сказать, что БЭМ.

Great Rash · September 13, 2012

Извини, надо было сразу сказать, что БЭМ.

А это плохо или что? Ну и кагбэ .b-что-то__что-то намекает

s0rr0w · September 13, 2012

Если кто нибудь уже нашел решение и это вообще возможно - подскажите

Я знаю и те, кто были на встрече тоже знают.

А это плохо или что? Ну и кагбэ .b-что-то__что-то намекает

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

Great Rash · September 13, 2012

Так мне зачет в итоге или двойка?

UPD: у нас просто на работе решили БЭМ-like подход внедрять, вот и тренируюсь.

s0rr0w · September 13, 2012

Так мне зачет в итоге или двойка?

Зачет, зачет

mishka · September 13, 2012

Многие пользуют :last-child, а как же быть если все-таки надо поддерживать ie8?

s0rr0w · September 13, 2012

Многие пользуют :last-child, а как же быть если все-таки надо поддерживать ie8?

Можно легко обойтись без :last-child

s0rr0w · September 14, 2012

Ну что, больше желающих нет?

Burevestnik · September 14, 2012

Если кто нибудь уже нашел решение и это вообще возможно - подскажите
Я знаю и те, кто были на встрече тоже знают.

Так как у многих присутствует проблема с инлайн-текстом (в том или ином виде), то я думаю всем будет интересно увидеть вариант где такой проблемы нет.

Я вот до сих пор не смог придумать как это можно реализовать (именно для всех вариантов одновременно).

Edited September 14, 2012 by Burevestnik

Great Rash · September 14, 2012

Интересно еще посмотреть как можно обойтись без first/last-child.

s0rr0w · September 14, 2012

Интересно еще посмотреть как можно обойтись без first/last-child.

Без first-child нельзя. Вернее можно, но решение будет очень сильно "плохим".

lexxcode · September 14, 2012

та избавится от :last-child не проблема, просто задача, то была поставлена, так, чтоб ориентироваться на последние браузеры. Так ведь?

s0rr0w · September 14, 2012

Теперь мое решение

http://jsfiddle.net/Q6H4K/

Что в нем особенного?

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

2. Отсутствие поддержки :not() особо не скажется на визуальном форматировании.

3. Поток контента контроллируется по желанию, совершенно отдельно от общей обвязки.

Проблема с ::before, но это чистейшей воды выпендреж, там можно заменить все на фоновую картинку и min-height.

А решение лежит под носом, нужно всего лишь добавить один лишний контейнер.

psywalker · September 14, 2012

Теперь мое решение
http://jsfiddle.net/Q6H4K/
Что в нем особенного?
1. Я добавил "лишний" контейнер и перестал бороться с отступами у последнего или первого элемента. Элементы имеют отступы по умолчанию, за исключением h2. Инлайн текст не требует отдельных хаков.
2. Отсутствие поддержки :not() особо не скажется на визуальном форматировании.
3. Поток контента контроллируется по желанию, совершенно отдельно от общей обвязки.
Проблема с ::before, но это чистейшей воды выпендреж, там можно заменить все на фоновую картинку и min-height.
А решение лежит под носом, нужно всего лишь добавить один лишний контейнер.

1) Вот это хрень какая-та вообще:


.subPlate.help:before {
    color: #E6E6E6;
    content: "?";
    float: left;
    font: bold 55pt tahoma;
    margin-left: -55px;
    text-align: center;
    width: 70px;
}

И как это прикажешь понимать? А если мне нужно слева засунуть много картинок или вообще убрать колонку? - не пройдено))

2) При сдвиге элемента из контейнера он обрезается - не пройдено

3) Вот этот код должен быть в отдельном блоке. Зачем? Потому что это отдельные статьи.

<h2>Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id purus purus, bibendum gravida mauris. Mauris urna lacus, pellentesque ac suscipit in, aliquet non nulla. Pellentesque vehicula augue at dolor hendrerit gravida commodo turpis tristique. Praesent vitae neque non nulla venenatis pellentesque ac ac odio. Quisque et dolor ultricies ante adipiscing egestas vitae quis metus. Sed sed nibh non dolor tempor pellentesque in eu ipsum. Donec a ipsum ut lorem gravida ullamcorper. </p>

s0rr0w · September 14, 2012

1) Вот это хрень какая-та вообще:
.subPlate.help:before {
    color: #E6E6E6;
    content: "?";
    float: left;
    font: bold 55pt tahoma;
    margin-left: -55px;
    text-align: center;
    width: 70px;
}
И как это прикажешь понимать? А если мне нужно слева засунуть много картинок или вообще убрать колонку? - не пройдено))

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

2) При сдвиге элемента из контейнера он обрезается - не пройдено

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

3) Вот этот код должен быть в отдельном блоке. Зачем? Потому что это отдельные статьи.

<h2>Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id purus purus, bibendum gravida mauris. Mauris urna lacus, pellentesque ac suscipit in, aliquet non nulla. Pellentesque vehicula augue at dolor hendrerit gravida commodo turpis tristique. Praesent vitae neque non nulla venenatis pellentesque ac ac odio. Quisque et dolor ultricies ante adipiscing egestas vitae quis metus. Sed sed nibh non dolor tempor pellentesque in eu ipsum. Donec a ipsum ut lorem gravida ullamcorper. </p>

Ну добавь себе все что хочешь, блоки, статьи, таблички, все что угодно. Семантика содержимого .plateContent лежит на совести кодера.

s0rr0w · September 17, 2012

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

psywalker · September 17, 2012

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

А ты в своих проектах поддерживаешь IE8?

Great Rash · September 17, 2012

Ну в принципе все понятно: лишний контейнер и все становится ок. Я только третий пункт не догнал, что там с потоком не так было?

s0rr0w · September 17, 2012

А ты в своих проектах поддерживаешь IE8?

В старых да, на новой платформе поддержки уже нет

Ну в принципе все понятно: лишний контейнер и все становится ок. Я только третий пункт не догнал, что там с потоком не так было?

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

Например, я не переопределял свойства тега <p>, но даже если я это сделаю, поставив {margin: 10px 0px 0px; }, на общую конструкцию это никак не повлияет, а повлияет только на взаимоотношения тега <p> с другими элементами.

psywalker · September 17, 2012

s0rr0w, Саш, а почему-бы не сделать немного иначе. Раз ты один хрен используешь overflow: hidden;, то:

.subPlate - вот с этого блока вообще убрать закругления

.plateBlock - а вот на этот повесить overflow: hidden; ?

s0rr0w · September 17, 2012

Если сильно хочется убрать overflow: hidden, то можно это сделать так


.plateBox
{
    padding: 1px 0px;
}

amelice · September 20, 2012

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

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

Что нужно было сделать (по моему):

1. Соблюдать отступы в самых верхних блоках, какие б изменения не были.

2. Отступы между элементами в блоках, какие б изменения не были.

3. Отступ между абзацем и маргин.

4. Знак вопроса отодвигает контент вправо.

5. Закругленные углы в темно-сером блоке.

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

пытались менять - решили и второй пункт.

Остальные пункты понятны.

Было интересно посмотреть решения всех участников.

s0rr0w · September 20, 2012

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

Именно это и привело к "устойчивости" всей конструкции.

Sign In

Устойчивый HTML + CSS

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information