Большие проекты

[WalkMan]

Собственно сабж

кто как подходит к большим проектам

где уникальных страниц много

в дизайне периодически проскакивают похожие формы отображения элементов контента?

[psywalker]

Собственно сабж

кто как подходит к большим проектам

где уникальных страниц много

в дизайне периодически проскакивают похожие формы отображения элементов контента?

Я просто делаю, сначала главную, стараюсь сделать каркас покрепче и по гибче, а далее верстаю все остальные страницы

[WalkMan]

Я просто делаю, сначала главную, стараюсь сделать каркас покрепче и по гибче, а далее верстаю все остальные страницы

Это понятно

я к тому что страниц допустим 50

в этих 50 периодически могут проскакивать похожие блоки информации с незначительными дополнениями/изменениями

вот наткнулся на такой пример

но на мой взгляд это очень жёстко

.FFA{font-family:  Arial;}
.FFAN{FONT-FAMILY: Arial Narrow;}

.posAbs{ position:absolute;}
.posRel{ position:relative;}
.posFix{ position:fixed!important;}

.clearL{ clear:left;}
.clearR{ clear:right;}
.floatL{ float:left;}
.floatR{ float:right;}

.T0 { top:0px;}
.L0{ left:0px;}
.R0{ right:0px;}
.B0{ bottom:0px;}

.LH0{line-height:0px;overflow: hidden;}
.LH1{line-height:1px;}
.LH11{line-height:11px;}
.LH12{line-height:12px;}

.F0{font-size:0px;overflow: hidden;}
.F1{font-size:1px;}
.F12{font-size:12px;}
.F14{font-size:14px;}
.F15{font-size:15px;}


.UCase{ text-transform:uppercase;}
.LCase{ text-transform:lowercase;}
.CCase{ text-transform:capitalize;}

.NoLine{ text-decoration:none;}
.UnLine, .UnLine:hover{ text-decoration:underline;}
.CursorP{cursor:pointer;}
.CursorD{cursor:default;}
.FB{ font-weight:bold;}
.FN{ font-weight:normal;}

.TxtL{text-align:left;}
.TxtR{text-align:right;}
.TxtC{text-align:center;}

.DN{display:none;}
.DB{display:block;}
.Vi_V{visibility:visible;}
.Vi_H{visibility:hidden;}

.Of_A {overflow:auto;}

/*—————————-  Fonts colors ——————*/
.C_W{color:#FFFFFF;}/*White*/
.C_R{color:#9D080D;}/*Red*/
.C_O{color:#F3A21D;}/*Orange*/
.C_OO{color:#F3A21D;}/*Orange - Hover button */
.C_B{color:#000000;}/*Black*/

/*—————————-  Fonts colors ——————*/

/*—————————-  BackGround colors ——————*/
/*White*/
.BGW{ background-color:#FFFFFF!important;}

/*Gray*/
.BGGL{ background-color:#D7D7D7!important;}

/*—————————-  BackGround colors ——————*/

/*—————————-  Border colors ——————*/
.BOB{border:solid 1px #000000;}/*Black*/
.BOO{border:solid 1px #fd9800;}/*Orange*/
.BOGL{border:solid 1px #D7D7D7;}
.BOGLL{border:solid 1px #D8D8D8;}

.BOGBOT{border-bottom:1px solid #D7D7D7;}
/*—————————-  Border colors ——————*/

.BGRX{ background-repeat:repeat-x;}
.BGRY{ background-repeat:repeat-y;}
.BGNR{ background-repeat:no-repeat;}
/*—————————-  Paging ——————*/
.PagingDis{ font-weight:bold; font-size:11px; color:#282828; line-height:12px; text-decoration:none;}
.PagingAct{ font-weight:bold; font-size:11px; color:#282828; line-height:12px; text-decoration: underline; cursor:pointer;}
.PagingDisW{ font-weight:bold; font-size:11px; color:#ffffff; line-height:12px; text-decoration:none;}
.PagingActW{ font-weight:bold; font-size:11px; color:#ffffff; line-height:12px; text-decoration: underline; cursor:pointer;}
/*—————————-  Paging ——————*/

код урезан

суть понятна

[psywalker]

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

[WalkMan]

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

Походу не до конца вкурил сабж

у движка пару десятков тимплеев для разного вида страниц

[Павел Билькис]

На основе движка можно сделать один единственный шаблон, и для других страниц в этот шаблон подставлять разные финтефлюшки. Поясню. Допустим, у меня есть обыкновенный трех-колоночный шаблон. В шапке находится лого компании. Остальные страницы сделаны по такому же принципу и практически с таким же дизайном, но всякие мелкие детальки, типо лого, цвета шрифта и пр., могут изменятся. Именно поэтому движок берет главный шаблон и в соответствии с параметрами меняет цвет шрифта, ставит другое лого и тд. Таким образом получаются все эти 50 страниц

[s0rr0w]

Это понятно

я к тому что страниц допустим 50

в этих 50 периодически могут проскакивать похожие блоки информации с незначительными дополнениями/изменениями

вот наткнулся на такой пример

но на мой взгляд это очень жёстко

Нет. Это очень правильно. Я сам пришел к похожим вещам. Не в суперизвращенной форме, но у меня тоже есть набор классов, очень похожих на приведенные.

Вообще тут можно даже статью целую написать по этому поводу.

[WalkMan]

На основе движка можно сделать один единственный шаблон, и для других страниц в этот шаблон подставлять разные финтефлюшки. Поясню. Допустим, у меня есть обыкновенный трех-колоночный шаблон. В шапке находится лого компании. Остальные страницы сделаны по такому же принципу и практически с таким же дизайном, но всякие мелкие детальки, типо лого, цвета шрифта и пр., могут изменятся. Именно поэтому движок берет главный шаблон и в соответствии с параметрами меняет цвет шрифта, ставит другое лого и тд. Таким образом получаются все эти 50 страниц

Я не знаю как ты, но я не програмер а верстальщик

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

Нет. Это очень правильно. Я сам пришел к похожим вещам. Не в суперизвращенной форме, но у меня тоже есть набор классов, очень похожих на приведенные.

Вообще тут можно даже статью целую написать по этому поводу.

я вот то же присмотрелся к некоторым классам

меня вот сейчас интересно следующее

что бы не объяснять на пальцах попробую привести пример работы psywalker:)

psywalker

итого:

есть у него класс class="new_services"

всё красиво все понятно

тут нарисовывается новая страница диза на которой есть такой же блок

но совсем с другим содержанием

ну например отзывы клиента или методы ухода за кожей(для данного примера)

логично вставить тот же блок с тем же классом

но возникает путаница:

в блоке new_services повествуют как избавляться от прыщей или о том какая это контора фиговая...

вариант создать новый класс и в стилях прописать значение для класса не очень подходит

так как на классе new_services завязано много вложенных стилей для элементов

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

P.S. to s0rr0w

Напишешь статью, цены тебе не будет

[s0rr0w]

есть у него класс class="new_services"

всё красиво все понятно

тут нарисовывается новая страница диза на которой есть такой же блок

но совсем с другим содержанием

ну например отзывы клиента или методы ухода за кожей(для данного примера)

логично вставить тот же блок с тем же классом

но возникает путаница:

в блоке new_services повествуют как избавляться от прыщей или о том какая это контора фиговая...

вариант создать новый класс и в стилях прописать значение для класса не очень подходит

так как на классе new_services завязано много вложенных стилей для элементов

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

P.S. to s0rr0w

Напишешь статью, цены тебе не будет

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

Недавно с psywalker'ом подымали эту тему, насчет классов.

Есть классический подход, есть другой, я его назову эволюционным.

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

<div class="someBlock newsList"/>

<div class="someBlock articleList"/>

Все красиво, все счастливы, все вроде адекватно и логично.

В эволюционном подходе делается не абстрактный класс, а вполне себе конкретный, и к нему дописывается модификатор, если такой появляется.

<div class="newsList"/>

<div class="newsList articleList"/>

Это же бред, скажете вы. А вот и не бред, этот подход более приспособлен под модификацию кода. Когда я буду изменять базовый класс newsList, я буду точно знать, куда мне нужно пойти, чтобы проверить свои модификации, не привели ли они к нарушениям дизайна в списке новостей. В классическом подходе проверить все варианты, чтобы они сработали как надо куда сложнее, и будет куча мусорной работы, ведь изменения в базовом классе someBlock может привести к непонятному результату в большем количестве блоков.

Эволюционный подход позволяет более качественно проверять модификации классов, ускоряя тестирование продукта и уменьшая количество ошибок.

Он больше подходит для сайтов, но не для интерфейсных решений.

[WalkMan]

Из выше изложенного я так понимаю мы слегка можем пренебрегать логичностью, так как не всегда известно как дизайнеру вздумается оформить очередной блок контента <div class="newsList faqList"/> ну далее по фантазии

вот кстати лжеюзер в одном комъюнити такую штуку запостил:

Object Oriented CSS

к сожалению в англ не очень силён

Edited November 18, 2009 by WalkMan

[s0rr0w]

Из выше изложенного я так понимаю мы слегка можем пренебрегать логичностью, так как не всегда известно как дизайнеру вздумается оформить очередной блок контента <div class="newsList faqList"/> ну далее по фантазии

вот кстати лжеюзер в одном комъюнити такую штуку запостил:

Object Oriented CSS

к сожалению в англ не очень силён

Ну, по ссылке там классическая схема описана.

Логичность? А никто нам не мешает создавать свою логику поведения.

[WalkMan]

Пользуясь случаем хочу передать привет уточнить по семантике:

семантика есть правильно использование элементов хтмл (абзац абзацем/список списком) или же это так же и распространяется на название классов

т.е. если блок новостей то class="blockNews" ну и т.п.

[Justnewone]

Пользуясь случаем хочу передать привет уточнить по семантике:

семантика есть правильно использование элементов хтмл (абзац абзацем/список списком) или же это так же и распространяется на название классов

т.е. если блок новостей то class="blockNews" ну и т.п.

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

То что вы говорите - похоже на микроформаты, но это скорее иннициатива группы товарищей, и наверное уже мертвая в зародыше.

[s0rr0w]

Пользуясь случаем хочу передать привет уточнить по семантике:

семантика есть правильно использование элементов хтмл (абзац абзацем/список списком) или же это так же и распространяется на название классов

т.е. если блок новостей то class="blockNews" ну и т.п.

Принципы аналогичные именованию переменных. Чем лучше назовешь имя класса, тем легче читать код.

[WalkMan]

ну мне приходиться работать так сказать в паре с програмерами

что бы им потом было нормально на движок натягивать

и так много косяков делают во время натяжки ))

Из всего вышесказанного сложилась следующее представление по тактике верстки:

-определиться с системой стилей

-названия классам давать class="infoBlock", class="formBlock" и перед ними вставлять коменты аля :

<!-- hot news -->

<div class="infoBlock">

bla bla bla

</div>

<!-- recent comments -->

<div class="infoBlock">

bla bla bla

</div>

[psywalker]

А я считаю, что если подходить к делу с умом, то вполне можно обойтись классикой, и как говориться чтобы не голословить, разберём работу psywalker

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

Вот например взять синий блок, (<div class="block news_block">) их тут больше всего, я назвал их .block и прописал ему основные стили, тоесть сделал прочный каркас, а далее уже классом .news_block я вношу все внутренности, а если мне нужно, то меняю этот класс на другой и блок уже становиться галереей, а любым другим.

Чем этот вариант вообще плох?

[s0rr0w]

А я считаю, что если подходить к делу с умом, то вполне можно обойтись классикой, и как говориться чтобы не голословить, разберём работу psywalker

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

Вот например взять синий блок, (<div class="block news_block">) их тут больше всего, я назвал их .block и прописал ему основные стили, тоесть сделал прочный каркас, а далее уже классом .news_block я вношу все внутренности, а если мне нужно, то меняю этот класс на другой и блок уже становиться галереей, а любым другим.

Чем этот вариант вообще плох?

На маленьких проектах - ничем. На больших - будут трудности. Если тебе нужно будет поправить стили для block, то ответь сходу, что ты можешь поломать в верстке? Какие блоки? На каких страницах? Что не поломается, так как уже переопределено?

[psywalker]

На маленьких проектах - ничем. На больших - будут трудности. Если тебе нужно будет поправить стили для block, то ответь сходу, что ты можешь поломать в верстке? Какие блоки? На каких страницах? Что не поломается, так как уже переопределено?

Если мне нужно будет поправить стили для block, я могу поломать каркас, но опятьже я буду ломать его у определённых блоков и только с классом коррекции.

[WalkMan]

Если мне нужно будет поправить стили для block, я могу поломать каркас, но опятьже я буду ломать его у определённых блоков и только с классом коррекции.

Когда лежит 30 страниц то 10 раз подумаешь перед тем как ломать

а вообще да

(<div class="block news_block">)

я так и предполагал

может не правильно выразился

основной класс для блока ну и если требуется то дополнительный класс для коррекции,

только блоки не настолько общими делать как в разбираемом примере

а ранжировать их по более уникальным свойствам чем просто блок с маргинами

Edited November 18, 2009 by WalkMan

[psywalker]

Когда лежит 30 страниц то 10 раз подумаешь перед тем как ломать

а вообще да

(<div class="block news_block">)

я так и предполагал

может не правильно выразился

основной класс для блока ну и если требуется то дополнительный класс для коррекции,

только блоки не настолько общими делать как в разбираемом примере

а ранжировать их по более уникальным свойствам чем просто блок с маргинами

А я бы ещё предложил следующее: Если бы блоки на других страницах явно отличались, то и начальный главный класс можно было бы им другой дать, чтобы путаница точно не произошла

[WalkMan]

А я бы ещё предложил следующее: Если бы блоки на других страницах явно отличались, то и начальный главный класс можно было бы им другой дать, чтобы путаница точно не произошла

Ну ни кто и не говорит о том что бы создать единый блок и под него всё гнуть при помощи дополнительных классов

[mozg4d]

Для больших проектов (50 страниц - это маленький )) совсем кроха )))) - чем проще - тем лучше.

Тут примерно такая логика - находите секретаршу, которая думает что HTML - название радиостанции. В течении 10-ти минут объясняете (у неё на компьютере без всякого дэнвера - только IE и блокнот) как сделать новую страничку с картинкой и текстом. Даёте ей 30 мин. смотрите.. если у неё получилось - ура - вы супер верстальщик )). если нет, то.. тупая блондинка ((

Не смейтесь - так и делаю. правда наша секретарша уже HTML изучила, редиска )

Поэтому уж тем более для 50-ти страниц - всё должно быть в одной папке. никаких файлов *.css. Абсолютное позиционирование, class'ов - по минимуму (вы 10 мин только объяснять что такое класс будете.. (и не факт что получится))).

Мы даже собственный компилятор используем, чтобы зайти на нужную страничку в IE, правой кнопкой мыши, view source и открывается notepad++.

Хотя всё зависит от сайта.

Edited November 20, 2009 by mozg4d

[WalkMan]

Для больших проектов (50 страниц - это маленький )) совсем кроха )))) - чем проще - тем лучше.

Тут примерно такая логика - находите секретаршу, которая думает что HTML - название радиостанции. В течении 10-ти минут объясняете (у неё на компьютере без всякого дэнвера - только IE и блокнот) как сделать новую страничку с картинкой и текстом. Даёте ей 30 мин. смотрите.. если у неё получилось - ура - вы супер верстальщик )). если нет, то.. тупая блондинка ((

Не смейтесь - так и делаю. правда наша секретарша уже HTML изучила, редиска )

Поэтому уж тем более для 50-ти страниц - всё должно быть в одной папке. никаких файлов *.css. Абсолютное позиционирование, class'ов - по минимуму (вы 10 мин только объяснять что такое класс будете.. (и не факт что получится))).

Мы даже собственный компилятор используем, чтобы зайти на нужную страничку в IE, правой кнопкой мыши, view source и открывается notepad++.

Хотя всё зависит от сайта.

Надо дома завести секретаршу