1. Estándares de escritura
1.1 Estructura del proyecto
---/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 Estándares de nomenclatura de proyectos
Proyecto: nombrar con la palabra en inglés correspondiente al proyecto
Archivos y carpetas:
- Todas las letras en minúsculas en inglés, se puede usar guion medio, no pueden aparecer otros caracteres, como login, my-order
- Al llamar a archivos en `/lib`, se debe incluir el número de versión; los archivos comprimidos deben incluir la palabra clave `min`; otros complementos pueden no incluirlo, como: `/lib/jquery.1.9.1.js`
1.3 Formato y codificación
- Archivos de texto: codificación `.xxx` UTF-8 (sin BOM)
- Archivos de imagen: `.png` (PNG-24) `.jpg` (tasa de compresión 8-12)
- Imágenes dinámicas: `.gif`
- Archivos comprimidos: `.tar.gz` `.zip` `.rar`
2. Estándares de CSS
2.1 Estándares de nomenclatura de CSS
- Todos los nombres usan palabras en inglés en minúsculas
- No usar palabras de orientación simples directamente como nombres, como "left", "bottom"
- No abreviar palabras, a menos que sean palabras obvias a primera vista
- Para nombres largos o frases se puede usar el guion bajo como conector
- Evitar demasiados niveles de anidación de selectores; menos de 3 niveles
- No usar id de forma arbitraria; los id deben usarse según sea necesario, no abusar de ellos
- Usar propiedades abreviadas de CSS, como padding: 0 10px 5px 5px, etc. Esto simplifica el código y además mejora la experiencia de lectura del usuario.
Referencia de nomenclatura a continuación:
| Nomenclatura de estilos CSS | Descripción |
|---|---|
| Nomenclatura pública de la página web | |
| wrapper | El perímetro de la página controla el ancho del diseño general |
| container o content | Contenedor, utilizado para la capa más externa |
| layout | Diseño |
| head, header | Parte del encabezado de página |
| foot, footer | Parte del pie de página |
| nav | Navegación principal |
| sub_nav | Navegación secundaria |
| menu | Menú |
| sub_menu | Submenú |
| side_bar | Barra lateral |
| sidebar_l, sidebar_r | Barra izquierda o barra derecha |
| main | Cuerpo de la página |
| tag | Etiqueta |
| msg message | Mensaje de aviso |
| tips | Truco |
| vote | Votación |
| friendlink | Enlaces de amigos |
| title | Título |
| summary | Resumen |
| login_bar | Barra de inicio de sesión |
| search_input | Campo de entrada de búsqueda |
| hot | Popular |
| search | Buscar |
| search_output | La salida de búsqueda es similar a los resultados de búsqueda |
| search_bar | Barra de búsqueda |
| search_results | Resultados de búsqueda |
| copyright | Información de derechos de autor |
| branding | Marca comercial |
| logo | Logotipo del sitio web |
| site_info | Información del sitio web |
| site_info_legal | Aviso legal |
| site_info_credits | Reputación |
| join_us | Únete a nosotros |
| partner | Socios |
| service | Servicios |
| regsiter | Registro |
| arr arrow | Flecha |
| guild | Guía |
| site_map | Mapa del sitio |
| list | Lista |
| home_page | Página de inicio |
| sub_page | Subpáginas de páginas de segundo nivel |
| tool, toolbar | Barra de herramientas |
| drop | Desplegable |
| dorp_menu | Menú desplegable |
| status | Estado |
| scroll | Desplazamiento |
| tab | Pestañas |
| left right center | Alinear a la izquierda, centro, derecha |
| news | Noticias |
| download | Descargas |
| banner | Barra de anuncios (barra de anuncios superior) |
2.2 Estándares de escritura de CSS
Acercarse a la regla de "sin ID, sin jerarquía, sin etiquetas" para mejorar eficazmente la reutilización, reducir el tamaño del archivo y aumentar la eficiencia de renderizado.
2.3 Formato de comentarios en CSS
Comentarios utilizados para distinguir páginas, como /******************************************Centro de productos****************************************/
Comentarios de módulo, como /*Barra de navegación de la página de inicio*/
2.4 Orden de las propiedades CSS: no es un requisito estricto
- Positioning (posicionamiento, como position, top, z-index)
- Box model (modelo de caja, como display, box-sizing, width, border)
- Typographic (tipografía, como font, line-height, text-align)
- Visual (visual, como background, color, opacity)
- Other (otros, como cursor)
Debido a que el posicionamiento (positioning) puede eliminar elementos del flujo normal del documento y también puede anular los estilos relacionados con el modelo de caja (box model), se coloca en primer lugar. El modelo de caja determina el tamaño y la posición de los componentes, por lo que se coloca en segundo lugar. Las demás propiedades solo afectan el interior del componente o no afectan los dos primeros grupos de propiedades, por lo que se colocan al final.
2.5 Formato CSS
Escribir sin saltos de línea para aumentar la velocidad de escritura
.box{background: none repeat scroll 0 0 transparent;bottom: 11px;position: relative;width: 22px;z-index: 33;}
2.6 Unidades de fuente en CSS
- px píxel (Pixel), unidad de longitud relativa, el píxel px es relativo a la resolución de la pantalla del monitor.
- em es una unidad de longitud relativa. Relativa al tamaño de fuente del texto dentro del objeto actual. Si el tamaño de fuente del texto en línea actual no se ha configurado manualmente, entonces es relativo al tamaño de fuente predeterminado del navegador.
- rem también es una unidad de longitud relativa, pero relativa únicamente al elemento raíz de HTML.
- vw representa el 1% del ancho de la ventana gráfica (Viewport). Si el ancho de la ventana gráfica es 1000px, entonces 50vw = 500px
- vh representa el porcentaje de la altura de la ventana gráfica. Si la altura de la ventana gráfica es 800px, entonces 50vh = 400px
- Notas para el uso en proyectos de la empresa: los proyectos existentes usan px como unidad; ahora se recomienda usar rem, vw, vh como unidades.
3. Estándares de JS
3.1 Estándares de nomenclatura de JS
3.1.1 Nomenclatura de variables en JS
Método de nomenclatura: nomenclatura de camello bajo (lowerCamelCase)
Regla de nomenclatura: el prefijo debe ser un sustantivo. (El prefijo del nombre de las funciones debe ser un verbo, para distinguir variables de funciones)
Sugerencia de nomenclatura: procurar reflejar el tipo en el nombre de la variable, como length, count, etc., que representan tipos numéricos; mientras que los que contienen name, title representan tipos de cadena.
Ejemplo
// 好的命名方式 var maxCount = 10; var tableTitle = 'LoginTable'; // 不好的命名方式 var setCount = 10; var getTitle = 'LoginTable';
3.1.2 Nomenclatura de funciones en JS
Método de nomenclatura: nomenclatura de camello bajo (lowerCamelCase)
Regla de nomenclatura: el prefijo debe ser un verbo
Sugerencia de nomenclatura: se pueden usar convenciones de verbos comunes
| Verbo | Significado | Valor de retorno |
| can | Verificar si se puede ejecutar una acción (permiso) | La función devuelve un valor booleano. true: se puede ejecutar; false: no se puede ejecutar |
| has | Verificar si contiene un valor | La función devuelve un valor booleano. true: contiene ese valor; false: no contiene ese valor |
| is | Verificar si es un valor | La función devuelve un valor booleano. true: es un valor; false: no es un valor |
| get | Obtener un valor | La función devuelve un valor no booleano |
| set | Establecer un valor | Sin valor de retorno, devuelve si se configuró correctamente o devuelve un objeto encadenable |
| load | Cargar algunos datos | Sin valor de retorno o devuelve el resultado de si la carga se completó |
3.1.3 Nomenclatura de constantes en JS
Método de nomenclatura: todos los nombres en mayúsculas
Regla de nomenclatura: usar letras mayúsculas y guiones bajos para combinar el nombre; el guion bajo se usa para separar palabras
Ejemplo
var MAX_COUNT = 10; var URL = 'http://www.example.com';
3.1.4 Nomenclatura de archivos JS
Usar guion corto (-) o punto (.) como separadores; se recomienda usar el punto, preferiblemente con caracteres en minúsculas en inglés; no usar otros símbolos ni caracteres extendidos. Por ejemplo, el archivo fuente de jQuery UI 1.9.0 podría llamarse "jquery-ui-1.9.0.js".
Usar la extensión .js, es la que tiene mejor compatibilidad. En realidad, cualquier extensión es válida siempre que sea de tipo texto y tenga la codificación correcta.
Usar puntos para separar las relaciones de subordinación en los nombres; el ámbito mayor va primero. Por ejemplo, el plugin de formularios de jQuery, Form, puede nombrarse como jquery.form.js.
3.2 Formato de comentarios JS
Usar comentarios multilínea, que comiencen con /* y terminen con */
3.3 Consideraciones sobre JS
Formato de escritura
- Sangría de salto de línea en JS: usar tab (expandido a 4 espacios)
- Las líneas finales deben llevar punto y coma `;`
Rendimiento
- Preferir variables locales en lugar de variables globales
- Usar en la medida de lo posible la escritura en cadena
- Minimizar las llamadas al DOM
- Colocar los scripts JS al final de la página
- Usar data de jQuery para almacenar y obtener datos, reduciendo las operaciones sobre el DOM
- Usar el método on para vincular eventos; es lo recomendado por jQuery
- Selección de selectores: evitar en lo posible los selectores de etiqueta; si se puede usar un selector de ID, no usar selector de clase
4. Estándares de HTML
4.1 Estándares de uso de etiquetas
Reducir al mínimo los niveles de anidamiento de etiquetas
Las etiquetas dobles deben cerrarse; las etiquetas simples se cierran con barra inclinada
La primera línea de HTML debe usar de forma uniforme el estándar HTML5 <!DOCTYPE html>
Unificar la forma de escribir la barra inclinada final de las etiquetas: `<br />` `<hr />` (nota: dejar un espacio entre ambas)
Evitar el uso de etiquetas obsoletas, como: `<font>` `<frame>` `<s>`
Formato predeterminado de la etiqueta `<img>`: `<img src="../index.html" alt="texto predeterminado" />`
Formato predeterminado de la etiqueta `<a>`: `<a href="../index.html" title="nombre del enlace">xxx</>` Nota: `target="_blank"` se decide según los requisitos
style, link y script pueden omitir el atributo type, ya que text/css y text/javascript son sus valores predeterminados respectivamente
4.2 Comentarios HTML
<!--内容--> <div class="content"> <p>content</p> </div>
4.3 Precauciones
El diseño adaptativo para móviles debe usar en lo posible diseño flexible (flexbox), en lugar de porcentajes
Los archivos `css` se colocan todos en la cabecera
Sangría de salto de línea en HTML: usar espacio de tab
Los demás archivos de efectos `js` y `código de estadísticas` se colocan al final
Las páginas para móviles se diseñan a 750px, y el efecto de visualización se basa en 375px
5. Estándares de imagen
5.1 Estándares de imágenes
Tamaño de imagen: al recortar imágenes, guardar en formato web para reducir el tamaño de la imagen
Dimensiones de imagen: usar siempre números enteros, como 20X20, 50X50
Combinación de imágenes: las imágenes pequeñas siempre deben combinarse, y se debe guardar el archivo psd correspondiente para poder modificarlas posteriormente
Enlace original: https://lingdianit-com.github.io/Front-End-Standards/