1. 程式人生 > >介紹CSS編譯工具CSS Lint

介紹CSS編譯工具CSS Lint

不久以前,Nicole sullivan 和我宣佈在一起工作。現在我們很高興的向大家宣佈我們
第一個合作的成果CSS Lint誕生了,就像你們所猜想的那樣,CSS Lint的目的就是幫助你
寫出更好的css程式碼。在過去幾周我們花大量的時間,建設和辯論規則,以幫助大家編寫更
有效和更優秀的CSS程式碼
規則
剛開始,我們制訂了一些規則(在CSS Lint About中有詳細的解釋)。這些規則是:
1.解析錯誤應該被修復
2.不要使用多個class選擇元素
3.移除空的css規則
4.正確的使用顯示屬性
5.不要使用太多的浮動
6.不要使用過多網路字型
7.不要使用過多的字號
8.不要使用id作為樣式選擇器
9.不要限定標題
10.標題樣式只定義一次
11.小心使用寬度100%
12.屬性值為0是不要寫單位
13.css的漸變屬性需要指定字首
14.個瀏覽器專屬的樣式要有規範
15.避免使用看起來像正則表示式的css3選擇器
16.遵守盒模型規則
這些規則都是通過使用一個非常簡單的外掛模型來建立的,它可以很容易地改變特定的規則或新增新的規則。開啟或關閉特殊
的方法還沒有暴露在web介面或是命令列上,但是他受到底層API的支援,所以尋找它的增加規則的方法很快。
在你的專案中
當我們高興的介紹我們的web頁面時,我們也注意到你們想把這個合併到你專案的框架中,為了為你們提供這方面的幫助,這裡有為Node.js
提供的CSS Lint,你可以通過安裝npm包的方式來安裝CSS Lint:
sudo npm install -g csslint
一旦安裝成功,你就可以匯入任意數量的css檔案或是目錄了:
csslint foo.css bar.css dir_of_css/
這個工具會和web介面輸出同樣的資訊
貢獻
Css Lint在GitHub是一個完全開源的專案,我們正在積極的尋找貢獻規則,修改bug和擴充套件的開發人員,這個工具的規則是可擴充套件性的,
通過這種方式,你可以很容易的去掉你不要的規則或是增加你需要的特殊規則,然後建立一個客戶版本(或是說第三方版本)來適應你的需要
或者 貢獻給大家使用。
css的解析程式 也是在DitHub上的一個開源專案,這個程式有一些已知的問題我計劃儘快處理掉,但是他符合Css3的標準。
我希望我和 Nicole可以創造出更多的這方面的工具來幫助你們寫出更好規範的前端程式碼,讓我們享受這個過程吧!

原文連結:http://www.nczonline.net/blog/2011/06/15/introducing-css-lint-2/

翻譯的不好 ,希望大家多多指教

相關推薦

介紹CSS編譯工具CSS Lint

不久以前,Nicole sullivan 和我宣佈在一起工作。現在我們很高興的向大家宣佈我們 第一個合作的成果CSS Lint誕生了,就像你們所猜想的那樣,CSS Lint的目的就是幫助你 寫出更好的css程式碼。在過去幾周我們花大量的時間,建設和辯論規則,以幫助大家編寫更

CSS編譯工具(SASS,LESS)

 SASS和LESS都是專用於CSS的預編譯語言,他們2者的功能,操作都是大同小異。LESS稍微簡單一些,而SASS有一些比較成熟的框架(如compass),功能強大一些,其中的語法也比較符合一門程式語言的習慣,比如說函式,作用域,程序控制等等。所以,我也是選擇的SASS來

less在hbuilder自動編譯css

log -1 cnblogs mage 編譯器 1-1 分享 logs css hbuilder 打開工具欄->預編譯器設置 選擇.less,點擊編輯按鈕 編輯命令地址(就是含有lessc.cmd的文件夾) less在hbuilder自動編譯成css

適合站長的15個加速網站開發的css開發工具

css開發工具 站長 CSS是從事web前端開發人員的老朋友了,其對構建Web站點的影響很大,能夠讓開發者在短暫的時間內對整個網站進行各式各樣的修改,改變網頁的布局、排版和調整字間距等。工欲善其事必先利其器,現在有一些大神為我們提供了很多CSS開發

less編譯工具——koala使用介紹

選項 ref 編輯器 koa 9.png logs images nbsp 最新       1:使用koala編譯軟件     官網:http://koala-app.com/index-zh.html (目前官網點擊下載沒有反應,有人說可能是網絡問題,但真正的原因

最好用的css輔助工具——SASS&LESS

space spa 好用 .com less http 工具 .cn sas http://pic.cnhubei.com/space.php?uid=1733&do=album&id=1343730http://pic.cnhubei.com/space.

CSS編輯工具

英文 成長 寫代碼 blank 列數 記事本 edit 編寫代碼 文本編輯 CSS編輯工具 CSS文件是純文本文件,可以使用任何文本編輯器來編輯。常用的文本編輯器有記事本、寫字板、UltraEdit32、EditPlus、NotePad++等等,筆者首選 EditPlus

sublime安裝less2css後 編譯css時報錯找不到指定檔案

很多人使用sublime安裝less2css後以為成功了 直接使用時結果會報這麼一個錯誤 這個呢 翻了翻度娘結果發現是因為沒有安裝lessc 所以才會報錯 然後我找到了簡潔得辦法。 node+npm 全域性安裝 less 就可以輕鬆解決問題啦 1.首先win+r 執行視窗 2.

CSS學習筆記-CSS介紹 AND 2018-11-21(21:04)

一、什麼是CSS? CSS:層疊樣式表(Cascading Style Seets) 樣式定義瞭如何顯示HTML元素。 1.樣式通常儲存在樣式表(.css檔案、css區域)中。 2.把樣式新增到HTML中,是為了解決內容與表現分離的問題。 3.外部樣式表可以極大提高工作效率。 4.外部樣

CSS入門介紹(二)CSS選擇器

css選擇器 什麼是選擇器?   選擇器是你構造好網頁的結構,需要給這些結構賦予樣式,這時候就需要用到選擇器,利用選擇器將元素與樣式一一對應;兩者的對應關係可以是一對一,一對多,多對一。 選擇器的分類:   這裡我只展示幾種比較常見的型別,   1. 標籤選擇器     給同一種標籤新增樣式,例如

scss編譯輸出css並轉換成rem

安裝webstorm或者IDEA(下面以IDEA為例): 1.開啟IDEA,在命令列輸入sass -v,測試sass是否已經安裝,如未安裝,請點選這裡檢視。 2.開啟IDEA---File---Settings---Plugin,在搜尋裡面查詢File Watchers-

使用gulp將sass檔案編譯css樣式

一、安裝gulp+sass(簡單方便) https://www.gulpjs.com.cn/docs/getting-started/ 1.全域性安裝:npm install --global gulp 2.作為專案的開發依賴安裝:npm install --s

gulp 自動化構建 less編譯css補全瀏覽器字首、js壓縮、瀏覽器自動重新整理

最近的時間都在使用框架寫專案,閒來無聊把gulp又回顧了一遍,使用起來還是很方便的。 這裡是我的專案結構 這裡我主要實現了less編譯、css補全瀏覽器字首、js壓縮、瀏覽器自動重新整理幾項常用的功能。 第一步、全域性安裝 gulp npm install gu

html+css 提示工具

html+css 提示工具 *{margin: 0px;padding: 0px;} .box{ width:100px; height: 50px; position: relative; margin: 100px auto; } /*滑鼠移動上

推薦好用的css除錯工具,兩個

一:Emmet LiveStyle(http://livestyle.io/) CSS,LESS和SCSS的第一個雙向實時編輯工具。 官網說只適用與谷歌跟sublime,可以自行測試   1.sublime下載外掛liveStyle 2.谷歌商店下載Emmet LiveSt

分享一款將less編譯css的神器

      大多數web開發的程式設計師都瞭解和使用過Less, LESS是一門 CSS 預處理語言,它擴充了 CSS 語言,增加了諸如變數、混合(mixin)、函式等功能,讓 CSS 更易維護、方便製作主題、擴充。LESS 可以讓我們用更少的程式碼做更多的事情。  

超級有用的CSS編碼工具

 九款超級有用的CSS編碼必備神器,包括:Pure CSS、CSS Trashman、Glue、Helium CSS、Bear CSS等等,希望你會喜歡。   當你在開發某個網站或者應用時,找到適宜的工具絕對能幫助您節省大量的時間,本文,筆者收集了九款超級有用的CSS編

vscode的gulp-less自動把less編譯css

4、這裡注意路徑,根目錄最好是“爸爸”級別,避免後面執行任務的時候忽略了路徑報錯;注意gulpfiles.js檔名字不能改,必須這樣寫,主要是拿來引用gulp的任務以及執行任務(怎樣執行任務,我在其他文章中總結了二種方法,供參考https://blog.csdn.net/weixin_36706903/art

gcc編譯工具生成動態庫和靜態庫之一----介紹

 1.庫的分類 根據連結時期的不同,庫又有靜態庫和動態庫之分。 靜態庫是在連結階段被連結的(好像是廢話,但事實就是這樣),所以生成的可執行檔案就不受庫的影響了,即使庫被刪除了,程式依然可以成功執行。 有別於靜態庫,動態庫的連結是在程式執行的時候被連結的。所以,即使程式編譯完,庫仍須保留在系統上

4. web前端開發分享-css,js工具

web前端開發乃及其它的相關開發,推薦sublime text, webstorm(jetbrains公司系列產品)這兩個的原因在於,有個技術叫emmet, http://docs.emmet.io,而這兩個對他的支援是: sublime text 是所有編輯器裡邊支援emmet比較好的的唯一一款。 we