前端命名规范

(一)

主体头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center登录条:loginbar标志:logo广告:banner页面主体:main热点:hot新闻:news下载:download子导航:subnav菜单:menu子菜单:submenu搜索:search友情链接:friendlink页脚:footer版权:copyright滚动:scroll内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title加入:joinus指南:guild服务:service注册:regsiter状态:status投票:vote合作伙伴:partner

(二)

css注释的写法: 内容区Html注释的写法 :<!--header头部-- >

(三)

id的命名:

(1)页面结构容器: container页头:header内容:content/container页面主体:main页尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center

(2)导航导航:nav主导航:mainnav子导航:subnav顶导航:topnav边导航:sidebar左导航:leftsidebar右导航:rightsidebar菜单:menu子菜单:submenu标题: title摘要: summary

(3)功能标志:logo广告:banner登陆:login登录条:loginbar注册:regsiter搜索:search功能区:shop标题:title加入:joinus状态:status按钮:btn滚动:scroll标签页:tab文章列表:list提示信息:msg当前的: current小技巧:tips图标: icon注释:note指南:guild服务:service热点:hot新闻:news下载:download投票:vote合作伙伴:partner友情链接:link版权:copyright

(四)

class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如 .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; }

(2)字体大小,直接使用’font+字体大小’作为名称,如 .font12px { font-size: 12px; } .font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如 .left { float:left; } .bottom { float:bottom; }

(4)标题栏样式,使用’类别+功能’的方式命名,如 .barnews { } .barproduct { }

注意事项:: 1.一律小写; 2.尽量用英文; 3.不加中杠和下划线; 4.尽量不缩写,除非一看就明白的单词.

主要的master.css 模块 module.css 基本共用 base.css 布局,版面layout.css 主题 themes.css 专栏 columns.css 文字 font.css 表单 forms.css 补丁 mend.css 打印print.css

原文地址:https://www.cnblogs.com/hongyaxi/p/9408376.html

时间: 2024-10-17 04:44:25

前端命名规范的相关文章

常用html、CSS、javascript前端命名规范

常用html.CSS.javascript前端命名规范 无意发现自己文件夹里面有这么一个文件,具体从哪里来的不记得了,仔细看下,发现总结的挺好的,贴出来分享一下. 无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本

要想成为前端大神,那些你不得不知晓的web前端命名规范。

一.Web语义化 1.1 H5的语义化 对于经验资深的前端er,在给web布局时,相信都会很注重标签和命名的规范.尤其是随着html5的普及发展,更是把web前端语义化推向一个新的台阶上.比如html5给我们新增的语义标签:header.nav.main.aside.footer.section.article等等.那么对于web语义化,有什么优势呢? 1.2 语义化优势 可以让人一目了然代码结构块,对于项目的维护或者优化都是非常有意义的. 语义化能提高页面SEO.如:<header><

后端前端命名规范

python命名规范:#类名class(静态变量): 单词首字母大写AdStats,MyClass#全局变量名:大写字母,单词之间用_分割COLOR_WRITE,from M import *导入语句#实例变量:以_开头_instance_var#私有实例变量(外部访问会报错): 以__开头(2个下划线)__private_var# 专有变量:__开头,__结尾__doc__,python的自有变量,不要以这种方式命名XXx # 普通函数:get_name() fn_my_example() #

web前端命名规范

在做web项目的时候,命名的规范是很重要.初学者一般急于求成对命名规范没有概念,觉得花时间这些还不如多看几遍框架.其实在我看来,一个良好的命名习惯是很重要的.下面就来介绍一下我总结的命名规范: (1) 1.全部用小写字母 2.不用拼音 (2) 页面主体:main; 整体布局:wrapper; 页面的头部:header; 标志:logo; 导航:nav; 菜单:menu; 子菜单:submenu; 标题:title; 主导航:mainnav; 子导航:subnav; 搜索:search; 内容:c

简单好用的CSS命名规范

CSS命名规范 BEM命名法 BEM(Block, Element, Modifier)是由Yandex团队提出的一种前端命名规范.其核心思想是将页面拆分成一个个独立的富有语义的块(blocks),从而使得团队在开发复杂的项目变得高效,并且十分有利于代码复用,即便团队引入新成员,也容易维护. Block是块,比方说div.header,可以嵌套复用.更严格一点来说不能影响自身布局,最好不要设置margin和position,也不要使用元素选择器和ID选择器. Element是元素,比方说inpu

前端CSS命名规范大全

文章整理了Web前端开发中的各种CSS规范,包括文件规范.注释规范.命名规范.书写规范.测试规范等. 一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用UI元素样式库 /css/lib JS组件相关样式库 /css/ui 业务类的CSS是指和具体产品相关的文件,放在如下目录中: 读书 /css/book/ 电影 /css/movie/ 音乐 /css

web前端开发规范

本文原创,这里首先声明,转载注明本文出处,翻版必究! web前端开发规范的现实意义 1.提高团队的协作能力 2.提高代码的重复利用率 3.可以写出质量更高,效率更好的代码 4.为后期维护提供更好的支持 5.可读性高 一.命名规则 1.html命名规则: a.文件名称命名规则:统一使用小写英文字母.数字.下划线的组合,不得包含汉字空格和特殊字符 2.命名原则:方便理解.方便查找 b.索引文件命名原则:index.html.index.htm.index.asp.index.aspx.index.j

Web前端开发规范手册

一.规范目的 1.1 概述 ..................................................................................................................................... 1 二.文件规范 2.1 文件命名规则...................................................................................

前端开发规范

前端开发规范 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 文件规范 1. html, css, js, images文件均归档至<系统开发规范>约定的目录中; 2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面; 3. css文件命名: 英文命名, 后缀