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

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

1.Visual Studio Code

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

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

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

macOS中的Visual Studio代碼

2.Notepad++

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

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

Notepad++的界面

3.WebStorm

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

• 兼容性：Windows、macOS和Linux。
• 特殊功能：能夠與諸如Stylelint、Grunt、Gulp、以及NPM等Web開發(fā)工具無縫集成?？杀粌?nèi)置于各種工具中，實現(xiàn)調(diào)試、跟蹤、以及智能化的自動完成等功能。

4.Coda

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

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

5.Atom

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

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

可編輯CSS的Atom代碼編輯器

6.Sublime Text

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

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

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

7.Brackets

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

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

• 兼容性：Windows、macOS和Linux。
• 顯著特點：內(nèi)聯(lián)編輯。

用Barcket代碼編輯器來編輯CSS

8.Espresso

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

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

9.TextMate

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

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

10.bbEdit

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

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

原文標(biāo)題：Top 10 CSS Editors，作者：Thoriq Firdaus

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