【51CTO.com快譯】作為一種簡單的語言，CSS雖然能夠在不需要特殊編輯器的情況下，即可完成代碼的編寫，但是不可否認的是：如果擁有合適的代碼編輯器，開發者將能夠在編寫CSS代碼時，將錯誤最小化，并在總體上提高自身的效率。

在實際工作中，我們往往能夠看到：一些資深的開發人員擁有著自己的一套得心應手的工具譜。通過各種高效的代碼編輯器，他們能夠靈活地適用于不同的需求和項目場景。當然，如果您是一名剛入行的、或是初涉CSS的新手的話，我們將在此為您重點介紹幾種具有出色功能的優秀代碼編輯器。在它們之中，有的屬于免費，而有的屬于付費。總的來說，這些工具各有各的特點和適用場景。事不宜遲，下面就讓我們開始逐一了解吧。

1.Visual Studio Code

和我們將要在下面介紹的其他代碼編輯器相比，Visual Studio Code是一個相對較新的代碼編輯器。不過，目前它已迅速成為了最受歡迎的代碼編輯器之一，尤其是在Web開發人員圈內。

Visual Studio Code具有針對多種語言的大量語法突出顯示功能，其中包括諸如：SCSS和LESS等CSS和CSS預處理器(Pre-processors)。與此同時，CSS IntelliSense、CSS Peek和CSS Modules等擴展模塊也會憑借著使用CSS，而變得更加強大。

• 兼容性：Windows、macOS和Linux。
• 特殊功能：能夠方便開發人員快速地上手。它不但可與Gulp和Grunt等許多語言和工具一起使用，并且具有大量的擴展模塊。

macOS中的Visual Studio代碼

2.Notepad++

作為一個免費的源代碼編輯器，Notepad++被認為是Windows“記事本”的替代品。它不但簡單、運行快速，并且支持CSS等多種語言。在編寫CSS時，它可以給開發者提供Word補全、函數補全、以及函數參數提示之類的服務，以提高整體的工作效率。

• 兼容性： Windows。
• 特殊功能：語法突出顯示與折疊、宏記錄和回放、以及文檔結構圖。

Notepad++的界面

3.WebStorm

WebStorm是Jetbrains公司旗下一款JavaScript開發工具。JetBrain的IDE可以對包括CSS在內的所有內容，實現正確的自動化完成功能，以方便您隨時獲悉有關CSS問題的提示。通過與Stylelint之類工具進行“開箱即用”式地集成，WebStorm也可以幫助您格式化、并保持CSS代碼的一致性。

• 兼容性：Windows、macOS和Linux。
• 特殊功能：能夠與諸如Stylelint、Grunt、Gulp、以及NPM等Web開發工具無縫集成。可被內置于各種工具中，實現調試、跟蹤、以及智能化的自動完成等功能。

4.Coda

Coda是一種具有內置CSS編輯器的高級代碼編輯器。通過為您提供兩種CSS編輯模式，它可以為開發者提供更加靈活的設計體驗，并能夠在代碼被更改之后立即展示結果。值得一提的是，您還可以在編輯器的實時預覽(Live Preview)工具中覆蓋某個網站的CSS。

• 兼容性：macOS。
• 特殊功能：通過與TouchBar集成，提供實時的預覽、以及內置的SFTP/FTP。

5.Atom

Atom是由Github構建的免費開源的編輯器。它不僅僅具有代碼編輯功能，還帶有一個嵌入式的Git Control，可與GitHub進行無縫集成。您可以安裝多個CSS附加組件，以增強用戶對CSS編輯的體驗。

• 兼容性：Windows、macOS和Linux。
• 特殊功能：既可以通過各種API輕松地實現擴展和破解，又能夠與CSS、以及時下流行的CSS預處理器配合使用。

可編輯CSS的Atom代碼編輯器

6.Sublime Text

Sublime Text是另一種流行的Web開發代碼編輯器。在提供跨平臺工作的前提下，它可以原生地支持包括CSS在內的多種語言和標記語言。同時，它也提供了許多擴展模塊，以改善用戶在使用編輯器時的CSS編輯體驗。另外，Sublime Text還引入了其他項功能，其中包括：多行選擇(Multiline selection)、“跳轉到任何地方(Go to Anywhere)”、以及能夠提高開發人員工作效率的Command Pallete。

• 兼容性：Windows、macOS和Linux。
• 特殊功能：運行快速，且提供高級的代碼編輯功能。包括：“跳轉到任何地方”和多行選擇，以及subl CLI。

Sublime Text代碼編輯器可在macOS上運行

7.Brackets

它是由Adobe Systems創建的免費、輕量級的編輯器，可專門用于Web開發。由于Brackets是用JavaScript、HTML和CSS編寫的，因此它能夠“原生地”支持CSS預處理器。

通過所謂“內聯編輯(Inline Editing)”的方式，Brackets向用戶引入了獨特的編輯體驗。您可以同時按下Command(或Ctrl)+ E，以便讓Brackets在嵌入式窗口中顯示帶有某個ID的所有CSS選擇器。您可以直接在當前的文件內編輯CSS選擇器，而不必在多個文件之間反復跳轉。

• 兼容性：Windows、macOS和Linux。
• 顯著特點：內聯編輯。

用Barcket代碼編輯器來編輯CSS

8.Espresso

Espresso是一款界面精美的macOS應用程序，可被用于代碼編輯。由于它帶有一個不錯的GUI工具，因此用戶可以輕松地編輯各種CSS樣式。在編輯樣式表時，Espresso將顯示在屏幕右側欄的下半部分，您可以用它來調整文本樣式、文本顏色、對齊方式、字體、大小、行高以及布局，其中包括：填充、邊距、顯示樣式、以及浮點等。

• 兼容性：macOS。
• 特殊功能：屬于編輯CSS的GUI工具，可原生支持SCSS和LESS，并帶有自動完成等功能。

9.TextMate

作為一款適用于macOS的代碼編輯器，TextMate具有各種高級的編輯功能，以及針對包括CSS在內的多種編程語言的原生支持。TextMate語法在開發者圈內小有名氣，其.tmLanguage也廣受歡迎。前面提到的Atom和Sublime Text等許多流行的代碼編輯器都采用了.tmLanguage，來創建自定義的語法突出顯示。

• 兼容性：macOS。
• 特殊功能：其原生宏(Native Macros)支持自動化的重復性任務執行，代碼片段(Snippets)，以及與Shell的集成。

10.bbEdit

bbEdit也被稱為TextWrangler，它是為macOS構建的輕量級、且高級的代碼編輯器。除了諸如：能為各種編程語言的語法著色，實現代碼折疊、以及代碼自動完成等基本功能之外，bbEdit也具有內置的SFTP/FTP支持。同時，它也能夠與諸如：AppleScript、Automator、以及Unix腳本等各種macOS功能函數無縫地集成。

• 兼容性：macOS。
• 特殊功能：能夠與macOS集成，以及帶有可用于編輯HTML的內置GUI工具。

原文標題：Top 10 CSS Editors，作者：Thoriq Firdaus

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】