回顾 在上一篇SMACSS:一个关于CSS的最佳实践-Overview中,讲到SMACSS将CSS Rules分为5个Categories: Base Layout Module State Theme 本篇我们将介绍Base Rules.你可以将所有Base Rules放在一个文件,比如 base.css :当然,也可以不这么做.区分Category的作用是帮助我们区分出不同功能的CSS,提高可重用性,可维护性. 哪些CSS属于Base Rules? Base Rules指的是所有元素的默认s…

本篇笔者要介绍的是Layout Rules.看完本篇,大家将会知道Layout Rules的作用,以及哪些CSS应该归类为Layout Rules. 什么是Layout Rules? Layout Rules指的是用于布局的CSS.我们常常对布局和内容不加区分,总是将所有的CSS写在一块,从而降低了代码的可重用性.SMACSS将布局CSS抽象为Layout Rules,内容CSS抽象为Module Rules.一个module只需要关心自己长什么样就可以了,至于放在哪里,那是它的容器需要考虑的问…

什么是SMACSS? SMACSS(发音"smacks"),全称Scalable and Modular Architecture for CSS.顾名思义,SMACSS是一个可扩展的,模块化的CSS架构.它不是一个CSS框架,而是一个指南,一个CSS设计的最佳实践.SMACSS旨在规范一种统一的CSS开发方式,以便开发人员能够更好的开发和维护CSS代码. 为什么要SMACSS? 对于软件系统来说,不管使用何种语言,何种编程思想,有几个要求总是永恒不变的:可重用,可扩展,可维护.对于小…

Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试. 在Vue Loader Scope CSS和Vue Loader CSS Modules两节中介绍了Vue实现CSS模块化的两种方式. 下面对scoped和CSS Modules两种方式分别进行介绍,然而这两种方式均非最佳实践. 一.scoped 使用scoped会为组件中HTML树的每个元素都添加data-xxxx属性,其中xxxx是哈希值.转换之后的CSS变成 mySelector[d…

最佳选择器写法(模块) /* 这是某个模块 */ .m-nav{}/* 模块容器 */ .m-nav li,.m-nav a{}/* 先共性 优化组合 */ .m-nav li{}/* 后个性 语义化标签选择器 */ .m-nav a{}/* 后个性中的共性 按结构顺序 */ .m-nav a.a1{}/* 后个性中的个性 */ .m-nav a.a2{}/* 后个性中的个性 */ .m-nav .z-crt a{}/* 交互状态变化 */ .m-nav .z-crt a.a1{} .m-nav…

參考:IBM WebSphere 开发人员技术期刊: 最重要的 Java EE 最佳实践 IBM WebSphere 开发人员技术期刊: 最重要的 Java EE 最佳实践 2004 年 IBM® WebSphere® 开发人员技术期刊中曾发表过一篇名称类似的文章,本文是其更新版本号. 这个修正版中考虑了一些不断变化的技术趋势.更重要的是推荐了一些作者觉得应当广泛遵循.但尚未广泛遵循的实践. 2 评论: Keys Botzum, 高级技术人员 , EMC Kyle Brown, 杰出projec…

5月份,为统一团队git分支管理规范,刚开始准备自己写,在网上搜了下,发现不少不错的git分支管理实践.最后我为团队选择了这个git分支管理实践 A successful Git branching model ,网上有不少参考这篇文章写的中文版gitflow实践,推荐一个中文版的Git 最佳实践:分支管理. 除了团队git管理的需要,我自己在github上有重要的开源项目采用github flow,这里转载一篇关于这两种分支管理的文章:GitHub Flow & Git Flow 基于Git…

===================================自定义异常类===================================稍具规模的项目, 一般都要自定义一组异常类, 这样做的好处是:1. 可以充分利用异常的中断特性, 简化代码的逻辑控制. 2. 在自定义的异常类, 可以设置 BusinessErrorCode 和 error message, 有了统一的 BusinessErrorCode, 排查和联调沟通就更容易了. Java 异常的 Root 是 Throwa…

在本文中阿里云资深产品专家云郎分享了基于阿里云 MaxCompute 构建企业云数据仓库CDW的最佳实践建议. 本文内容根据演讲视频以及PPT整理而成. 大家下午好,我是云郎,之前在甲骨文做企业架构师8年,目前是MaxCompute产品经理. 在这么长的客户工作过程中,作为产品PD,一定是跟客户在一起的.我经常被一些问题挑战:云郎,我们现在要建数据仓库,我该怎么去规划?云郎,我现在这边是大数据的建设团队,好像数据团队不怎么理我,什么情况?云郎,我们这边现在建了一个平台,现在性能好像有问题,是不是…

引言 如果您想开始建立自己的基于Cassandra的Java程序,欢迎! 也许您已经参加过我们精彩的DataStax Academy课程或开发者大会,又或者仔细阅读过Cassandra Java驱动的文档.相比示例程序,现在是时候步入真实世界.处理实际案例了. 那么问题来了:Java驱动提供了各种设置选项,在开始使用时我们需要知道哪些一般准则,以及从什么最佳实践入手,从而轻松构建一个在生产环境中有复原力的.实时的.高性能应用呢? 这是个好问题!基于大量和您类似的Datastax客户中所累积的经验…

最近在做项目的时候,经常会有需要各种居中的情况,现在分享一个最佳实践. <div class="success-bottom"> <div class="hr-use"></div> <div class="youwant"> <span class="loveicon"></span> <span>你可能还想要</span> &l…

前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能.那么接着上一篇,我们再来谈谈CSS代码的一些标准实践. 1,命名 和其他语言规范一样,css的命名也讲究命名要有意义,命名要尽可能短但是要足够表达含义:命名的词用连字符连接. 不规范的命名: #navigation{ } .demoimage{ } .error_status{ } 规范的命名: #nav{ } .demo…

前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大小的手段.以下将讨论CSS代码相关的代码精简方案. 定义简洁的CSS规则 CSS的每条规则中都包含了规则的属性及属性值.定义简洁的CSS规则主要是指合并相关规则和定义简洁的属性值. 1. 合并相关CSS规则 CSS中的某些样式是由多个规则组成的,比如字体样式,就包含:font-family.font…

前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借助工具,不太容易按照既定的顺序来定义CSS属性,这是前端程序员很少给CSS样式属性排序的最主要原因. 尽管给CSS样式属性排序需要花费一些精力,但从代码的可读性和可维护性角度来考虑,这些付出还是值得的.如果CSS属性按照一定的规则排序,在开发过程中可以防止属性的重复定义,代码的检查者也能很清晰地查看…

前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html.文中的不少的例子在一本经典的CSS书籍<CCS: The Missing Manual, 2nd Edition>中都可以找到,据我所…

media query是css3规范中引入的,它提供了一种responsive design的基础机制:浏览器在不同size的设备中将以不同样式展现网页,这就给一个网页能够适应不同device一种可能.在实际使用中,我常常碰到以下问题:为什么media query的rule不起作用?很有可能和你的media query所处的位置有关,也很有可能和media query中的selector权重不 如外面的targeting到相同元素的css权重有关,比如: @media screen and (m…

分类 ■    绝对长度(Absolute units):cm,mm,in,pt,pc 绝对单位之间的换算:1in = 2.54cm=25.4mm=72pt=6pc 绝对长度在css中的表现和其他地方都一样, 1cm就是1cm ■     相对长度(Relative units):em,px,%,rem,vm,vh,vmin,vmax px是基于设备的,不同设备不同的展现,但是打印输出设备上始终表现一致,1PX = 1/96 * inch. em 是基于元素最近的font-size的设定 一个元…

  在css的世界,文档没有被得到充分的利用.由于文档对终端用户不可见,因此它的价值常常被忽视.另外,如果你第一次为css编写文档,可能很难确定哪些内容值得记录,以及如何能够高效完成编写. 然而,为CSS编写文档可以为你的项目提供很多好处:促进更好的代码实践.降低新员工的上手难度.在本文中,我将说明编写CSS文档的优点,并分享我认为的最佳实践.让文档为你工作,而不是阻碍你的工作. 1. 制定基本规则 当你和你的团队不清楚CSS文档具体需要编写哪些内容.文档应该如何工作时,你很难跟上编写CSS文档…

看手机微信,看到说美团出了1个小程序框架,  mpvue 搜下来试试,看了网上的一个对比 ----------------- 以下为引用 我们对微信小程序.mpvue.WePY 这三个开发框架的主要能力和特点做了横向对比,帮助大家了解不同框架的侧重点,结合业务场景和开发习惯,确定技术方案.对于如何更好地使用 mpvue 进行小程序开发,我们总结了一些最佳实践. 使用 vue-cli 命令行工具创建项目,使用Vue 2.x 的语法规范进行开发 避免使用框架不支持的语法特性,部分 Vue.js语法在…

问题场景 在写样式时经常需要用到非ASCII字符的属性值,如下: ? 1 2 3 4 5 6 7 8 9 10 11 .hot_list .sign_discount:before {    content: "满减";    padding: 0 8px;    margin-right: 7px;    font-size: 12px;    line-height: 14px;    color: #fff;    text-align: center;        borde…

一.有效组织CSS代码 规划组织CSS代码:组织CSS代码文件,所有的CSS都可以分为2类,通用类和业务类.代码的组织应该把通用类和业务类的代码放在不同的目录中. 模块内部的另一样式规则:样式声明的顺序是按照模块中元素的层级关系来处理,从父级元素开始,如果是同一级元素则按照元素在页面的位置从上到下.从坐到右地定义对应的样式.如果多个公用,则先声明公用的样式,然后声明个体样式. CSS排序实践: 对CSS样式排序 推荐按样式属性功能分组排序 推荐在CSS样式代码编写完成并准备嵌入的时候排序 使用如…

最初,在编写CSS的时候,我们往往想到哪儿就写到哪儿,它们之间的关联性和有序性并不在考虑之中.但随着代码量的增加,亦或是多人共同开发,CSS的编写规范变得重要起来了.本文通过三个方面,总结出CSS编写的最佳实践.一来强制自己按照规范编写CSS,二来可以推广到团队使用. 层级规范(从高到低) Popout Mask Navigation Content 书写规范 小写.英文 tab四个空格缩进 以'-'短横杠连接名词 为选择器添加状态前缀(.is-xxx) 关于空格的使用 选择器与{之间有空格 属…

一般在网页的字体设置中,可以将字体分类三类: 系统字体:使用系统自带的字体 兜底字体:当系统字体无法正常使用,而兜底的字体 Emoji 字体:显示网页中的表情字体 为了满足不同平台,以及 Emoji 更好的显示效果(不会被前面的系统字体或兜底字体覆盖),建议使用下面代码配置网页字体. 最佳实践 @font-face { font-family: Emoji; src: local("Apple Color Emojiji"), local("Segoe UI Emoji&qu…

这个最佳实践是我目前人在做的一个站点,主要功能: oauth登录 发布文章(我称为"片段"),片段可以自定义一些和内容有关的指标,如“文中人物:12”.支持自定义排版.插图.建立相册. 多个片段可以组织在一起,形成"事件". 任意事件.片段都可以互相标记因果关系. 可以follow事件或者他人. 事件和片段模糊搜索. 我对目前前端框架的观点已在另一篇文章中讲过,这里只介绍一下目前实践的情况. 使用requirejs做模块化,上线时用r.js打包. 使用avalon做…

一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开发最佳实践>这本书的读后感,以及梳理这本书中比较有用的核心知识点 二.书之印象 <web前端开发最佳实践>其实说到底就是一本提高你的涉猎面的书籍,但是缺点就是这本书的标题是web前端开发最佳实践,但是其实也就是一些很基础的东西没有什么很高深的,所以前端最佳实践这个书名就是标题党,而且里面的东…

ZZ from: http://blog.csdn.net/wireless_com/article/details/43305701 近年来,对于打造高度可扩展的应用程序,软件架构师们挖掘了若干相关理念,并以最佳实践的方式加以实施.在今天的"信息时代",这些理念更加适用于不断增长的数据集,不可预知的流量模式,以及快速响应时间的需求.本文将强调并重申其中的一些传统观念,并讨论他们如何在融合云计算的发展,还将讨论由于云计算的动态性而产生的一些前所未有的概念(如弹性). 本文的目标是面向云…

­.fluid-width-video-wrapper { width: 100%; position: relative; padding: 0 } .fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed { position: absolute; top: 0; left: 0; width: 100%; height: 100% } *::sel…

自动排版有点乱,看着蛋疼,建议下载中文PDF版阅读或阅读英文原文. Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践.他们为此进行了 一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.最 佳实践的核心就是旨在提高网站性能. Excetional Performance 团队总结出了一系列可以提高网站速度的方法.可以分为 7 大类 34 条.包括内容.服务器.cookie.CSS.JavaScript.图片.移动应用等七部分. 其…

Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎PageSpeedYSlow 摘要:前端的性能对于Web应用的用户体验来说非常重要.不要以为你的Web应用的性能已经足够好了,其实还会有很多可以提升的地方.本文将介绍Google和雅虎关于前端优化的最佳实践以及工具,你可以逐一检验你的Web应用. 前端的性能对于一个Web应用来说非常重要,如果一个Web应用的…

一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3…