Спецификация
Это стандарт написания кода, которому следует и согласовывает группа разработчиков интерфейса, который предназначен для улучшения стандартизации и удобства сопровождения кода.
Основные принципы
Соблюдение веб-стандартов, семантического HTML, разделения структуры, производительности и поведения, а также превосходной совместимости. С точки зрения производительности страницы код должен быть кратким, понятным и упорядоченным, чтобы максимально снизить нагрузку на сервер и обеспечить бесперебойную работу. самая высокая скорость разбора.
общая спецификация
1. Игнорировать (пропустить) протокол: например, фон: url(http://www.google.com/images/example). Вам следует написать фон: url(//www.google.com/images/example); облегчить переключение HTTP с помощью протокола https, если не требуется использовать определенный протокол
2. Используйте IDE, чтобы добиться четких отступов при написании. Клавиша табуляции заменяется четырьмя пробелами.
Поскольку инструменты редактирования в разных системах интерпретируют табуляцию по-разному, клавиша табуляции в Windows занимает четыре пробела, а в Linux — восемь пробелов (если вы сами не зададите длину позиции клавиши табуляции).
Например, возвышенный текст, вы можете установить клавишу табуляции в этом инструменте.
3. Используйте строчные буквы для атрибутов меток.
4. Не оставляйте пробелов в конце, чтобы избежать различий.
5. Используйте UTF-8 (без спецификации) и добавьте <meta charset="utf-8″> в документ.
6. Используйте строчные буквы «.js» для имен файлов и рекомендуем «-» вместо «_».
7.TODO(контакт) и TODO: элемент действия, не используйте @@
Спецификация уточнения HTML
1. Особенности использования html5 <!DOCTYPE html>
2. Формат тега <img> по умолчанию: <img src="xxx.png" alt="default text" />, чтобы избежать проблемы src=""
3. Формат тега <a> по умолчанию: <a href="###" title="Имя ссылки">xxx</> Примечание. target="_blank" определяется в соответствии с потребностями.
4. Тег <a> резервирует заполнители ссылок с помощью ###, см.: проблема с заполнителями тегов.
5. При написании адреса ссылки необходимо избегать перенаправления, например: href="http://itaolun.com/", то есть после URL-адреса необходимо добавить "/".
6. Все теги должны быть закрыты в соответствии со стандартами XHTML.
7. Всегда используйте одинаковую форму написания косой черты в конце тега: <br /> <hr /> Обратите внимание на пробел между
8. Избегайте использования устаревших тегов, таких как: <b> <u> <i> и замените их на <strong> <em> и т. д.
9. Используйте data-xxx, чтобы добавить пользовательские данные, например: <input data-xxx="yyy"/>
10. Избегайте использования специальных символов style="xxx:xxx;" во встроенных таблицах стилей с использованием ссылочных объектов HTML-символов.
11. К описательным элементам формы (ввод, текстовая область) необходимо добавлять метки, например <p>Имя: <input type="text" id="name" name="name" /></p> должно быть записано как : < p><label for="name">Имя: </label><input type="text" id="name" /></p>
Спецификация уточнения CSS
1. Добавьте «;» после каждого атрибута стиля.
Удобный инструмент сжатия «сегментация предложений».
2. В названии класса используйте «-» [соединитель знака минус] для разделения букв в классе:
Разделение с помощью "-" более понятно, чем использование верблюжьего регистра.
Линия продуктов-продукт-модуль-субмодуль, вы также можете использовать этот метод при именовании
Идентификатор: номенклатура CamelCase, например:
firstName topBoxList нижний колонтитулАвторские права
3. При использовании помещений применяются следующие правила:
.отель-контент {
начертание шрифта: жирный;
} Перед селектором и { должен быть пробел. После имени атрибута должен быть пробел: После имени атрибута должен быть пробел: Одной из причин добавления пробелов перед (запрещено) является эстетика. Во-вторых, в IE 6 есть ошибка. . Ткни ошибку.
4. (Рекомендуется) Порядок записи атрибутов, например:
.отель-контент {
/* позиция*/
дисплей: блок;
позиция: абсолютная;
слева: 0;
верх: 0;
/* Коробчатая модель */
ширина: 50 пикселей;
высота: 50 пикселей;
поле: 10 пикселей;
граница: 1 пиксель, сплошная черная;
/ *другой* /
цвет: #efefef;
}Общие атрибуты, связанные с позиционированием: ширина, высота, поля, отступы, границы и другие атрибуты, связанные с позиционированием.
Запись в таком порядке может улучшить производительность рендеринга DOM в браузере. Например, если ширина и высота изображения на веб-странице не заданы, до загрузки изображения занимаемое им пространство равно 0, но после этого оно равно 0. загружено, 0-пространство внезапно растягивается, что приводит к перестановке и рендерингу элементов под ним, вызывая перерисовку и перекомпоновку. Когда мы пишем CSS, мы сначала определяем позиционирование элементов. Сначала мы сообщаем браузеру, находится ли элемент внутри или снаружи текстового потока, и где он находится на странице. Затем мы сообщаем браузеру его ширину, высоту и т. д. граница и т. д. Эти атрибуты, которые занимают место, и другие атрибуты отображаются в этой фиксированной области. Примерно это и означает~.
Рекомендуемые статьи:
Результаты опроса: Как вы упорядочиваете свойства CSS?
http://www.mozilla.org/css/base/content.css
5. (Рекомендуется) При написании стилей для определенной структуры HTML используйте имя элемента + имя класса.
/* Все навигаторы написаны для ul*/
ул.нав {
...
} «.a div» и «.a div.b», почему последний лучше? Если потребности изменятся и в разделе «.a» будет добавлен дополнительный элемент div, повлияет ли первоначальный стиль на последующие элементы ~
6. (Не рекомендуется) Использовать фильтр, т.е. (Запрещено) использовать выражение.
Основная проблема здесь — эффективность. Вам следует уделять этому особое внимание и использовать меньше вещей, которые жгут процессор~.
7. Комментарии CSS обозначаются как «/* */». При комментировании одной строки аннотируемый объект, а также предыдущий и следующий символы комментария сохраняют пробел и занимают отдельную строку при комментировании нескольких строк, начиная с комментария; Символ и символ конечного комментария занимают по одной строке каждый. Например:
/* Комментарий CSS */
/*
стол {
граница-коллапс: коллапс;
}
*/Спецификация уточнения JS
1. Разрыв строки
Каждая строка кода должна содержать менее 120 символов. Если она превышает это число, можно использовать новую строку. Такие операторы, как «.» или «+», следует размещать в конце строки. новая строка должна иметь отступ еще на один уровень перед новой строкой.
Если параметры функции или метода длинные, разделите их соответствующим образом.
Разрывы строк между ключевым словом return и возвращаемым выражением запрещены. Например:
// То, что на самом деле возвращается, не определено, а не 1
функция тест() {
возвращаться
1;
} 2. Строки кода
Запрещено писать несколько коротких операторов в одну строку, то есть писать только один оператор в одну строку.
Такие операторы, как if, for, do, while, Switch, Case, default, Break и continue занимают отдельную строку.
Все тела циклов и операторы выполнения тел принятия решений, такие как if, for, do, while и т. д., должны быть заключены в "{}", а фигурные скобки нельзя опускать. Например:
// Неверно, если (i < 5) i += 1;
// Исправить, если (i < 5) {
я += 1
} 3. Выравнивание <br />Разделитель {} блока кода, "{" следует за предыдущей строкой и отделяется пробелом впереди, "}" должен занимать исключительную строку и располагаться в том же столбце, при этом выровнены по левому краю с утверждениями, которые к ним относятся.
Вышеупомянутый метод отступа должен использоваться в начале тела функции, определении класса и программах в операторах if, for, do, while, switch и case.
4. Космос
После ключевого слова должен быть пробел, чтобы выделить ключевое слово.
Между именами функций, именами методов и левой скобкой "(" не может быть пробелов, например:
// Неправильная функция getInfo () {
// код
}
// Правильная функция getInfo() {
// код
}При объявлении функционального выражения между функцией и левой скобкой "(" нельзя оставлять пробел, например:
// Неправильная переменная user = function () {
// код
}
// Исправить var user = function() {
// код
} Добавьте пробел после запятой.
Операторы присваивания, операторы сравнения, арифметические операторы, логические операторы, операторы битовых полей, такие как "=", "+=" ">=", "<=", "+", "*", "%", "&&" ", "||" и другим бинарным операторам должны предшествовать и следовать за пробелами.
До и после унарных операторов, таких как «!», «~», «++», «--» и «&» (оператор адреса), нет пробелов.
До и после "." и "[]" пробелов нет.
5. Пустая строка
Добавьте пустую строку после каждого объявления класса и в конце каждого определения функции.
Внутри тела функции логически тесно связанные операторы не должны разделяться пустыми строками, а другие места должны быть разделены пустыми строками.
6. Используйте строгие условные операторы. Используйте === вместо == и !== вместо !=
7. Избегайте лишних запятых. Например: var arr = [1,2,3,]
8. Все операторы должны заканчиваться точкой с запятой, за исключением function, if, switch, try и while.
9. Поместите левую фигурную скобку в конце строки и правую фигурную скобку в начале строки.
10. Не рекомендуется использовать new для создания следующих типов объектов: новое число, новая строка, новое логическое значение, новый объект (заменить на {}), новый массив (заменить на []).
11. После «,» между элементами массива должен быть пробел.
12. Запрещено использовать зарезервированные ключевые слова javascript в js/json, что может легко вызвать ошибки в IE. Ключевые слова (break, case, catch, continue, default, delete, do, else, наконец, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while , с), ключевые слова (абстрактные, логические, байтовые, символьные, классы, con st, отладчик, двойной, перечисление, экспорт, расширяет, fimal, float, goto, реализует, импорт, int, интерфейс, длинный, mative, пакет, частный, защищенный, публичный, короткий, статический, супер, синхронизированный, выдает, временный, летучий).
13. В качестве соединителя новой строки рекомендуется использовать «+» вместо «".
14. В подсказке запрещено использовать общие языковые описания. Увидев информацию, вы сможете сразу обнаружить ошибку. Например, при запросе информации о пользователе сообщить об ошибке используйте «Этот пользователь не существует». » вместо «Данные, возвращаемые фоном, неверны», «Тайм-аут сети».