前端编码规范 -- css篇

合理的避免使用ID 一般情况下ID不应该被应用于样式. ID的样式不能被复用并且每个页面中你只能使用一次ID. 使用ID唯一有效的是确定网页或整个站点中的位置. 尽管如此,你应该始终考虑使用class,而不是id,除非只使用一次另一个反对使用ID的观点是含有ID选择器权重很高. CSS选择器中避免标签名当构建选择器时应该使用清晰, 准确和有语义的class(类)名.不要使用标签选择器. 如果你只关心你的class(类)名 ,而不是你的代码元素,这样会更容易维护. 如果你只使用具有实际意义的c…

【规范】前端编码规范——css 规范

编码在 css 首行设置文件编码为 UTF-8. @charset "UTF-8"; class 命名 class 名称应当尽可能短,并且意义明确.使用有意义的名称,使用有组织的或目的明确的名称,不要使用表现形式的名称. 不推荐 ;} .red {color:red;} 推荐 ;} .important {color:red;} 使用中划线(-)分隔 class 中的单词.虽然它很不方便的让你双击选择,但是它可以增强理解性.另外属性选择器 [attribute|=value] 也能识…

前端编码规范 -- html篇

文档类型推荐使用 HTML5 的文档类型申明: <!DOCTYPE html> (建议使用 text/html 格式的 HTML.避免使用 XHTML.XHTML 以及它的属性,比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限). HTML 中最好不要将无内容元素的标签闭合,例如:使用 <br> 而非<br />. 字符编码通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式.这样做的好处是,可以避免在…

前端编码规范之CSS

"字是门面书是屋",我们不会去手写代码,但是敲出来的代码要好看.有条理,这还必须得有一点约束~ 团队开发中,每个人的编码风格都不尽相同,有时候可能存在很大的差异,为了便于压缩组件对代码进行压缩以及书写样式的规范统一和美观,很有必要大家一起来研究一套基本规范(模板)! 我先抛砖引玉.(禁止).(必须)等字眼,在这里只是表示强调,未严格要求. 前端规范之CSS 1. tab键用(必须)四个空格代替因为在不同系统的编辑工具对tab解析不一样,windows下的tab键是占四个空格的位置,而…

前端编码规范（4）—— CSS 和 Sass (SCSS) 规范

CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂的名称. 应该首选具体和反映元素目的的名称,因为这些是最可以理解的,而且发生变化的可能性最小. 通用名称只是多个元素的备用名,他们兄弟元素之间是一样的,没有特别意义. 区分他们,使他们具有特殊意义,通常需要为“帮手”. 尽管class(类)名和ID 的语义化对于计算机解析来说没有什么实际的意义, 语…

我的前端规范——CSS篇

相关文章简书原文:https://www.jianshu.com/p/e87bfd27ff59 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.html 我的前端规范——HTML篇:http://www.cnblogs.com/shcrk/p/9271613.html 我的前端规范——CSS篇:http://www.cnblogs.com/shcrk/p/9271608.html 我的前端规范——JavaScript篇:http://www.…

前端编码规范之JavaScript

上次浅谈了下关于CSS的编码规范,大部分童鞋持赞同意见,仍存在一些童鞋不太理解这些规范的意义. 如果是个人或者小作坊开发,其实这些所谓的编码规范也没啥意思,因为大家写好的代码直接就给扔到网上去了,很少有打包.压缩.校检等过程,别人来修改你代码的情况也比较少.但是,对于一定规模的团队来说,这些东西还是挺有必要的!一个是保持代码的整洁美观,同时良好的代码编写格式和注释方式可以让后来者很快地了解你代码的大概思路,提高开发效率. 那么这次,继续抛砖引玉,说说Javascript一些需要引起注意的地方(这…

JS前端编码规范

转自<前端编码规范之JavaScript>,网址:http://www.cnblogs.com/hustskyking/p/javascript-spec.html 一个是保持代码的整洁美观,同时良好的代码编写格式和注释方式可以让后来者很快地了解你代码的大概思路,提高开发效率. 不规范写法举例 1. 句尾没有分号 var isHotel = json.type == "hotel" ? true : false 2. 变量命名各种各样 var is_hotel; var i…

前端编码规范，个人感觉bootstrap总结的不错，拿出来给大家分享

前端编码规范,个人感觉bootstrap总结的不错,拿出来给大家分享 http://codeguide.bootcss.com/#html-doctype HTML 语法 HTML5 doctype 语言属性(Language attribute) 字符编码 IE 兼容模式引入 CSS 和 JavaScript 文件实用为王属性顺序布尔(boolean)型属性减少标签的数量 JavaScript 生成的标签 CSS 语法声明顺序媒体查询(Media query)的位置带前缀的属性…

前端编码规范（2）—— HTML 规范

HTML 规范文档类型推荐使用 HTML5 的文档类型申明: <!DOCTYPE html>. (建议使用 text/html 格式的 HTML.避免使用 XHTML.XHTML 以及它的属性,比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限). HTML 中最好不要将无内容元素[1] 的标签闭合,例如:使用 <br> 而非 <br />. HTML 验证一般情况下,建议使用能通过标准规范验证的 HTML 代码,除非在性能…

web前端编码规范

简要介绍本文通过参考百度腾讯等前端编码规范(链接建文末),得出个人习惯的编码规范.个人编码规范采用在不影响可读性的情况下能省就省,尽量简洁,不需要就直接去掉. 最佳原则不管是个人编码规范还是团队编码规范,一旦规范制定完毕就应该坚持使用,保持前后规范一致. 笔记通过MarkDown写成,对应的GitHub地址为:https://github.com/xys2015/mdnote 命名规则项目名称,目录名称,一律采用小写方式,以下划线分割.例如:my_project_name 常见命名推荐:im…

web前端代码规范——css代码规范

Bootstrap CSS编码规范语法用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择器分组时,将单独的选择器单独放在一行. 为了代码的易读性,在每个声明块的左花括号前添加一个空格. 声明块的右花括号应当单独成行. 每条声明语句的 : 后应该插入一个空格. 为了获得更准确的错误报告,每条声明都应该独占一行. 所有声明语句都应当以分号结尾.最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错. 对于以逗号分隔的属性值,每…

Web前端编码规范[转]

先插入一条广告,博主新开了一家淘宝店,经营自己纯手工做的发饰,新店开业,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!店名: 小鱼尼莫手工饰品店经营: 发饰.头花.发夹.耳环等(手工制作)网店: http://shop117066935.taobao.com/ 马上开始正题... 转自: http://blog.csdn.net/hongdi/article/details/7065380 一.javascript编码规范 1．所有js代码应写在一个.js文件中,使用<scripttype=…

前端读者 | 百度前端编码规范（CSS）

本文来自:百度FEX 1 前言 CSS作为网页样式的描述语言,在百度一直有着广泛的应用.本文档的目标是使CSS代码风格保持一致,容易被理解和被维护. 虽然本文档是针对CSS设计的,但是在使用各种CSS的预编译器(如less.sass.stylus等)时,适用的部分也应尽量遵循本文档的约定. 2 代码风格 2.1 文件 [建议] CSS 文件使用无 BOM 的 UTF-8 编码. 解释:TF-8 编码具有更广泛的适应性.BOM 在使用程序或工具处理文件时可能造成不必要的干扰. 2.2 缩进 [强制…

编码规范(CSS)

code { font-family: "PT Mono", Menlo, "Courier New", monospace; padding: 2px 4px; font-size: 85%; color: #d44950; background-color: #f7f7f9; border-radius: .2rem; } .dec, .var {color: #606;} .pln {color: black;} .tag {color: #008;} .at…

【规范】前端编码规范——html 规范

文档类型推荐使用 html5 的文档类型申明: <!DOCTYPE html> 语言属性根据 html5 规范: 强烈建议为 html 根元素指定 lang 属性,从而为文档设置正确的语言.这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等. 这里列出了语言代码表. <html lang="en"></html> 字符编码通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式.这样做的好处…

前端读者 | 百度前端编码规范（JS）

本文来自:百度FEX 1 前言 JavaScript在百度一直有着广泛的应用,特别是在浏览器端的行为管理.本文档的目标是使JavaScript代码风格保持一致,容易被理解和被维护. 虽然本文档是针对JavaScript设计的,但是在使用各种JavaScript的预编译语言时(如TypeScript等)时,适用的部分也应尽量遵循本文档的约定. 2 代码风格 2.1 文件 [建议] JavaScript 文件使用无 BOM 的 UTF-8 编码. 解释:UTF-8 编码具有更广泛的适应性.BOM 在…

前端深入之css篇丨2020年前，彻底掌握css动画【animation】

写在前面马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 上一篇文章我们已经一起学习了transition 的使用,如果有不了解的同学可以查看我的上一篇文章…

前端深入之css篇丨初探【transform】，手把手带你实现1024程序员节动画

写在前面马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 值此1024程序员佳节之际,我特此推出供同学们学习的动画小案例,这个案例非常简单,但是他可有帮我们…

前端深入之css篇丨2020年前，彻底掌握css动画

马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 上一篇文章我们已经一起学习了transition 的使用,如果有不了解的同学可以查看我的上一篇文章. 话不多…

拿什么拯救你，我的代码--c#编码规范实战篇

此文为译文,原文地址请点击. 本文通过重构一个垃圾代码,阐述了如何写出优秀的代码.开发人员及代码审核人员需按照此规范开发和审核代码.此规范以C#为例,JAVA的童鞋一并参考,C++的童鞋自行脑补吧. 简介这篇文章的目的是展示如何将一段垃圾代码重构成一个干净的.可扩展性和可维护的代码.我将解释如何通过最佳实践和更好的设计模式来改写它. 阅读本文你需要有以下基础: c# 基础依赖注入,工厂模式,策略模式此文中的例子源于实际项目,这里不会有什么使用装饰模式构建的披萨,也不会使用策略模式的计算器,…

拿什么拯救你，我的代码--c#编码规范实战篇（转)

http://www.cnblogs.com/lazio10000/p/5413439.html 此文为译文,原文地址请点击. 本文通过重构一个垃圾代码,阐述了如何写出优秀的代码.开发人员及代码审核人员需按照此规范开发和审核代码.此规范以C#为例,JAVA的童鞋一并参考,C++的童鞋自行脑补吧. 简介这篇文章的目的是展示如何将一段垃圾代码重构成一个干净的.可扩展性和可维护的代码.我将解释如何通过最佳实践和更好的设计模式来改写它. 阅读本文你需要有以下基础: c# 基础依赖注入,工厂模式,策略…

[转] Web前端优化之 CSS篇

原文链接: http://lunax.info/archives/3097.html Web 前端优化最佳实践第四部分面向 CSS.目前共计有 6 条实践规则.另请参见 Mozilla 开发者中心的文章:Writing Efficient CSS 1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top) 官方的解释我觉得多少有点语焉不详.这一条其实和用户访问期望有关.CSS 放到最顶部,浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染.没有人喜欢等待…

前端开发之css篇

一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作二.css的引入方式 (1)行内式引入: <div style="color:red;font-size: 16px">hello</div> 直接在html语句的属性中设置,这种方法的缺点是html代码和css代码混合在一起,耦合性太强,维护困难 (2)嵌入式引入: &…

【规范】前端编码规范——javascript 规范

全局命名空间污染与 IIFE 总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression),用以创建独立隔绝的定义域.这一举措可防止全局命名空间被污染. IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改(比如第三方库,window 引用,被覆盖的未定义的关键字等等). 不推荐 var x = 10, y = 100; console.log(window.x + ' ' + window.y); 推荐 (function(w)…