Оцените верстку.

[Mirage]

Прошу Вас оценить верстку макета(найденного на просторах интернета) и самое главное указать на ошибки.

— Верстка

— Макет

Я начинающий верстальщик. Тени реализовать получилось не все. Обратите внимание на то, что я не использовал плюшки html5 и css3 намеренно(такую задачу я себе поставил), так что прошу не писать об этом.

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

Буду благодарен за Ваши замечания и советы. Спасибо всем, кто посетил эту тему.

Edited September 25, 2013 by Mirage

[Mirage]

Обновил тему.

[satantx]

Странно центрируйте элементы под слайдером, не проще ли им всем сделать float: left?

В IE8 скрипты не работают.

Лучше писать на jquery,

ну а так нормально

[klierik]

1. не использовать ID

2. #topMenu li сделать без картинок

3. Для слайдера использовать любое гтофое решение (например jCarousel) вместо непонятно самописа.

4. не использовать верхний регистр в именах классов

.functionsTitle -- не правильно

.functions-title -- правильно, хотя назвать данный элемент можно было бы более юзер френдли.

5. #functions .content -- сделать без картинок

6. #topSwitch лучше переделать на базе jQuery UI Tabs

7. #search -- скорее всего контент надо было положить в <fieldset>

8. #popular - это должно быть список ul>li

9. #popular .post и #content .post -- ты назвал одинаково (.post) разные сущности, что не правильно. каждая сущность должна иметь своё имея и набор свойств независимо от других.

10. .title .description -- зачем на <span>вешать display: block; ?? не логичнее было использовать <div>

11. содержимое блока: .postMessage сделано не правильно. Тут должно быть разделение. Отдельно ссылка, в которой картинка. Отдельно <div> для текста. Текст скорее всего в будущем будет лежать в <p>, так как его будут наполнять в редакторе.

12. #botWrap - некорректное именование. Не следует сокращать термины. Лучше написать .bottom-wrapper что будет более понятно в будущем и тебе и другому разработчику который, возможно, будет работать над проектом.

13. #botMenu -- вся структура заведомо имеет ошибку. А что случится если завтра вмето картинок справа добавится еще 3 колонки со списком? Кастомеру надо будет лезать в разметку и её менять, что ли? Вообще такая индексация (.first, .second, etc) не требуется в 99,9% случаев а вероятность того что тебе она понадобится в ближайшие несколько лет близится к нулю. Перестань так делать. Научись предполагать что будет происходить с кодом если завтра контент будет изменен. Тут главное что бы была гибкость и простота настолько насколько это возможно.

[Mirage]

Странно центрируйте элементы под слайдером, не проще ли им всем сделать float: left?

В IE8 скрипты не работают.

Лучше писать на jquery,

ну а так нормально

Спасибо за ответ. Скрипты не работают, потому что выборка по классу не кроссбраузерна(узнал об этом, когда уже написал сценарий). На jquery лучше и проще, но моя цель была чистый js, т.к. я учусь.

1. не использовать ID

2. #topMenu li сделать без картинок

3. Для слайдера использовать любое гтофое решение (например jCarousel) вместо непонятно самописа.

4. не использовать верхний регистр в именах классов

.functionsTitle -- не правильно

.functions-title -- правильно, хотя назвать данный элемент можно было бы более юзер френдли.

5. #functions .content -- сделать без картинок

6. #topSwitch лучше переделать на базе jQuery UI Tabs

7. #search -- скорее всего контент надо было положить в <fieldset>

8. #popular - это должно быть список ul>li

9. #popular .post и #content .post -- ты назвал одинаково (.post) разные сущности, что не правильно. каждая сущность должна иметь своё имея и набор свойств независимо от других.

10. .title .description -- зачем на <span>вешать display: block; ?? не логичнее было использовать <div>

11. содержимое блока: .postMessage сделано не правильно. Тут должно быть разделение. Отдельно ссылка, в которой картинка. Отдельно <div> для текста. Текст скорее всего в будущем будет лежать в <p>, так как его будут наполнять в редакторе.

12. #botWrap - некорректное именование. Не следует сокращать термины. Лучше написать .bottom-wrapper что будет более понятно в будущем и тебе и другому разработчику который, возможно, будет работать над проектом.

13. #botMenu -- вся структура заведомо имеет ошибку. А что случится если завтра вмето картинок справа добавится еще 3 колонки со списком? Кастомеру надо будет лезать в разметку и её менять, что ли? Вообще такая индексация (.first, .second, etc) не требуется в 99,9% случаев а вероятность того что тебе она понадобится в ближайшие несколько лет близится к нулю. Перестань так делать. Научись предполагать что будет происходить с кодом если завтра контент будет изменен. Тут главное что бы была гибкость и простота настолько насколько это возможно.

Отлично! Спасибо за подробные замечания и за время, уделенное на это. Буду исправляться. А насчет названий классов, CamelCase(или это неуместно?).

Написал заново js, теперь вроде бы нормально.

Edited September 26, 2013 by Mirage

[klierik]

А насчет названий классов, CamelCase(или это неуместно?).

В данном направлении разработки -- неуместно. Рекомендуется все писать маленькими буквами

[Viper]

В данном направлении разработки -- неуместно.

"неуместно" - уж слишком категорично сказано, ИМХО) При определенной методологии построения классов, вполне себе уместно может быть. У меня лично, например, только позитивное отношение к такому именованию классов как и у программистов, с которыми приходилось работать. Возможно, дело в привычке и предпочтениях?)

Рекомендуется все писать маленькими буквами

А можно пару аргументированных примеров(ссылок)?

[klierik]

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

А вот в вебе классы настоятельно рекомендуется именовать маленькими буквами. Словосочетания через "-". Как минимум потому что в обычной типографии (книги, журналы прочее) между словами присутствует расстояние -- пробел. Удобнее прочитать ".block-name" нежели .blockName потому что первые вариант больше схож с обычным, привычным ему, текстом. Читается проще, быстрее. Распознание текста выше так как "-" воспринимается в качестве пробела.

Особенно это касается длинных слов:

.available-in-stock против .availableInStock

.welcome-msg или .welcomeMsg

.form-language или .formLanguage

.col2-right-layout или .col2RightLayout

И вот представь что у тебя 30+ CSS файлов, которые написаны в стиле .blockName и каждый клас требуется распозновать читая по-буквам, ищем большую букву для разделения словосочетания что бы понять.

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

Кажется мы с тобой уже вели диалог на данную тему 6-12 мес назад.

Ссылки, да пожалуйста:

http://www.yandex.ua/

http://getbootstrap.com/

Сюда так же можно привести и https://www.google.com но там подход иной. На фронте им свойственно сжимать классы до букв:

.a, .ab, .abc или же .zA .yO -- шикарный подход что бы ужать код ибо CSS регистрозависим.

Думаю этого более чем с головой.

[Vin]

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

Ещё же есть underscore c нижними тире. Обычно от и фреймворка языка зависит. Самое худшее, по-моему — это именно underscore в названиях css-классов, есть любители такого))

[klierik]

Самое худшее, по-моему — это именно underscore в названиях css-классов, есть любители такого))

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

.block-name
.block-name__element-name
.block-name_modification

Такой подход себя очень хорошо показывает в определенных нестандартных больших постоянно развивающихся проектах.

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

[Vin]

Ну БЭМ — это другое дело. А когда в обычной вёрстке домашней странички Васи Пупкина нижнее тире используется вместо дефиса, это выглядит нелепо.

[advokatua]

1) точки под Full width slider и остальными не совпадают с макетом.

2) Нет теней в выпадающем меню. На макете есть.

3) Тень после CONTINUE READING гавно. ) Сам приглядись

4) Шрифты вообще не совпадают.

5) Подчеркивание у tortor amet совсем не подчеркивание, а граница. Смотрите макет.

Ну и т.д.

Кароче, работы непочатый край 8)

Edited October 9, 2013 by advokatua