1. Стандарты кодирования
1.1 Структура проекта
---/html/ |---- /index |---- /index/index.html 首页 |---- /user/ 与用户相关的页面 |---- /user/login.html 登录页 ---/css/ |---- /base.css 重置浏览器样式 |---- /page 逻辑页面的css |---- /page/pagename.css 单独书写的css |---- /common.css css通用样式库 ---/js/ |---- /lib 公用组件 |---- /lib/jquery.2.2.3.min.js 调用jq库文件 |---- /page 逻辑页面的js |---- /page/pagename.js 单独书写的js |---- /common.js 公用方法 ---/img/ |---- /page 页面对应的图片 |---- /page/wap 手机端图片夹 |---- /page/wap/wap_icon.png 手机端图标 |---- /logo.png 公用图片
1.2 Соглашения об именовании проекта
Проект: назовите его, используя соответствующее английское слово для проекта
Файлы и папки:
- Разрешены только строчные английские буквы и дефисы (средние тире), другие символы не допускаются, например: login, my-order
- Файлы, подключаемые из `/lib`, должны включать номер версии; сжатые файлы должны включать ключевое слово `min`; другие плагины могут его не указывать, например: `/lib/jquery.1.9.1.js`
1.3 Формат и кодировка
- Текстовые файлы: `.xxx` кодировка UTF-8_(без BOM)_
- Файлы изображений: `.png` _(PNG-24)_ `.jpg` _(коэффициент сжатия 8-12)_
- Анимированные изображения: `.gif`
- Сжатые файлы: `.tar.gz` `.zip` `.rar`
2. Стандарты CSS
2.1 Соглашения об именовании CSS
- Все имена должны состоять из английских слов в нижнем регистре
- Не используйте простые слова, обозначающие направления, непосредственно в качестве имен, например "left", "bottom"
- Не используйте сокращения, если они не понятны сразу
- В длинных именах или фразах можно использовать подчеркивания в качестве соединителей
- Избегайте чрезмерного количества уровней вложенности селекторов; не превышайте 3 уровней
- Не используйте ids произвольно; ids следует использовать по мере необходимости и не злоупотреблять ими
- Используйте сокращенные свойства CSS, такие как padding:0 10px 5px 5px, и т. д. Это делает код более компактным и улучшает удобство чтения для пользователя.
Справочник по именованию выглядит следующим образом:
| Именование стилей CSS | Описание |
|---|---|
| Распространенное именование веб-страниц | |
| wrapper | Внешняя обёртка страницы, управляющая общей шириной макета |
| container или content | Container, используется для самого внешнего слоя |
| layout | Layout |
| head, header | Секция заголовка |
| foot, footer | Секция футера |
| nav | Основная навигация |
| sub_nav | Вторичная навигация |
| menu | Меню |
| sub_menu | Подменю |
| side_bar | Боковая панель |
| sidebar_l, sidebar_r | Левая боковая панель или правая боковая панель |
| main | Основное содержимое страницы |
| тег | Тег |
| сообщение msg | Сообщение-подсказка/совет |
| tips | Советы/приёмы |
| vote | Голосование |
| friendlink | Дружественные ссылки |
| title | Title |
| summary | Резюме/Аннотация |
| login_bar | Панель входа |
| search_input | Поле поиска |
| hot | Горячие темы/тренды |
| search | Поиск |
| search_output | Вывод поиска похож на результаты поиска |
| search_bar | Строка поиска |
| search_results | Результаты поиска |
| авторские права | Информация об авторских правах |
| branding | Товарный знак |
| logo | Логотип сайта |
| site_info | Информация о сайте |
| site_info_legal | Правовая информация |
| site_info_credits | Достоверность/Доверие |
| join_us | Присоединяйтесь к нам |
| partner | Партнеры |
| service | Сервисы |
| регистрация | Регистрация |
| стрелка | Стрелка |
| гильдия | Руководство |
| site_map | Карта сайта |
| list | Список |
| home_page | Главная страница |
| sub_page | Второстепенные/подстраницы |
| инструмент, панель инструментов | Панель инструментов |
| drop | Выпадающий список |
| dorp_menu | Выпадающее меню |
| status | Status |
| scroll | Прокрутка |
| tab | Страница вкладки |
| слева справа по центру | Выравнивание по левому краю, по центру, по правому краю |
| news | Новости |
| download | Скачать |
| баннер | Баннер (верхний рекламный баннер) |
2.2 Стандарты написания CSS
Следуйте принципу «без ID, без уровней вложенности, без тегов», чтобы эффективно повысить переиспользуемость, уменьшить размер файла и повысить эффективность рендеринга
2.3 Формат комментариев CSS
Комментарии, используемые для различения страниц, например: /******************************************Центр продукции****************************************/
Комментарии к модулю, например: /*Панель навигации главной страницы*/
2.4 Порядок свойств CSS: не строго обязателен
- Позиционирование (например, position, top, z-index)
- Блочная модель (например, display, box-sizing, width, border)
- Типографические (например, font, line-height, text-align)
- Визуальные (например, background, color, opacity)
- Прочие (например, cursor)
Поскольку позиционирование может удалять элементы из нормального потока документа и также может переопределять стили, связанные с блочной моделью, оно размещается первым. Блочная модель определяет размер и положение компонента, поэтому она размещается второй. Другие свойства влияют только на внутреннюю часть компонента или не влияют на первые две группы свойств, поэтому они размещаются последними.
2.5 Форматирование CSS
Пишите без переносов, чтобы увеличить скорость написания
.box{background: none repeat scroll 0 0 transparent;bottom: 11px;position: relative;width: 22px;z-index: 33;}
2.6 Единицы измерения шрифта CSS
- px — это пиксель (Pixel), относительная единица длины. Пиксель px зависит от разрешения экрана монитора.
- em — относительная единица длины. Она зависит от размера шрифта текста внутри текущего объекта. Если размер шрифта текущего строчного текста не был задан вручную, она зависит от размера шрифта браузера по умолчанию.
- rem — также относительная единица длины, но она относительна только к корневому элементу HTML.
- vw представляет 1% ширины области просмотра. Если ширина области просмотра равна 1000px, то 50vw = 500px
- vh представляет процент от высоты области просмотра. Если высота области просмотра равна 800px, то 50vh = 400px
- Примечания по использованию в проектах компании: во всех существующих проектах в качестве единицы используется px. Теперь рекомендуется использовать rem, vw, vh в качестве единиц измерения
3. Стандарты JS
3.1 Соглашения об именовании JS
3.1.1 Именование переменных JS
Способ именования: lower camel case
Соглашение об именовании: префикс должен быть существительным. (Имена функций имеют глагольные префиксы, чтобы отличать функции от переменных)
Рекомендация по именованию: старайтесь отражать тип в имени переменной, например length, count и т. д., для числовых типов; и имена, содержащие name, title, для строковых типов.
Пример
// 好的命名方式 var maxCount = 10; var tableTitle = 'LoginTable'; // 不好的命名方式 var setCount = 10; var getTitle = 'LoginTable';
3.1.2 Именование функций JS
Способ именования: lower camel case
Соглашение об именовании: префикс должен быть глаголом
Рекомендация по именованию: можно использовать общепринятые глагольные соглашения
| Глагол | Значение | Возвращаемое значение |
| can | Определяет, можно ли выполнить действие (разрешение) | Функция возвращает логическое значение. true: выполнимо; false: невыполнимо |
| has | Определяет, содержится ли определённое значение | Функция возвращает логическое значение. true: содержит это значение; false: не содержит это значение |
| является | Определяет, является ли оно определённым значением | Функция возвращает логическое значение. true: является определённым значением; false: не является определённым значением |
| get | Получает определённое значение | Функция возвращает значение, не являющееся логическим |
| set | Устанавливает определённое значение | Нет возвращаемого значения, возвращает признак успешности установки или возвращает объект, поддерживающий цепочку |
| load | Загружает некоторые данные | Не возвращает значение или возвращает результат того, завершена ли загрузка |
3.1.3 Именование констант JS
Способ именования: все заглавные буквы
Соглашение об именовании: используйте сочетание заглавных букв и подчёркиваний для именования; подчёркивания используются для разделения слов
Пример
var MAX_COUNT = 10; var URL = 'http://www.example.com';
3.1.4 Именование файлов JS
Используйте дефисы (-) или точки (.) в качестве разделителей; рекомендуются точки. Предпочтительно использовать строчные английские буквы, не используйте другие символы или расширенные символы. Например, исходный файл jQuery UI 1.9.0 можно назвать "jquery-ui-1.9.0.js"
Используйте расширение .js, которое обладает наилучшей совместимостью. Фактически, подходит любое расширение, если это текстовый тип и правильная кодировка.
Используйте точки для указания подчинённых связей в именах, начиная с более широкой области. Например, плагин формы Form для jQuery можно назвать jquery.form.js.
3.2 Формат комментариев JS
Используйте многострочные комментарии, начинающиеся с /* и заканчивающиеся */
3.3 Примечания по JS
Форматирование
- Отступ при переносе строк в JS: используйте табуляцию (расширяется до 4 пробелов)
- Завершайте строки точкой с запятой `;`
Производительность
- Старайтесь использовать локальные переменные вместо глобальных
- Старайтесь использовать цепочный стиль
- Сведите к минимуму вызовы DOM
- Размещайте JS-скрипты внизу страницы
- Используйте data в jQuery для хранения и извлечения данных, сокращая операции с DOM
- Используйте метод on для привязки событий; это рекомендуемая практика jQuery
- Выбор селекторов: старайтесь не использовать селекторы тегов; если можно использовать селектор ID, не используйте селектор класса
4. Стандарты HTML
4.1 Стандарты использования тегов
Сведите к минимуму иерархию тегов
Парные теги должны быть закрыты; одиночные теги закрываются слэшем
Первая строка HTML должна единообразно использовать стандарт HTML5 <!DOCTYPE html>
Единообразно используйте формат с завершающим слэшем для тегов: `<br />` `<hr />` обратите внимание на пробел между ними
Избегайте устаревших тегов, таких как: `<font>` `<frame>` `<s>`
Формат по умолчанию для тега `<img>`: `<img src="../index.html" alt="DefaultwhentextCharacter" />`
Формат по умолчанию для тега `<a>`: `<a href="../index.html" title="LinksName">xxx</>` Примечание: `target="_blank"` зависит от требований
style, link, script могут опускать атрибут type, потому что text/css и text/javascript являются их значениями по умолчанию соответственно
4.2 Комментарии HTML
<!--内容--> <div class="content"> <p>content</p> </div>
4.3 Примечания
Для мобильной адаптивной верстки старайтесь использовать гибкую верстку, а не проценты
Все файлы `css` должны размещаться в head
Отступы при переносе строк HTML: используйте табуляцию
Другие файлы эффектов `js` и `statistics code` должны располагаться внизу
Мобильные страницы должны разрабатываться с шириной 750px, а отображаться при 375px
5. Стандарты изображений
5.1 Стандарты изображений
Размер изображения: используйте веб-формат при нарезке изображений, чтобы уменьшить размер файла
Размеры изображения: всегда используйте целые числа, например, 20X20, 50X50
Объединение изображений: маленькие изображения необходимо объединять, а соответствующие PSD-файлы следует сохранять для последующих изменений
Исходная ссылка: https://lingdianit-com.github.io/Front-End-Standards/