CSS 開發人員做什麼以及為什麼需要一個

已發表: 2022-03-11

CSS 開發人員是網絡專業人士，他們的主要職責是為訪問者的瀏覽器提供精美且風格化的產品。 幾乎每個網站都使用 CSS，但在現代 Web 開發堆棧中，CSS 通常不被認為是“平等的”。 不幸的是，這種誤解可能導致 CSS 被視為理所當然，甚至在某種程度上被忽視。

允許非 CSS 開發人員處理 CSS 通常會導致在您的代碼中引入 CSS hack 和錯誤，並可能給開發人員帶來不必要的挫敗感。 在本文中，我想讓每個人都熟悉這份工作所包含的內容，以便您更好地理解為什麼每個網站都需要可靠、專業的 CSS 開發人員。

CSS 開發人員做什麼？

讓我們從基礎開始。 為什麼 CSS 如此重要，CSS 開發人員究竟應該做什麼？

CSS 是一種特定的語言，因此它不能單獨存在。 它需要 HTML 才有意義。 所以，CSS 開發人員做的第一件事就是編寫 HTML 代碼。

編寫整潔的 HTML 總是很重要

編寫簡單、乾淨且組織良好的 HTML 是一項重大責任，因為不起眼的 HTML 文檔是您交付給最終用戶的第一件事。

如果您正在編寫可用於生產的 HTML 文檔，則應嘗試確保在文檔頭部包含所有必需和可選的標籤，以充分利用您的網站。 我說的是設置正確的文檔類型、語言、元標記、網站圖標、加載技術和 SEO。

一切可以幫助您的網站提高性能、更易於訪問，並為您的受眾和搜索引擎以及其他服務和工具提供更多曝光。 HTML 文檔的正文也不應該臃腫。 了解何時使用語義 HTML 標記、如何添加所需的 HTML 屬性以及如何避免深度嵌套或 divitis，不應被忽視，而應從項目一開始就實施。 沒有專業的開發人員在項目進行到一半時就開始遵循最佳實踐，但即使是看似基本的東西，例如 HTML，也經常做錯。

各種 HTML/CSS 組件和格式的插圖

整體設計往往決定了我們如何組織各種 HTML 組件。 CSS 開發人員與設計師密切合作，並不是每個設計師都使用相同的工具來提供設計。 熟悉 Sketch、Photoshop、InVision 或 Figma，並能夠“切片”設計，是 CSS 開發人員必備的技能。 人們應該始終牢記如何構建組件以使其能夠同時應用設計。 使用良好的命名約定，如 BEM 或 OOCSS，應該可以防止編寫臃腫的 HTML 或無法維護的 CSS 代碼。

JavaScript 無處不在

一些組件應該是交互式的，例如模式或工具提示。 這通常需要很好地掌握 JavaScript，而不是“深度”JavaScript，而是 JavaScript 事件和 DOM 處理。 DOM 處理可能具有挑戰性，因為您不想耗盡用戶的資源並使您的網站變得遲緩，或者更糟糕的是，使其崩潰並使其完全無響應。

JavaScript 世界正在快速發展，有時似乎每天都會出現新的框架和工具。 由於 JavaScript 非常受歡迎，如果您想使用最新的最佳實踐並為最終用戶提供最愉快的體驗，那麼保持循環至關重要。

CSS

CSS 也是如此，儘管許多人認為它的發展速度與 JavaScript 幾乎不一樣。 然而，諸如 CSS 變量、CSS 網格甚至 Flexbox 之類的新特性需要一些時間來掌握。

然後是瀏覽器支持，即使在今天仍然會造成問題。 您的網站在現代瀏覽器中可能看起來像一百萬美元，但在舊版瀏覽器中則不然。 IE11 可能支持 Flexbox，但話又說回來，它可能無法按預期工作。 知道如何避免這些問題是 CSS 開發人員工作的一部分。

值得慶幸的是，社區非常有幫助，像 Flexbugs 或 Gridbugs 這樣的網站可以節省大量時間。

CSS 工具、技術和原則

有時我們可以依靠任務運行程序或 Grunt、Gulp 和 webpack 等打包工具來幫助我們交付可靠的代碼。 您可以使用 linter、minifiers、babel 或 PostCSS 來增強您的代碼以轉譯代碼。

各種 CSS 工具和技術的插圖

然後我們需要考慮各種字體、排版、圖像、圖標、圖標字體、動畫、過渡和其他抽象方面，這些都是 CSS 開發人員日常任務的一部分。 每個功能都有其特殊性、局限性、問題和解決方案。 您掌握的功能和技術越多，就越容易在項目中設計和實現組件。

有大量的 CSS 屬性和值，一個人不可能知道一切。 幸運的是，我們的工具可以幫助我們，尤其是代碼編輯器和開發工具。 但是，當您需要解決 z-index 問題時，即使是工具也無法幫助您解決問題。 失敗是最好的學習方式。

我會說在使用 CSS 時尤其如此，這就是為什麼：

如果您從未嘗試過解決 z-index 問題，那麼您將永遠不會了解堆疊上下文。 如果您從未嘗試過覆蓋 Bootstrap 類，那麼您將永遠不會了解特異性。 如果您從未嘗試過解決浮動問題，您將永遠不會了解盒子模型。

有時，解決方案很簡單，但問一個問題卻很難。 與其他語言相比，您不能問為什麼我的循環不起作用。 你需要完整的上下文來解決 CSS 中的問題，這通常是很多人不理解的：級聯。

Cascade 是 CSS 中最好的特性，它應該對你有用，而不是對你不利。 一些開發人員通過發明 CSS-in-JS 之類的自定義方法來繞過它。 如果你將 CSS 打包在像 React 這樣的封裝環境中，你就不能在其他地方使用它。 我懷疑這是您在可擴展平台中想要的方法。 如果您對級聯有問題，請學會接受它，然後學習如何馴服它。

在我準備這篇文章時，Max Bock 寫了一篇關於 CSS 思維方式的文章，而這正是 CSS 開發人員需要做的。 CSS 開發人員在框內思考，預測內容修改，並儘可能避免使用固定數字，同時嘗試編寫盡可能少的代碼而不覆蓋默認值和上下文。

為什麼需要 CSS 開發人員？

大多數前端甚至全棧開發人員都可以編寫 CSS 代碼。 但並不是每個人都可以修復每個 CSS 錯誤或實現設計，而無需複雜的 HTML 代碼或在不必要的地方依賴 JavaScript。

專業的 CSS 開發人員關心代碼的最終細節，喜歡創建佈局和組件，即使是最複雜的，並且知道如何解決每個問題或錯誤。

CSS 編碼標準

在編寫任何代碼之前，最好有一些關於編寫代碼的基本規則。 CSS 開發人員應該尊重編碼標準——這對於項目的可維護性和可擴展性至關重要。

選擇在整個項目中使用的命名約定。 儘早建立命名約定可以幫助開發人員生成更好、更有條理的代碼。 還可以幫助參與項目的每個人通過單獨閱讀HTML代碼來了解組件結構和組件與元素之間的關係。

決定如何在 CSS 中處理縮進、選擇器類型、速記屬性、單位。 例如，如果編碼標準建議使用 rem 單位，請避免使用像素單位。 每個人都有不同的寫作/編碼風格，但作為專業人士，你必須能夠採用，更重要的是，理解每一個概念。

CSS 設計實現

在將設計轉換為代碼之前，您應該花時間了解每個頁面、佈局和組件。 如果可能的話，剖析每個頁面，創建一個頁面和組件列表，並嘗試找到一個模式。

如果您注意到一個組件出現在更多頁面上，您應該識別它周圍的環境並嘗試將其視為一個獨立的組件。 如果有類似的組件，例如卡片或列表，您可以擁有相同組件的變體。 通過這種方式，您可以重用 HTML 代碼並只編寫一點 CSS 代碼使其看起來經過修改。

嘗試在其他領域尋找模式也是一個好主意，比如排版和間距。 有時這會導致擁有可用於整個項目而不是單個頁面的輔助類。

組織你的 CSS 代碼

CSS 開發人員應該組織他們的代碼並為每個人創建一個有意義的結構。 在使用 CSS 處理器等工具時，CSS 開發人員應該記錄生成編譯代碼的過程。

如果需要，CSS 開發人員可以創建樣式指南。 在創建新頁面或決定如何處理現有頁面時，樣式指南可以作為參考。 我的建議是讓整個團隊在全球範圍內都可以使用樣式指南，因為在擁有視覺上下文時通常更容易做出決定。 樣式指南可以包含調色板、排版規則、編碼標準，甚至靜態頁面。 沒有限制，除了預算和你的想像力。

生產中的 CSS 代碼

編寫 CSS 代碼意味著處理跨瀏覽器問題、錯誤、動畫、過渡、響應性和打印樣式。 這些功能中的許多功能都不容易被全能開發人員管理。 我會說這些是總體上最不受歡迎的 CSS 任務，並不是每個開發人員都知道如何處理它們。 另一方面，專業的 CSS 開發人員知道（或至少應該知道）如何在考慮每個錯誤、瀏覽器和環境的情況下生成代碼。

使用現代方法是一種方法，但也不應該忽視支持舊瀏覽器和尊重用戶設置（如減少運動）。

CSS 開發人員也編寫 HTML 和 JavaScript 代碼。 這意味著資產交付是 CSS 開發人員的責任。 CSS 開發人員應負責加載字體、提取關鍵 CSS、使用延遲和異步 JavaScript 加載以及提供響應式圖像。

這些技術都不容易實現，也沒有靈丹妙藥。

CSS 開發人員可以為您做什麼

以上所有內容都解釋了為什麼您需要專門的 CSS 開發人員。 以下是他們處理的一些關鍵事項：

  • 確保每個項目成員都遵守編碼標準
  • 實施設計
  • 整理代碼
  • 編寫代碼
  • 修復錯誤
  • 了解新技術
  • 改進代碼

包起來

長期以來，關於 CSS 開發人員角色的存在和重要性的問題鼓勵的討論並不特別有建設性和善意。 讓我們嘗試一勞永逸地同意並承認 CSS 開發人員是一個合適的角色。

在他的文章The Great Divide中，Chris Coyier 引用了一些技術領導者的話，他們中的大多數人都同意應該有一個分歧，應該有一個基於 CSS 的角色，而不需要現代 JavaScript 框架的知識。 如果您知道的不僅僅是“僅 CSS”，這可能會有所幫助，但角色應該存在，並且應該被接受為等同於基於 JavaScript 的角色。

畢竟，您是想將您的產品交由可以將其打磨至完美的專業人士手中，還是滿足於足夠好？

進一步閱讀 Toptal 工程博客：

  • 如何在 CSS 中處理 SVG 動畫