Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

<<< WYSIWYG html редактор || Unix время и Unix Timestamp (MySQL, PHP, JavaScript) >>>

Code style (php, html5, js, css)

03.09.2012
Code style (php, html5, js, css)

Здравствуйте, уважаемые читатели блога LifeExample, совершенствуя свой программистский уровень до сегодняшнего дня, я, к сожалению, уделял мало внимания стилю кода. Конечно, я стараюсь придерживаться, единому стилю оформления своих скриптов, но оценив недавно Code Style крупных организаций, таких как Google, Zend Technologies, Sun Java, невольно пришел к мысли, что пора бы переходить на новый стиль программирования.

Стиль программирования

Стиль программирования – это свод правил по оформлению кода, разработанный в рамках одного и более крупных программных продуктов. Не существует единого верного или неверного стиля программирования, поскольку code style определяется индивидуально для каждой команды разработчиков.

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

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

Данной статьей я хочу представить code style для web мастера, который считаю наиболее выгодным и удобным. В рамках этого стиля программирования я приведу свод правил по написанию кода на следующих языках программирования:

  • PHP
  • HTML
  • JavaScript
  • CSS

Описанные мной правила, не являются рекомендацией и не претендуют на истинную верность их применения. Поэтому я прошу вас, указывать свое мнение, в комментариях, относительно тех или иных аспектов приведенного code style.

Code style для HTML5 и CSS

Code Style для CSS и HTML5

Первым из списка заявленных языков я хочу представить стиль HTML и CSS разметки. Данный код стайл основан на рекомендациях компании google.

  1. Пишите все URL адреса без указания протоколов http и https.
    2. 1
    2
    3
    4
    <script src="//lifeexample.ru/codestyle.js"></script>
    .some-selector {
      background: url(//lifeexample.ru/images/example);
    }
  2. Для структурирования элементов и удобной читаемости кода используйте 2 пробела.
    3. 1
    2
    3
    4
    5
    6
    7
    8
    <ul>
      <li>Fantastic
      <li>Great
    </ul>

    .example {
      color: blue;
    }
  3. Пишите все теги и атрибуты в нижнем регистре
    4. 1
    <img src="lifeexample.png" alt="LifeExample ">
  4. Не оставляйте пробельные символы в конце строк.
    5. 1
    <p>В конце этого предложение, только перевод строки.
  5. Используйте кодировку UTF-8 в объявлении мета данных.
    6. 1
    <meta charset="utf-8">
  6. Комментируйте код только там где это необходимо. Ненужно комментировать каждую строку кода.
  7. Используйте DOCTYPE соответствующий спецификации HTML5.
    8. 1
    <!DOCTYPE html>
  8. Не закрывайте одинарные теги <br> и <img>.
  9. Используйте W3C HTML Validator для проверки валидации кода.
  10. Используйте теги по их прямому назначению. Например, не стоит навешивать обработчик onclick на блок <div>.
  11. В тегах img обязательно указывайте атрибуты alt и title .
  12. Прописывайте стили только в CSS файлах, старайтесь не плодить кучу ненужных CSS.
  13. Не используйте спецификатор !important без веской причины.
  14. Не используйте мнемонические символы HTML, за исключением неразрывных пробелов &nbsp
  15. Опустите использование ненужных в HTML5 тегов: <html> и <head>.
    16. 1
    2
    3
    <! DOCTYPE HTML>
    <title> Заголовок страницы </ title>
    <p> контент...
  16. Не используйте атрибуты type для подключаемых таблиц стилей и JS скриптов. HTML5 по умолчанию определяет их.
    17. 1
    2
    <link rel="stylesheet" href="//www.google.com/css/maia.css">
    <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
  17. При цитировании значений атрибутов, используйте двойные ( «» ), а не одинарные кавычки ( » ).
    18. 1
    <a class="some-class"> Ссылка на стиль программирования </ a>
  18. Используйте смысловые названия классов и ID элементов. По мере возможности сокращайте названия элементов и классов, сохраняя их смысл.
    19. 1
    2
    3
    #gallery {}
    #login {}
    .nav {}
  19. Не используйте лишние селекторы div.error {}
    20. 1
    .error {}
  20. Использование сокращенных свойств полезно для повышения эффективности кода и понятности.
    21. 1
    2
    3
    border-top: 0;
    font: 100%/1.6 palatino, georgia, serif;
    padding: 0 1em 2em;
  21. Опустите указание спецификаторов после числовых значений, там где они не требуются.
    22. 1
    2
    margin: 0;
    padding: 0;
  22. В нецелочисленных величинах не пишите 0.
    23. 1
    font-size: .8em;
  23. Используйте 3 символа шестнадцатеричной системы для цветов где это возможно
    24. 1
    color: #ebc;
  24. Не используйте кавычки («», ») для задания url().
    25. 1
    @import url(//lifeexample.ru/css/code-style.css);
  25. Используйте префиксы для идентификаторов элементов. Использование пространств имен помогает предотвратить конфликты имен и может сделать обслуживание проще, например, в операции поиска и замены.
    26. 1
    2
    .new-help {} /* Новости */
    #cat-note {} /* Каталог */
  26. Не объединяйте слова в селекторах, используйте символ дефиса "–"
    27. 1
    2
    #video-id {}
    .code-style {}
  27. Старайтесь не использовать хаки, связанные с особенностями браузеров. Делайте это только в крайней необходимости. Старайтесь писать код валидным для любого типа браузеров.
  28. Задавайте список правил в соответствии с сортировкой по алфавиту, исключая префиксы:
    29. 1
    2
    3
    4
    5
    6
    7
    8
    background: fuchsia;
    border: 1px solid;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: black;
    text-align: center;
    text-indent: 2em;
  29. Используйте отступы для иерархии блоков правил
    30. 1
    2
    3
    4
    5
    6
    7
    8
    @media screen, projection {

      html {
        background: #aaa;
        color: #333;
      }

    }
  30. Используйте точку с запятой после каждого объявления свойства.
    31. 1
    2
    3
    4
    .test {
      width: 200px;
      height: 100px;
    }
  31. Отделяйте одинарным пробелом свойство и значение:
    32. 1
    2
    3
    h3 {
      font-weight: bold;
    }
  32. Всегда начинайте новую строку для каждого селектора и декларации.
    33. 1
    2
    3
    4
    5
    6
    h1,
    h2,
    h3 {
      font-weight: normal;
      line-height: 1.2;
    }
  33. Всегда оставляйте пустую строку перед следующим правилом
    34. 1
    2
    3
    4
    5
    6
    7
    8
    html {
      background: #fff;
    }

    body {
      margin: auto;
      width: 50%;
    }
  34. Оставляйте комментарии перед каждой группой разделов
    35. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /* Заголовок */

    #le-header {}

    /* Подвал */

    #le-footer {}

    /* Сайдбар */

    .le-sidebar {}

На этом описание code style по HTML и CSS я завершу, но считаю, что если подумать, то можно много чего еще дополнить. Напомню, что приведенный список стилей программирования на 95% основан на рекомендациях компании Google.

Code Style для JavаScript

Code Style для JavаScript

Бороздя просторы интернета в поисках готовых стилей программирования, я прочел не мало информации посвященной стилю кода для JavаScript. Проанализировав прочтённый материал я пришел к выводу, что при написании JS кода будет правильно полагаться на следующий cod style:

  1. Длина строк не должна превышать 80 символов, большие строки следует переносить на следующую строку, отделяя ее четырьмя пробелами.
  2. Отступы в коде ставятся пробелами, а не табуляцией,
  3. Имена переменных должны состоять из строчных латинских букв, могут включать в себя цифры, но не должны начинаться с цифр.

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

  4. Объявлять переменные следует до момента их первого использования, в алфавитном порядке.
  5. Имена функций должны состоять из строчных букв, могут включать в себя цифры, но не должны начинаться с цифр.
  6. Названия функций должны отражать смысл их назначения, не должны являться существительным именем, могут включать в себя несколько частей речи и записываются слитно начинаясь с прописной буквы, а каждое следующее слово с заглавной . Между объявлением функций обязательно оставляйте одну пустую строку.
    7. 1
    2
    3
    function getOrderList() {

    }
  7. Объявление функций должно происходить в конце файла после всех вызовов и логики работы скрипта.

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

    1
    2
    3
    4
    5
    6
    7
    function outer(c, d) {
        var e = c * d;
        function inner(a, b) {
            return (e * a) + b;
        }
        return inner(0, 1);
     }

    Закрывающая фигурная скобка должна находиться на уровне объявления функции (4-ре пробела от начала строки).
    Если функция анонимна, разделяйте ключевое слово function и открывающую круглую скобку одним пробелом.

    1
    2
    3
    div.onclick = function (e) {
         return false;
    };
  8. Операторы: ( + , =, +=, *=, /,%, ++, — и т.п) должны отделяться одинарным пробелом с каждой стороны.
  9. Комментарии в JavaSript лучше не писать, поскольку они увеличивают объем файла, следует комментировать только в крайних случаях. При грамотном именовании функций и переменных, комментарии будут излишком.
  10. Операторы сравнения лучше использовать так === и так !==, поскольку == и != выполняют приведение типов. Кроме того желательно ставить переменную с которой идет сравнение после оператора, а не перед ним. Это поможет заострить внимание на том, с чем сравнивается переменная и избежать случайной ошибки указания одного знака равенства.
    11. 1
    2
    if (“Hi, world” == str) {
    }
  11. При создании объектов и массивов используйте {} вместо new Object() и [] вместо new Array().
  12. В некоторых изученных мною материалах, Code Style для JavaScript упоминает о проставлении точки с запятой после тела функции. Несмотря на необязательность этого синтаксиса многие рекомендуют им не пренебрегать, ссылаясь на сложность выявления ошибок при его отсутствии.
  13. Насколько это правило необходимо в вашем стиле кода, решать вам, я решил не обращать на это внимание, и не ставить точку с запятой после тела функции. Связанно это с тем , что писать код приходится не только на JavaScript, но и на PHP в котором данное правило ни на что не влияет. А также я считаю, что code style должен быть максимально приближен в смежных языках и где можно, нужно совместить правила оформления скриптов.

PHP стиль программирования (Code Style)

PHP стиль программирования (Code Style)

Вот и подобрались к самому жирному из всей связки языков, код, которого нуждается в соблюдении правил документа описывающего Code Style.

На самом деле как я уже сказал, code style всего проекта, на мой взгляд, должен перекликаться с правилами оформления смежных в нем языках. Именно поэтому я возьму за основу тот список правил который изложен в пункте Code Style для JavаScript, и только добавлю некоторые аспекты характерные для PHP.

  1. Имена констант, должны быть записаны только заглавными буквами, отражать смысл их назначения и разделяться символами подчеркивания при необходимости.
  2. Именовать классы нужно с большой буквы, сливая все слова в одно, начиная каждое слово с заглавной буквы.
  3. Объявление PHP кода должно происходить только так или в некоторых случаях так . Использование коротких тегов может быть неуместным на серверах с отключенным параметром short_open_tag.
  4. Любой php скрипт не должен заканчиваться закрывающим тегом ?> , это поможет избежать ошибок при подключении скриптов.
  5. Комментарии в отличии от Code Style JavaScript нужно делать обширными, но не везде где вздумается, поскольку код сам по себе должен быть ясен по названию функций и переменных. Стоит комментировать описание классов
    6. 1
    2
    3
    4
    5
    6
    7
    8
    9
     /**
     * Super Class
     *
     * @package Package Name
     * @subpackage  Subpackage
     * @category    Category
     * @author  Author Name
     * @link    http://example.com
     */

    Некоторые функции также стоит комментировать, особенно если они требуют параметры ввода.

    1
    2
    3
    4
    5
    6
    7
    8
    /**
     * Encodes string for use in XML
     *
     * @access  public
     * @param   string
     * @return  string
     */
    function xml_encode($str)
  6. Все ключевые слова должны быть в нижнем регистре.
  7. Логические операторы AND и OR стоит записывать, как && и || соответственно.
  8. Использовать только жесткие операторы сравнения типов === и !==
  9. Ключевые слова extends и implements должны находиться в одной строке с названием класса.
  10. Любой из файлов не должен иметь пробелов до первого тега .
  11. Открывающая фигурная скобка после объявления классов их методов, функций, и всего остального должна находиться на одной строке с названием.
  12. Параметры, указанные в объявлении функции должны отделять пробелами как друг от друга та и от внешних скобок.
  13. Строки всегда помещайте в двойные кавычки. При необходимости встроить в строку переменную используйте фигурные скобки: «My string {$foo}»

Кроме описанных правил, в приведенных, выше стилей оформления кода для HTML, CSS, PHP, JavaScript, существуют еще два важных момента, которые стоит соблюдать при разработке проекта:

  • 1. Все имена будь то имена функций, переменных и т.п. ни в коем случае не должны быть записаны транслитом!
  • 2. Кодировка всех скриптов и файлов проекта должна являться всегда только UTF-8 без BOM!
  • 3. Хороший программист — это тот, кто может делать сложные вещи простым кодом.
  • 4. Главное — не краткость кода, а его простота и читаемость.

Уважаемые читатели, теперь вы не просто знаете, что такое Code Style, но и хорошо себе представляете, какие правила и стили оформления кода, он описывает. Скажу честно, что данным вопросом, а именно вопросом разработки Code Style, я задался не просто так.

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

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Подписаться на RSS
Нравится
Сайтостроение

Комментарии

  • Андрей
    10.09.2012

    как это не закрывать одинарные теги??!!

    и — это не валидный код.
    надо писать обязательно так и

    Ответить
    • Mark
      10.09.2012

      Конечный тег php?> лучше не закрывать, поскольку после него можно случайно поставить пробел. Если впоследствии подключить такой файл, то произойдет вывод, и установить заголовок уже не удастся — вывалится ошибка. Поэтому рекомендуется конечный тег не закрывать, интерпретатор это позволяет.

    • Mark
      10.09.2012

      эм.. Немного не о том написал. Понял ваш вопрос. Да, я тоже был удивлен данной рекомендации, но тем не менее она присутствует в гугловском списке. Объясняется это тем что HTML это HTML, а XHTML это XHTML.

    • Оставить комментарий

    Не отвечать

    Подписаться на комментарии к этой статье по RSS

    Публикации
    Избранное
    Яндекс.Метрика