文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

通过分析Github众多前端代码库，总结出来的前端代码书写规范

-- Avoid @imports -->@import url("more.css"); 媒体查询位置 尽量将媒体查询的位置靠近他们相关的规则。...所有包含多条声明的声明块应该分为多行。 这样做的关键因素是错误检测 - 例如，一个 CSS 验证程序显示你在 183 行有一个语法错误,如果是一个单条声明的行，那就是他了。...使用 .js-* 来表示行为(相对于样式)，但是不要在 CSS 中包含这些 class。 选择器 使用 class 而不是通用元素标签来优化渲染性能。...location4.js";} 空行 方法之间加 单行或多行注释前加 逻辑块之间加空行增加可读性 变量命名 标准变量采用驼峰标识 使用的ID的地方一定全大写 使用的URL的地方一定全大写, 比如说 reportURL.../ 何时使用多行注释格式 难于理解的代码段 可能存在错误的代码段 浏览器特殊的HACK代码 业务逻辑强相关的代码 想吐槽的产品逻辑, 合作同事 文档注释 各类标签 @param @method 等 参考

1.1K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    前端学习的编辑器介绍

    (必备) 　　自动闭合HTML/XML标签 2.Auto Rename Tag (必备) 　　自动完成另一侧标签的同步修改 3.Beautify (必备)       格式化 html ,js,css...4.Bracket Pair Colorizer (必备) 　　给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 5.Debugger for Chrome (推荐) 　　...必备) 　　智能提示HTML标签，以及标签含义 10.JavaScript(ES6) code snippets (必备) 　　ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx...Control + Shift +↑ 向上面一行添加游标 Control + Shift + ↓ 向下面一行添加游标 Command + J 删除当前行与下一行内容合并成一行（光标未选中多行内容的时候...） 或 将多行内容合并成一行（已选择需要合并的多行时） Option + Shift +↑ 向上复制一行 Option + Shift + ↓ 向下复制一行 Option + → 以单词为单位向后移动光标

    1.5K80

    sublimeText3之码上有爱

    编辑类 Ctrl+J:合并选中多行代码为一行:将多行格式的css属性合并为一行 ctrl+shift+D:复制光标所在的整行,插入到下一行 Tab 向右缩进。...使用方法：选中要调整的行，然后按 Ctrl+ Alt + A (若是插件的快捷键与电脑中某些软件的快捷键冲突,那么可以自定义快捷键),当然对齐格式化代码,最好的插件还有别的,比如 HTML-CSS-JS...HTML-CSS-JS Prettify 使用说明：快速格式化html css js 快捷键： ctrl+shift+h也可以鼠标右键操作, 安装插件后，直接使用时没有效果的,会提示nodejs not...,HTML5标签提示sublime text3自带，不过JQuery提示还是很有用处的，也可设置要提示的语言 17. translate-CN中英互译插件 无论是css中的class,Id,js中命名是件很纠结的事情...,HTML/XML标签缩进、补全和校验 BracketHighlighter类似于代码匹配，可以匹配括号 autofilename自动关联图片,css,js等资源路径插件 MarkdownEditing

    1.4K30

    深入扩展文本溢出解决方案

    阅读本文你将看到如下几部分内容: 单行文本溢出 多行文本溢出 拓展的多行文本溢出 自定义多行文本溢出 高亮多行文本溢出 单行文本溢出 一行文本超出显示是一个最基本的超出最大宽度，显示省略号[1]，效果如图所示...也可以使用封装好的库clamp-js-main[2] npm i clamp-js-main 的多行文本溢出 在支持了多行文本溢出显示省略号的功能之后，产品同学又发现体验不友好的点，如下图所示，文本在第二行开头处就结束了,这就导致第二行大部分是空白的内容，影响了美观度。 ?...一种思路是，通过几种不同名称的标签分别包裹需要高亮的文本，每一种标签会对应一种高亮样式，这样的话，在获得源文本后，首先通过词法分析将源文本中的标签解析出来，后面的流程就跟上图步骤 1 后面的流程类似了。...参考资料 [1] css 多行文字溢出打点省略号: https://blog.csdn.net/c_kite/article/details/81486953 [2] clamp-js-main: https

    1.5K20

    前端day07-JS学习笔记

    .js"> 2-细节注意点 1.无论是CSS还是JS的三种写法，当一个html文件存在多种写法时要记住HTML的代码是从上往下解析的 2.如果script标签没有src属性则表示内联样式...，如果有src属性则表示外联样式，外联样式JS代码只能写在 js文件中而不能写在script标签中 1.3-JS注释两种写法 代码注释的作用： 1.理清思路，方便自己以后阅读代码 2.规范编程，方便以后别人接手代码便于维护...JS注释有两种写法 // 注释内容:单行注释：注释内容只能是一行，适用于注释内容较少 /* 注释内容 */:多行注释：注释内容可以是多行，适用于注释内容较多，比如一行写不下 1.4-JS常用五句话 JS...2.直接量 : 可以直接使用的数据 （能够被编译器识别的数据） * 哪些数据可以被识别 ： 必须要符合js的数据类型 3.数据类型 : js代码在运行时会产生不同的数据，不同的数据存储与处理方式不一样...：语法错误 第二：数据不识别 2.在js中，只有符合数据类型的数据才能被识别 3.数据类型:软件在运行时，会产生数据，数据有很多种，不同的数据CPU的处理方式不同 所以需要对数据进行分类，不同的数据对应不同的类型

    1.1K00

    每天10个前端小知识 【Day 18】

    前端面试基础知识题 1.如何实现单行／多行文本溢出的省略样式？...对于文本的溢出，我们可以分成两种形式： 单行文本溢出 多行文本溢出 实现方式 单行文本溢出省略 理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现 实现方式也很简单，涉及的css属性有： text-overflow...响应式截断，根据不同宽度做出调整 一般文本存在英文的时候，可以设置word-break: break-all使一个单词能够在换行时进行拆分 基于行数截断 纯css实现也非常简单，核心的css代码如下...因此，CSS加载是会阻塞Dom的渲染的。 由于js可能会操作之前的Dom节点和css样式，因此浏览器会维持html中css和js的顺序。因此，样式表会在后面的js执行前先加载执行完毕。...，那么咱们套用进来，图片加载和渲染的时机有可能是下面这样： 解析HTML时，如果遇到img或picture标签，将会加载图片 解析加载的样式，遇到background-image时，并不会加载图片，而会构建样式规则树

    14710

    前端代码规范

    第二部分 编写灵活、稳定、高质量的CSS代码的规范 一、语法 1.1 注意 （1）用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。...六、单行规则声明 6.1 放在一行 对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。...6.2 错误检测 这样做的关键因素是为了错误检测 -- 例如，CSS 校验器指出在 100 行有语法错误。...（6）使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。 在为 Sass 和 Less 变量命名时也可以参考上面列出的各项规范。...十四、编辑器配置 14.1 避免代码不同 将你的编辑器按照下面的配置进行设置，以避免常见的代码不一致和差异： （1）用两个空格代替制表符（soft-tab 即用空格代表 tab 符）。

    2.5K31

    前端之HTML内容

    本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。...4、HTML标签格式 HTML标签是由尖括号包围的关键字，如、等； HTML标签通常是成对出现的，比如：和，第一个标签是开始，第二个标签是结束。...Meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。...主要通过CSS样式为其赋予不同的表现。 span标签用来定义内联（行内）元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。...块级元素和行内元素的区别： 块级元素是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。 这两个元素是专门为定义CSS样式而产生的。

    2.4K90

    jS正则和WEB框架Django的入门

    /m 表示多行匹配 这里的多行匹配需要注意： 默认情况下js的正则匹配就是多行匹配 通过下面例子理解加上m之后的正则匹配 从例子可以看出只匹配到第一行的内容，第二行的并没有匹配，这里是因为整个text是一个字符串...，所以当出现^以什么开头的时候，是从这个字符串开头开始的，所以只能匹配到一个，如果这个时候想要匹配到多个，实现方法就是通过m参数 这样相当于都是把每一行作为一个字符串去匹配所以匹配到第二行的Java 关于事件的执行顺序...有很多标签有自己的事件，同时我们也可以再次给他赋予权限，这样就会产生顺序的问题 默认事件先执行： checkbox标签 自定义事件先执行（大部分都是自定义事件优先级高）： a标签 submit标签 关于...这是目录结构 将css以及js放在一个static目录下 login.html代码如下： <!...(BASE_DIR,'static'), ) css中给背景添加了灰色 从结果中也可以看出js和css都加载成功 获取用户的信息 views.py中的代码如下： from django.shortcuts

    2.1K60

    HTML+CSS【规范】

    ，不能再包含块级元素 h1、h2、h3、h4、h5、h6、p、dt D 块级元素不能放在标签p里面 E li 标签可以包含 div 标签，因为li 和 div 标签都是装载内容的容器...在xhtml标准中规定了所有标签、属性和值都小写，CSS 书写也应该遵循此约定。 7.选择器 当一个规则包含多个选择器时，每个选择器独占一行。 、+、~、> 选择器的两边各保留一个空格。.../* 表格隔行变色 */ 多行注释 星号要一列对齐，星号与内容之间必须保留一个空格。...Do that up here if it's important enough. */ 规则声明块内注释 使用 // 注释，// 后面加上一个空格，注释独立一行。...11.CSS命名规范（规则） 常用的CSS命名规则 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度

    81650

    前端-HTML-web服务本质-HTTP协议-请求-标签-01(待完善)

    ） head 中的标签 title style link script meta title 标题标签 style 样式标签 link 外部样式引用标签 script js脚本标签 meta 这一块儿的标签不展示给用户看...要想让你的页面能够被浏览器正常显示出来，你所写的页面就必须遵循html标记语法，也就意味着，所有能够被浏览器显示出来的页面，内部都是html代码 浏览器只认识 html、css、js HTML...-- 多行注释1 多行注释2 --> 通常况下，html的注释都会按照下面的方式书写 写网页的一套标准 ...导航条样式代码... 标签 可以在里面写css样式，美化html渲染效果 link 外部样式引用标签 专门用来引入外部css文件 script js脚本标签 内部支持写js代码，也支持导入外部的js文件 meta 这一块儿的标签不展示给用户看... span标签用来定义内联(行内)元素，并无实际的意义。 div 和 span 通常都是用来搭建网页布局的，主要通过CSS样式为其赋予不同的表现。

    89920

    前端培训二：前端代码规范

    能避免时尽量避免，除非必须用 禁忌 【强制】“结构层，行为层，表现层”分离这是基本的原则，页面中不允许出现css内容(包括行内样式和style) 【强制】Js必须放到body结束标签前，禁止放在head...小图片（必须）sprite 合并 每个样式属性后加 ";" 为了获得更准确的错误报告，每条声明都应该独占一行，禁止将样式写为单行,这个应该是压缩工具做的事 禁止使用行内样式 /* Bad CSS */...盒模型排在第二位，因为它决定了组件的尺寸和位置。 其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。...语义化如 、，内容优先，表现为辅 表示状态的class，不准单独使用，可以嵌套或者堆叠使用 优化css选择器 避免使用通配规则 class和id选择器都不要限定（div#header）...===会先判断两边的值类型，类型不匹配时为false。 操作DOM的时候，尽量减少重绘，有js操作的时候不管是class或者id命名都以js-开头 Post Views: 324

    1.1K20

    Cytoscape中文教程（2）

    SBML BioPAX PSI-MI Level 1 and 2.5 GraphML Delimited text Excel Workbook (.xls, .xlsx) Cytoscape.js JSON...第二行定义了三个新nodes，3，4，5.这里node2和第一行里的node2是一样的。第二行也定义了三种关系，都是typeB，node2是source，而3，4，5是targets。...第二种格式是定义同种类型的多个关系，而他们有同一个source node的简写。 第三行显示了如何定义一个和其他nodes没关系的节点。这种形式对有连接关系的节点并不必要。...YMR022W (pd) YDL112C = 0.441 YDL112C (pd) YMR022W = 0.9013 因为cytoscape把边数据当作有方向的，第二和第三跳变数据值指向2个不同的边...字符串的内容写在双引号””里。为了潜入一个双引号或反斜杠，也不得不用另外一个反斜杠退出。因此，“\”要写为”\‘或“\”.公式的结果一定要和他们指定的列的类型匹配。规则还是很宽松的。

    5.2K30

    sublime Text3使用笔记

    js以及jquery等插件安装 ctrl+shif+p掉出命令框，输入pci ,选择install package 过一会会弹出对话框 输入：Emmet,选择安装，可以自动提示html css代码。...SetSyntax:javascript.表示当前文本语法为js。...编辑类 Ctrl+J 合并选中的多行代码为一行。举个栗子：将多行格式的CSS属性合并为一行。 Ctrl+Shift+D 复制光标所在整行，插入到下一行。 Tab 向右缩进。...Ctrl+shift+F 在文件夹内查找，与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找，略高端，未研究。 Ctrl+P 打开搜索框。...显示类 Ctrl+Tab 按文件浏览过的顺序，切换当前窗口的标签页。 Ctrl+PageDown 向左切换当前窗口的标签页。 Ctrl+PageUp 向右切换当前窗口的标签页。

    1.5K110
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券