Консультации и оценка качества html-вёрстки (бесплатно)

Greggy · 04.10.2012

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

Del · 06.10.2012

_KurT_ сказав(ла):
Я пытался использовать не в полной мере такой БЭМ, как его используют и описывают в Яндексе. Для маленьких сайтов это же ведь не оправдано, правильно?

_KurT_ сказав(ла):
Я имел ввиду использование bem-tools, префиксов и той распределенной файловой структуры.

В таком "тяжелом" виде, это оправдано и удобно для Яндекса. А когда у вас аутсорс и постоянно новые и новые небольшие проекты - это избыточно.
Bem-tools нужны чтоб было удобно работать с BEMHTML и bem-bl.
Префиксы - атавизм, рекомендованным остался только b-, его можно отбросить.
Файловая структура в БЭМ может быть разной. Смотрите выше по ссылкам эволюцию БЭМ, как Харисов описывает варианты его использования, это то что они сами прошли. Первые, простые варианты - это то, что на мой вгляд, как раз и нужно в аутсорсе.

_KurT_ сказав(ла):
Да понял. Получается, что сейчас виной этому некоторые правила, которые прописаны в ресете. И получается, что в пределах данного сайта он является все таки независимым(не в полной мере конечно, как АНБ), так как на всем сайте использовался бы одинаковый ресет, но соответсвенно на любом другом сайте - скорее всего нет.

Это в принципе проблема для сайта. Ваши стили должны опираться на каскад только тогда, когда в этом есть необходимость. Т.е. если вам нужно чтоб при изменении глобальных правил внешний вид ваших блоков менялся. Например если изменятся базовый цвет шрифта, чтоб он поменялся и в блоках на сайте. А если у вас есть блоки которые "расчитывают" что глобальные стили именно такие какие сейчас - I have some bad news for you

Вы не сможете изменить эти глобальные стили, у вас сайт развалится. И если кто-то изменит - тоже развалится.

Посмотрите библиотеку bem-bl, например горизонтальное меню:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

тут на всех уровнях сбрасывается margin, padding, list-style, и можно ~~быть уверенным~~ надеятся что какие бы глобальные стили не использовались - меню будет таким каким задумано. Только background у li у них не сброшен - а это общепринятый способ задания буллетов. Может на это у них есть причины? Непонятно,

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

, жду ответа.

_KurT_ сказав(ла):
Как это не привязаны именованием?

Например

Код:

.star_packs {padding: 10px 0 23px}

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Привязки нет,

ни по имени: тогда было бы .borr__star_packs
ни по каскаду: тогда было бы .borr > .star_packs

_KurT_ сказав(ла):
конфликтовать? каким образом ?

Внезапоно на новой странице другой верстальщик сделает другой элемент с классом star_packs но для другого блока. Не верите? Ну оки, хорошо, имя редкое.
А как вам такой вариант - на другой странице эти ваши .star_packs вложены в другой блок. И другому верстальщику надо изменить их внешний вид. Он перепишет ваш стиль. У него на страничке всё будет как надо. А на вашей (про которую он и не знает и не задумывается, ну зачем право искать "а нет ли такого блока где-то ещё?") - развалится. Сплошь и рядом такое. Это про "перезаписаны".

А "могу использоваться где угодно" - может вам эти стили вообще понравились и их через multiple classes прилепили много куда. Не, ну а чё, зря что-ли каскадные таблицы стилей - каскадные? И в какой-то момент вам нужно что-то изменить в каком-то из блоков... Трогать этот стиль страшно, он не относится к конкретному блоку, он вне блоков и что мы делаем?.. Усугубляем всё дальше, дописываем ещё один multiple class .my-super-puper-unique-classname и фигачим туда стили чтоб переопределить внешний вид.

_KurT_ сказав(ла):
Что, кхм? прям таки, у junoir-a рейт 10$/час?

Я не пойму, это много или мало по вашему?

_KurT_ сказав(ла):
У Вас был такой рейт когда Вы были junior-ом?

~~Я не был джуниором.~~Рейты не только на фрилансе. В часах оценивают работу менеджеры, умножают её на стоимость часа разработчика и предлагают эту оценку менеджеру клиента, а он или соглашается или торгуется.
$10/час - рейт который я выставляю для простых задач на русскоязычных проектах.
А фактически разработчик может больше времени потратить, тут от его квалификации зависит.

_KurT_ сказав(ла):
Я сверстал данную страницу:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

за 18 часов и мне сказали что в принципе, для junior-а, это нормально. Разница больше чем в 2 раза, собственно вопрос - кто ошибается или в чем проблема?

Долго даже если с нуля.

_KurT_ сказав(ла):
Покажите сложную

Ну вот например:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

или

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

_KurT_ · 06.10.2012

Del сказав(ла):
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Привязки нет,
ни по имени: тогда было бы .borr__star_packs
ни по каскаду: тогда было бы .borr > .star_packs

Но .star_packs совершенно не относится к .borr, он может использоваться отдельно о .borr.

Del сказав(ла):
Внезапоно на новой странице другой верстальщик сделает другой элемент с классом star_packs но для другого блока. Не верите? Ну оки, хорошо, имя редкое.
А как вам такой вариант - на другой странице эти ваши .star_packs вложены в другой блок. И другому верстальщику надо изменить их внешний вид. Он перепишет ваш стиль. У него на страничке всё будет как надо. А на вашей (про которую он и не знает и не задумывается, ну зачем право искать "а нет ли такого блока где-то ещё?") - развалится. Сплошь и рядом такое. Это про "перезаписаны".

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

Del сказав(ла):
А "могу использоваться где угодно" - может вам эти стили вообще понравились и их через multiple classes прилепили много куда. Не, ну а чё, зря что-ли каскадные таблицы стилей - каскадные? И в какой-то момент вам нужно что-то изменить в каком-то из блоков... Трогать этот стиль страшно, он не относится к конкретному блоку, он вне блоков и что мы делаем?.. Усугубляем всё дальше, дописываем ещё один multiple class .my-super-puper-unique-classname и фигачим туда стили чтоб переопределить внешний вид.

Ну как же, в таком случает мы не фигачим .my-super-puper....., а добавляем модификатор существующему классу и там уже переопределяем внешний вид. Или я что не понимаю ...

Del сказав(ла):
Я не пойму, это много или мало по вашему?

Del сказав(ла):
Я не был джуниором.Рейты не только на фрилансе. В часах оценивают работу менеджеры, умножают её на стоимость часа разработчика и предлагают эту оценку менеджеру клиента, а он или соглашается или торгуется.
$10/час - рейт который я выставляю для простых задач на русскоязычных проектах.
А фактически разработчик может больше времени потратить, тут от его квалификации зависит.

Сложно это говорить конечно, но как по мне - то много для новичка, но я тут не подумал как раз о том, что если человек делает дольше назначенного времени то рейт падает соответственно. По этому - да, при нормальной скорости работы 10$\час - нормально. Я просто не учел что моя скорость работы еще совсем не дотягивает.

Del сказав(ла):
Ну вот например:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

или

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

- это вроде понятно - резина, навигация по странице, да и слайдер вроде бы не простой.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

- а эта сложнее из-за того что здесь есть вкладки и аккордеоны?

Del · 07.10.2012

_KurT_ сказав(ла):
Но .star_packs совершенно не относится к .borr, он может использоваться отдельно о .borr.

Ну тогда ok.

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

Нет.
Если блоки независимы, то стили тоже независимы и относятся к конкретным блокам. У вас тогда будет

или два блока стилей с разным именем (хоть и возможно очень похожими правилами)
или отдельные правила в стилях модификатора
или отдельные правила в стилях модификации от контекста

_KurT_ сказав(ла):
Ну как же, в таком случает мы не фигачим .my-super-puper....., а добавляем модификатор существующему классу и там уже переопределяем внешний вид. Или я что не понимаю ...

Я описывал не миксование, а объединение стилей, что не относятся к конкретному блоку, глобальных стилей. Ну вы наверняка сталкивались с таким на странице, когда есть блок, у него куча независимых классов которые также используются в произвольных элементах и их этого спагетти получается стиль. Речь о стилях вида: ".block-small .width-33 .green .news"

_KurT_ сказав(ла):
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

- а эта сложнее из-за того что здесь есть вкладки и аккордеоны?

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

BAV_Lug · 21.10.2012

Есть следующая задача - нужно привязать блок с position:fixed к нижнему краю браузера.
Решения на чистом css без использования javascript я так и не придумал. Может будут идеи?
Пример, того что хотелось бы получить на чистом css,

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

(закладки новинки и распродажа)

qwerrrr · 21.10.2012

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

Del · 22.10.2012

BAV_Lug сказав(ла):
Есть следующая задача - нужно привязать блок с position:fixed к нижнему краю браузера.

Код:

{position: fixed; bottom: 0; right: 0;}

?

qwerrrr сказав(ла):
посоветуйте, пожалуйста, хорошую книжку по html для ребенка 9 класс, который только начал этим заниматься..с примерами, может заданиями и тд, что-то вроде учебника...

“Dive into HTML5” by Mark Pilgrim.
Русский перевод на

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

BAV_Lug · 22.10.2012

Del сказав(ла):
Код:

{position: fixed; bottom: 0; right: 0;}

?

За "bottom:0" спасибо - не думал, что оно в таком случае отработает. Но вот как привязать отступ справа не к окну браузера, а к краю содержимого? Ширина окна может же гулять. А закладки должны быть поверх содержимого.

BAV_Lug сказав(ла):
За "bottom:0" спасибо - не думал, что оно в таком случае отработает. Но вот как привязать отступ справа не к окну браузера, а к краю содержимого? Ширина окна может же гулять. А закладки должны быть поверх содержимого.

Вопрос снимаю - придумал уже

Спасибо за наводку.

qwerrrr · 22.10.2012

Del сказав(ла):
Код:

{position: fixed; bottom: 0; right: 0;}

?

“Dive into HTML5” by Mark Pilgrim.
Русский перевод на

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Спасибо большое! а она в продаже есть? мне просто на подарок нужно в бумажном виде,
вы могли бы подсказать, еще варианты, что на балке или в магазине можно спрашивать.

Del · 23.10.2012

BAV_Lug сказав(ла):
Но вот как привязать отступ справа не к окну браузера, а к краю содержимого? Ширина окна может же гулять.

На чистом CSS:

Код:

.fixed {
    position: fixed; bottom: 0; [COLOR="DarkOrange"]left: 100vw; margin-left: -100px; width: 100px;[/COLOR] 
    height: 100px; background: red;
}

но это будет работать только в

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

. Для остальных нужно делать fallback на js.

qwerrrr сказав(ла):
Спасибо большое! а она в продаже есть? мне просто на подарок нужно в бумажном виде,
вы могли бы подсказать, еще варианты, что на балке или в магазине можно спрашивать.

В бумажном виде она называется

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Русский перевод есть от BHV:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

BAV_Lug · 23.10.2012

Del сказав(ла):
На чистом CSS:

Код:

.fixed { position: fixed; bottom: 0; [COLOR="DarkOrange"]left: 100vw; margin-left: -100px; width: 100px;[/COLOR] height: 100px; background: red; }

но это будет работать только в

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

. Для остальных нужно делать fallback на js.

Ну у меня получилось сделать вариант работающий и в IE8 и с большой вероятностью в IE7. На чистом css. Все достаточно просто - нужно просто вложить фиксированный объект в контейнер относительно которого мы и хотим его выставить. И потом банальное margin-left на нужное нам смещение.

qwerrrr · 23.10.2012

Спасибо!

Del · 24.10.2012

BAV_Lug сказав(ла):
Ну у меня получилось сделать вариант работающий и в IE8 и с большой вероятностью в IE7. На чистом css. Все достаточно просто - нужно просто вложить фиксированный объект в контейнер относительно которого мы и хотим его выставить. И потом банальное margin-left на нужное нам смещение.

Можно пример чтоб понимать о чём речь?

Кстати, вот ещё два варианта:

position: -sticky;

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
поиграться с position: absolute/fixed без указания top/left/bottom/right - тогда блок размещается как если бы он находится в обычном потоке

BAV_Lug · 24.10.2012

Del сказав(ла):
Можно пример чтоб понимать о чём речь?

Кстати, вот ещё два варианта:

position: -sticky;

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

поиграться с position: absolute/fixed без указания top/left/bottom/right - тогда блок размещается как если бы он находится в обычном потоке

Вот

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Закладки внизу - новинки и распродажа. Как раз второй вариант. При этом bottom есть, а вместо left/right - margin. И все встало как нужно.

nyan · 25.10.2012

Моя первая страница, дайте, пожалуйста, оценку

-

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

BAV_Lug · 26.10.2012

nyan сказав(ла):
Моя первая страница, дайте, пожалуйста, оценку -

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Прошу ТС-а извинить, что лезу в его тему. Но хотел бы задать вопрос - а что тут оценивать?

nyan · 26.10.2012

BAV_Lug сказав(ла):
Прошу ТС-а извинить, что лезу в его тему. Но хотел бы задать вопрос - а что тут оценивать?

Черт побери, не успел зайти в интернеты, как тут же попал на эльфа 80-го уровня познавшего тайну бытия, а ведь меня предупреждали :'(

Del · 26.10.2012

nyan сказав(ла):
Моя первая страница, дайте, пожалуйста, оценку - bennington.16mb.com

Аккуратно, молодец.
Давно HTML учите? Что читаете?

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

nyan · 26.10.2012

Del сказав(ла):
Аккуратно, молодец.
Давно HTML учите? Что читаете?

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

Да относительно давно, в принципе, но в виду отсутствия присутствия достаточного количества свободного времени, процесс познания мною HTML/CSS протекает довольно таки медленно

надеюсь что сейчас, после первой сверстанной мною страницы, дело пойдет немного быстрей.

Много всего читал

благо интернет предоставляет такую возможность, но в основном труды Мержевича. Большое спасибо за ответ.

Del · 26.10.2012

Мержевич - хорошо, но Мейера почитайте («CSS-каскадные таблицы стилей. Подробное руководство» Эрик А. Мейер).

Консультации и оценка качества html-вёрстки (бесплатно)

Додаткові параметри

Greggy

Привіт!

Del

_KurT_

Del

BAV_Lug

qwerrrr

Del

BAV_Lug

qwerrrr

Del

BAV_Lug

qwerrrr

Del

BAV_Lug

nyan

BAV_Lug

nyan

Del

nyan

Del