Как бы вы назвали этот блок?

[Zverushka]

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

[afdw]

howList

[swandev]

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

https://codeo.me/4Ou

[Zverushka]

Так. 

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

Edited May 13, 2014 by Zverushka

[gritsyuk]

.table__item (для wrap)Каждому пункту:.table__item_1.table__item_3.table__item_4.table__item_5

Общий: .table__item_all 

Edited May 13, 2014 by gritsyuk

[Zverushka]

На первый взгляд это хотелось бы сделать таблицами.

Но кажется эту верстку в принципе не сделать таблицей - здесь нужно спереди и сзади вставлять тени через псевдоблоки и позиционирование, а файфокс не понимает такого. Наверное уже поэтому название .table не очень удачное.

[swandev]

Так. 

Но допустим, я захочу применить этот стиль к другому контенту, но с таким же оформлением. Например, список достоинств победильницы конкурса красоты. .howWorks совсем плохо, .steps - ммм получается тоже не очень подходит, что-то в нем не соотвествует истинному назначению оформления... Кстати никто бы не добавил префиксов, указывающих на перечисление, например, чтобы снизить уровень абстрактности?

Вы пишите, пишите варианты, оч интересно...

Я бы структуру оставил такой-же, изменил класс который будет соответствовать контенту (например .advantages), а стилизовал уже бы для двух классов ( .steps, .advantages { } )

Если делать что-то универсальное, например .row-items (или просто .row)

[gritsyuk]

Но кажется эту верстку в принципе не сделать таблицей

Согласен, я предпочел слово table  не как элемент разметки <table> , а как общепринятое значение неких структурированных данных, собственно как вы написали:

(заголовок тут не при чем, имеется  в виду сама табличка).

Как вариант, может заменить table__item на box__item. 

Вопрос довольно таки многогранный.   

[Sensei]

Я бы сделал примерно так https://codeo.me/4OD

[Mugen1]

Какая разница как разметить блоки, да и пора бы с дивами закругляться...

Размечай комментарии в разработке.

[Zverushka]

@Sensei,  mf-stretch-cnt - а как это расшифровывается?
@gritsyuk, table - это скорее ассоциативный набор данных (ключ-значение), а в данном случае никаких ассоциаций нет, идет скорее перечисление .

 

 

Я бы структуру оставил такой-же, изменил класс который будет соответствовать контенту (например .advantages), а стилизовал уже бы для двух классов ( .steps, .advantages { } )

 

Если делать что-то универсальное, например .row-items (или просто .row)

 

По идее нужен общий связующий класс, отвечающий за обозначение дизайна, но .row-items - слишком абстрактно, что тот, кто столкнется с таким названием - не поймет назначение данного класса из названия.

Edited May 13, 2014 by Zverushka

[Sensei]

mf-stretch-cnt - а как это расшифровывается?

Я бы так назвал модификатор, который равномерно растягивает контент на всю ширину. Префикс «mf» — от англ. modifier.

 

Какая разница как разметить блоки

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

да и пора бы с дивами закругляться

А что с ними не так, и чем их заменить, а главное зачем?

Размечай комментарии в разработке

Вот здесь не понял.

[swandev]

да и пора бы с дивами закругляться...

Не скоро вы еще от них избавитесь, да и не нужно

[Mugen1]

 

mf-stretch-cnt - а как это расшифровывается?

Я бы так назвал модификатор, который равномерно растягивает контент на всю ширину. Префикс «mf» — от англ. modifier.

 

 

 

Какая разница как разметить блоки

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

 

 

да и пора бы с дивами закругляться

А что с ними не так, и чем их заменить, а главное зачем?

 

 

Размечай комментарии в разработке

Вот здесь не понял.

 

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

<div class="wrapper">

<header class="mhead">

<nav>

 <ul>

<li></li>*4

</ul>

</nav>

 

</header>

 

<section="main">

<article class="newsbox">

<article class="newsbox1"></div>

<article class="newsbox2"></div>

<article class="newsbox3"></div>

<article>

/*end of newsbox*/

</div>

/*конец обёртки main*/

</section>

/*end of wrapper*/

</div>