Стильный, красивый и понятный код

Только дурак нуждается в порядке — гений господствует над хаосом. © Альберт Эйнштейн

Я не гений, поэтому считаю, что мне при написании кода и работе с ним нужно стараться придерживаться неких правил. Я собрал для себя подборку источников возможных правил (буду добавлять по мере нахождения полезных материалов), на основании которых буду формировать свои. При этом, нельзя не упомянуть об W3C и валидации кода.

Источники правил:

Когда CSS-код с душком
Почему стиль кода имеет значение
Руководство по оформлению HTML/CSS кода от Google
10 признаков профессиональной html-верстки
Искусство семантики HTML, часть 1
(en) GitHub styleguide
(en) Code Standards от Fellowship Technologies
CSS GuideLines, часть 1.Синтаксис и форматирование
CSS GuideLines, часть 2. Комментирование кода
Принципы написания кода
Руководство по форматированию CSS
Улучшаем читабельность CSS-кода с помощью «стилевых гидов»
(en) CSS Guidelines by Harry Roberts

Не по теме, но полезно:

WTF, HTML и CSS?

Валидаторы кода:

W3C
Валидатор HTML-кода
Валидатор CSS-кода

Поделиться
4 комментария
Дмитрий Филатов

Серое жирное подчеркивание под ссылками при наведении мыши смотрится ужасно. Измените цвет!

Евгений Куценко

Готов его сразу сменить, если вы объясните слово «ужасно» и предложите конкретное решение. Придёт другой посетитель и скажет «ужасно 2». :-) Мне же надо будет ему аргументировать.
На данный момент аргументация следующая: «Утолщение линии и её цвет создаёт иллюзию приподнимания ссылки при наведении.» :-D

Дмитрий Шишкин

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

Бага в Сафари: http://yadi.sk/d/aaEgNrxlS6a2Q

Евгений Куценко

Я человек не гордый. :-) Сменил. Присмотрелся (зрение -10). Странно, что подчёркивание казалось двойным, хотя была просто 2px solid. Наверно от этого эффект «грязности» и появлялся.
Баг возможно от кеша старого. На Сафари (Mac) все ровно, хотя... Сейчас на кроссбраузерность погоняю. Спасибо!

Дмитрий Шишкин

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

Евгений Куценко

Как бы то не было... Теперь все по новому. :-)

P.S. Ошибка в стилях действительно была. Не такая, но все же. Посмотрел блог на разных платформах/браузерах, теперь вроде все ровно. Спасибо за толчок к действиям!
P.S.S. Про заголовки. Категорически согласен! :-)

Дмитрий Шишкин

Осталось частично: http://yadi.sk/d/8vy3CITBS74NT
Разрешение где-то между 1900 и 1600

Евгений Куценко

С налёту не получилось. :-) Допилю позже. Все равно хочу перетащить в свою тему некоторые решения с темы Артёма Поликарпова.

Популярное