Sign in to follow this  
LUC

CSS по правилам Академии HTML и прочих гуру-верстальщиков

Recommended Posts

Всем привет!

Верстаю сайты более 10 лет. В основном для себя, не для коммерции. Начинал с табличной верстки, потом плавно перешел на блочную. Но никогда не обращал особого внимания на различные правила и рекомендации со стороны опытных верстальщиков. Мой подход к творчеству был предельно прост: если код проходит валидацию - хорошо. Если юзеры не жалуются на поехавшие блоки - ещё лучше! Однако, время и идет и приходится следовать современным тенденциям. После чтения различных материалов, типа "Стиль кода Академии HTML" , возник ряд вопросов, найти ответы на которые не удалось. В частности, касательно рекомендаций, которые даются в руководстве по написанию CSS. Например, следующие:
 

Цитата

 

1. Для отступов внутри правил используются два пробела.
2. После двоеточия в правилах ставится один пробел (top: 10px;).
3. Каждое объявление в правиле пишется на новой строке.
4. Перед открывающейся фигурной скобкой ставится один пробел. После скобки запись идёт с новой строки:

.selector {
color: #f5f5f5;
}

5. Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило отделяется пустой строкой.

 

Вопрос такой: для чего нужны все эти рекомендации? Для лучшей читаемости CSS человеком или браузером? Дело в том, что я всю жизнь пишу каждое правило в одну строку. Вот примерно так:

.header {height:500px;font-size:25px}
.header-logo {position:absolute;top:25px;left:30px;z-index:10;width:300px;height:300px}
.content {padding:10px5px;margin:10px 0}

Никаких переносов строк и лишних пробелов. Мне так удобнее читать: слева направо, как книгу. На широкоэкранном мониторе каждое правило умещается на весь экран. Допустим, в CSS прописано 150 правил, в каждом по 10 свойств. Если я каждое свойство перенесу на отдельную строку, CSS растянется на 1500 строк. Кому как, а лично мне читать такой код совершенно неудобно.

Так вот, имеет ли смысл менять свои привычки и переучиваться? Влияют ли все эти дополнительные пробелы и переносы на производительность браузера в лучшую сторону? Или это лишь попытка упростить жизнь верстальщикам-фрилансерам, которым приходится ежедневно вчитываться в чужой код?

Edited by LUC

Share this post


Link to post
Share on other sites

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

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

Даже странно что с 10-и летним опытом вы задаете такие вопросы...

Share this post


Link to post
Share on other sites

Простите что ? 

Цитата

Верстаю сайты более 10 лет.

Трудом верится.... 


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






 

Edited by Alexej

Share this post


Link to post
Share on other sites
1 час назад, AlexZaw сказал:

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

На 24-дюймовом мониторе при разрешении 1080 пикселей по вертикали умещаются 53 строки CSS. То есть, у меня перед глазами всегда большой объем данных и взгляд охватывает одновременно около 500 свойств. Считаю, что это удобно.

Но дело не только в переносе строк. Наличие лишних пробелов мне тоже не понятно. Например, зачем между правилами ставить именно по два пробела? Зачем ставить пробел после двоеточия? Зачем нужна точка с запятой после последнего свойства? Если это улучшает производительность браузера, то имеет смысл взять рекомендации на вооружение. Если же дело только в красоте, то, видимо, вкусы у меня весьма специфичны и я этой "красоты" не понимаю. ? 

6 минут назад, Alexej сказал:

Трудом верится.... 

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

Share this post


Link to post
Share on other sites

@LUC

Большинству реально такой стиль удобнее и читабельней. Разве что многие могут поспорить на тему табы vs пробелы, 2 или 4 пробела, и т.п. мелочи.

Теперь далее про Code Style. 

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

А так ваш код вполне может быть вашим личным Code Style, если вы работаете один и он вас устраивает.

8 hours ago, LUC said:

Зачем ставить пробел после двоеточия?

Чисто правила типографики и восприятия. Как при обычном письме

8 hours ago, LUC said:

Зачем нужна точка с запятой после последнего свойства?

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,502
    Total Members
    3,128
    Most Online
    JamesAPatel
    Newest Member
    JamesAPatel
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.