2012-01-13 20 views
2

我正在考慮在即將推出的項目中使用較少的內容,但一直在試圖找出在開發過程中使用它的最佳方式。使用較少或縮小的CSS的最佳做法

通常開發一個網站時,我會寫我的HTML和CSS然後開始在瀏覽器中測試它,看看它的外觀,提煉,重新加載,並重復整個過程,直到我很高興一切都看起來如何。

該過程的關鍵部分是使用瀏覽器中的Inspect Element功能來識別需要更改的CSS。通常只需查看行號,我就知道我的CSS文件的確切位置。

但是,如果我使用較少(或任何其他方法組合/壓縮我的CSS)它使行號無用。我知道我可以使用Find來搜索代碼段,但行號要快得多。

在處理涉及其他開發人員或大型CSS文件的項目時,尤其如此。

我只是想知道別人怎麼處理這個問題,或者有一個更好的過程?

+1

爲什麼不在一切看起來像你想要的方式後縮小CSS * – 2012-01-13 15:32:01

+0

@Colin:當它看起來像OP想要它的樣子時會發生什麼,並且一系列用戶發郵件抱怨「在我的Mac上,您的站點看起來像是因爲xxxx和yyyy的垃圾」? – 2012-01-13 15:37:02

+0

@JoelEtherton:我假定單獨的開發者(未縮小)和生產(縮小)的副本將被保留。我不清楚這一點。 – 2012-01-13 15:38:53

回答

1

Minified CSS真的只應該出去到您的網站的生產版本。當您執行測試/更改等時,應該在您的站點的某個測試或開發版本中的輔助服務器區域中完成此操作,您可以在其中獲得行號版本的css。 JavaScript也一樣。在生產可查看副本上,您希望將其縮小。在開發中,你沒有。

無論如何,你應該總是有2份你的CSS。第一個副本是您的開發副本的主要源副本。它包含所有正確格式化的樣式,並帶有換行符。另一個是你的css的最新縮小版本,它已投入生產。如果您的網站使用某種模板傳送(佈局頁面,主頁面或其他),這將允許您在需要解決問題時快速切換2個文件。

縮小版本只會在最終交付時有用。所有其他需求應使用主副本。將配置放置在站點的服務器端部分可能不是一個壞主意,它決定了要使用的樣式表。這樣,您可以簡單地更改配置設置並進入「調試」模式。

0

Personnaly,我使​​用Ant構建腳本,使量產版:

  1. 它「濃縮」多個CSS文件中的一個
  2. 那麼它們最小化與YUI壓縮機
  3. 相同的腳本
  4. (頁面重構指向新生成的文件)

這樣你把對托馬斯•您的HTTP請求e文件,並從30%到70%獲得一些帶寬。也取決於gzip。

在我的情況

,dev的版本有: 18個CSS加權178ko 生產版本

1

我與喬爾同意在96ko降至1個CSS - 這就是我如何處理它。構建腳本會在每個版本通過FTP生產之前縮小CSS(和JS)。我只是在PHP中有一個開關,如:

if ($config->prod()) { 
    // incldue the minfied css 
} else { 
    // include all the original files 
} 
+0

這是一個有趣的方法。我可以試試看。 – Mcg1978 2012-01-20 12:50:42

0

我個人使用的工具來縮小和注入CSS每次我保存我的Less文件的瀏覽器。所以我立即看到每一個變化。這種方式很清楚發生了什麼。我不需要更多的參考線數。

我最近開始使用source maps,在再次檢查瀏覽器中的CSS時看到正確的文件和行號(我的文件較少)。我認爲這就是你要找的。我個人並不需要這麼多額外的幻想。