前端工程師必看: 十大 CSS 技巧

标签: Compass CSS Framework CSS Compass SASS | 发表时间:2014-01-03 07:05 | 作者:appleboy
出处:http://blog.wu-boy.com

2014 年第一篇文章來寫前端工程師必須要瞭解的 [CSS] 技巧,此篇其實來自於 KidsIL Blog 內的一篇 10 Great CSS Tips for every Web Developer,裡面作者紀錄了十大 CSS 技巧,看完這十大後,發現有些技巧曾經出現在 Even Wu 給網頁設計師的建議一文,這些技巧對於目前台灣前端工程師有很大的幫助,這些都算是蠻基本的,如果尚未瞭解或還沒開始使用的開發者,也可以建議團隊開始使用。底下內容來自於原網站,在加上筆者的一些補充。

用 firebug 或 console 來除錯

Firefox 還沒有推出 Developer Tools 時,大家一定是用 Firebug 來除錯,2006 年 Firebug 第一版 release 出來,讓 web 開發者可以更快速的瞭解網站除錯,也可以透過 Firebug 來瞭解網站的 performance。但是現今,Firefox 推出了自家 Developer Tools,而 Chrome 也是有很多好用的 Tool tips 及強大的 Workspace,對 Workspace 不熟悉的,可以參考之前我寫的一篇: Coding on workspace of Chrome Developer tools

Float or Inline-Block css

先來看看 範例1,中間有三個 column,分別用 float: left 方式來排列

<div class="wrapper">
    <div class="column">test</div>
    <div class="column">test</div>
    <div class="column">test</div>
</div>

CSS 寫法:

.wrapper {
    width: 400px;
    min-height: 50px;
    background-color: red;
}

.column {
    float: left;
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-left: 20px;
}

會發現背景紅色 .wrapper 區塊被砍了一半,原因就是沒使用 clear: both,正確解法請看 範例2,如果不是用此解法,也可以將 float 取代成 display: inline-block,解法請看 範例3。上述兩種解法是最常見的,終極解法可以透過 pseudo-class :after 來解決此問題,晚點會提到此解法

用 CSS animation 取代 Javascript

原文作者寫了一篇 CSS3 Transitions to replace JavaScript animations 文章,就是要告訴前端工程師盡可能將原本使用的 jQuery animation 取代成 CSS 作法,原因在於 CSS animation 的效能遠大於 JavaScript Native Language 效能,請參考 http://www.cssanimate.com/ 網站。

Form 表單請使用 Label input

上面的例子,只要點選 NameEmail 會發現瀏覽器游標自然會移動到 text input 欄位上,設定方式很簡單,只要將 labelfor attribute 設定為 input id 即可

<label for="username">Name:</label><input type="text" id="username" />
<label for="email">Email:</label><input type="text" id="email" />

Performance: Spiriting everything

每個網站一定會有很多小 icon 圖,不管是直接使用在 html 或者是寫在 CSS 內,在網路傳輸的時候,如果 10 張 icon 就會建立 10 條 connection,然而 css_spite 就是解決了此問題,將所有的小圖集結成一張大圖,透過 css 設定來減少網路連線數,網路上很多工具來達成此目的,像是 CSS Sprite Generator,如果熟悉 Compass 工具,可以直接使用 Spriting with Compass

.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save   { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }

.my-icons-delete { background-position: 0 0; }
.my-icons-edit   { background-position: 0 -32px; }
.my-icons-new    { background-position: 0 -64px; }
.my-icons-save   { background-position: 0 -96px; }

不要直接修改 image width and height attribute

這點其實蠻重要的,現在網站架構的瓶頸,說實在的 80% 以上都是在讀取圖檔,有時候 UI 設計師切出一張大圖,前端工程師拿去使用,結果圖檔很大,工程師就直接透過 css width height 修改圖片大小,這樣看起來是沒問題,但是網站就開始很慢,使用者開始不爽,網站自然就不會有人繼續用。正確方式就是將 image resize 成各種版本,可以直接參考這篇 Tools for image optimization

使用 max width and height 來調整 image 比例

這招其實還蠻好用的,我們先來看看例子

我們看到這張圖本來的比例大小為寬 228 高 320,但是經過底下 CSS 語法

img {
    width: 228px;
    height: 228px;
}

圖片就變成上述的例子,但是如果我們把 CSS 改成底下呢

img {
    max-width: 228px;
    max-height: 228px;
}

出來的結果就是

css3

善用 :before and :after

在前面有提到 float: left 後要加上一個 element clear: both 現在我們可以透過 :after 來解決這問題

.wrapper:after {
    content: ' ';
    clear:both;
    display:block;
}

減少 CSS 程式碼

這部份就是減少不必要的程式碼

.class {
    margin-top:5px;
    margin-right:10px;
    margin-bottom:15px;
    margin-left:20px;
}

可以寫成

.class {
    margin:5px 10px 15px 20px;
}

CSS color 部份 #RRGGBB 可以寫成 #RGB

SASS or Compass

團隊內尚未使用 SASSCompass 嗎?個人建議儘快導入這兩套工具,還不熟悉這兩套工具,建議將底下投影片看完

相关 [前端 工程 css] 推荐:

前端工程師必看: 十大 CSS 技巧

- - 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY
底下內容來自於原網站,在加上筆者的一些補充. 用 firebug 或 console 來除錯. 在 Firefox 還沒有推出 Developer Tools 時,大家一定是用 Firebug 來除錯,2006 年 Firebug 第一版 release 出來,讓 web 開發者可以更快速的瞭解網站除錯,也可以透過 Firebug 來瞭解網站的 performance.

前端CSS规范整理

- - 标点符
1、文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解:. 所有的CSS分为两大类:通用类和业务类. 通用的CSS文件,放在如下目录中:. 基本样式库 /css/core. 通用UI元素样式库 /css/lib. JS组件相关样式库 /css/ui. 业务类的CSS是指和具体产品相关的文件,放在如下目录中:.

前端设计中的浏览器CSS Hack汇总

- Myheimu - UED TEAM,用户体验设计,web前端开发
CSS Hack是我们解决浏览器兼容性(尤其是IE各版本)问题的常用手段. CSS Hack的手法可以说是五花八门,使用时经常混淆. js代码 /***** Selector Hacks ******/. /* IE6及更低版本浏览器 */. /* IE8, FF, Saf, Opera (除了IE 6、7的所有浏览器) */.

前端代码标准最佳实践:CSS

- - CSDN博客推荐文章
上一篇《 前端代码标准最佳实践:javascript》发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高. 这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能. 那么接着上一篇,我们再来谈谈CSS代码的一些标准实践.

16个非常有用的前端CSS框架

- - Jackchen Design 1984
网页是设计风格渐渐走向几个特点. 一种是创意类而另一种就是框架类. 创意类的网页是让网页更趋向于艺术风格,而框架类的网页则是为了加快网页设计的开发速度以及各种标准化的统一管理. 好的团队都会用一种高效的框架来进行快速开发. 更牛的团队会相应的开发自己的框架,或者对一些开源框架进行二次定制修改来更大程度的发挥效用.

从事前端开发必须要了解的CSS原理

- - IT瘾-geek
  从事Web前端开发的人都与CSS打交道很多,有的人也许不知道CSS是怎么去工作的,写出来的CSS浏览器是怎么样去解析的呢. 当这个成为我们提高CSS水平的一个瓶颈时,是否应该多了解一下呢.   一、浏览器的发展与CSS.   网页浏览器主要通过 HTTP 协议连接网页服务器而取得网页, HTTP 容许网页浏览器送交资料到网页服务器并且获取网页.

为什么 Web 前端开发不抛弃 HTML 和 CSS,用纯 JavaScript 开发?

- - 知乎每日精选
首先要确定,即使抛开游戏不论,一般的Web应用或者网站,完全用JavaScript开发也是可行的. 比如ExtJS、webOS的Enyo等. 但是主流Web开发很少采用全JS的方案. 注重考虑那些无法运行JS的用户代理. 用户使用不支持JS的浏览器(比如较老的手机浏览器),或者禁用脚本. 当然你可以选择忽略这一小撮用户,尤其是现在绝大多数网站和应用也是如此选择的,但是至少我们应该对坚持考虑无JS情况的开发者予以基本的尊重.

前端工程师技能汇总

- - 博客园_新闻
还记得@jayli 的这幅前端知识结构图么. 缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个 github 项目. 我们可以通过协作的方式来共同维护这个项目. Git 的历史记录也可以见证前端行业的一些变迁. 尽管会变成文字的方式来维护这些内容,但是我承诺写一个小工具帮大家生成更好玩的图形(基于 DataV 项目).

前端工程与性能优化

- - FEX 百度 Web 前端研发部
每个参与过开发企业级 web 应用的前端工程师或许都曾思考过前端性能优化方面的问题. 我们有雅虎 14 条性能优化原则,还有两本很经典的性能优化指导书:《高性能网站建设指南》、《高性能网站建设进阶指南》. 经验丰富的工程师对于前端性能优化方法耳濡目染,基本都能一一列举出来. 这些性能优化原则大概是在 7 年前提出的,对于 web 性能优化至今都有非常重要的指导意义.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.