整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
果我在用HTML+CSS編程，那么，我能算是名開發人員嗎？
作者 | Amadou Ibrahim
譯者 | 彎月，責編 | 郭芮
以下為譯文：
有好多次，別人說我算不上程序員，因為我在用HTML + CSS編程。我非常傷心，因為別人都不認為我是開發人員。我們討論了好幾個小時，網上也有很多關于這個話題的討論。但仍然還有人否認這一點，那么就讓我們在本文中好好探討一番。
在深入探討之前，讓我們先來了解一下HTML + CSS的基礎知識。
根據維基百科：
超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。
這意味著你需要使用HTML來構造顯示在網頁上的文檔。下面是一個基本的HTML頁面的例子：
<!DOCTYPE html>
<html>
<head>
<!-- Metadata goes here -->
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
除了HTML之外，你還可以利用CSS來美化頁面。這就是為什么我們會結合二者使用。
根據維基百科：
層疊樣式表（英語：Cascading Style Sheets，縮寫：CSS；又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表）是一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的計算機語言。
下面是一個CSS文件的示例：
*{
box-sizing: border-box; max-width: 100%;
}
body{
font-size: 1.25rem; padding-bottom: 70px;
background: #fff;
}
編程語言的結構
首先，我不止一次聽說有人認為HTML + CSS沒有編程結構。那么編程結構是什么？經過一番搜索后，我發現，現代編程語言的編程結構幾乎都如出一轍。控制結構和數據結構。別著急，且聽我慢慢道來。
控制結構
控制結構指的是，分析變量并根據給定的參數選擇程序執行順序的一塊程序。
控制結構包括順序控制、條件控制和循環控制。下面我來舉例說明。我使用Ruby語言來書寫示例。別擔心，Ruby很接近英語，非常易于理解。
順序控制：逐條執行的指令。在下面的示例中，我們將執行一系列指令。
# Sequences control-structures
## Set a new varibale age to 0.
age = 0
## Then another varibale required_age to 15.
required_age = 15
## Print this message "What is your age?" to the user
puts "What is your age?"
## Get the user input and store it in age. Type 14
age = gets.chomp.to_i
## Print this message "You are 14 year's old" to the user
puts "You are #{age} year's old"
條件控制：如果條件為true，則執行此處的代碼。程序根據條件的結果，決定要執行的代碼塊。
# Condition Control Structure
## Set a new varibale age to 15.
age = 15
## Then another varibale required_age to 16.
required_age = 16
## check if the user age is less than 16
if age < 16
## If the condition is checked, print the message "Sorry, you can't pass the driver license!" to the user
puts "Sorry, you can't pass the driver license!"
else
## If the condition is not checked, print this message "Great! You can pass your driver license" to the user
puts "Great! You can pass your driver license"
end
上述指定的代碼塊將循環執行多次，直到條件成立為止。示例中的條件是“counter”等于5。因此，這則消息輸出了5次。
# Loop Control Structure
## Set a variable "counter" to zero
counter = 1
## Iterate through the loop as long as "counter" is less than 5
while counter <=5 do
## Print "Get your driver license with LicenseGuru"
puts "Get your driver license with LicenseGuru"
## Add 1 to the current value of counter
counter+=1
end
那么，HTML+ CSS有這樣的控制結構嗎？你怎么看？
數據結構
什么是數據結構？維基百科上說：
數據結構（英語：data structure）是計算機中存儲、組織數據的方式。
簡單來說，數據結構表示組織數據、定義數據類型以及操作數據的方法。大多數編程語言都有不同類型的數據，包括字符串、整數、布爾值、數組、對象...
那么，HTML + CSS也有這種數據結構嗎？此外，還有人說HTML + CSS不具備圖靈完備性——那么，圖靈完備性又是什么？
我的第一反應也是發懵。但經過幾個小時的查閱后，我有了大致的了解。
簡而言之，在計算理論里，如果一系列操作數據的規則（如指令集、編程語言、細胞自動機）可以用來模擬單帶圖靈機，那么它是圖靈完備的。
圖靈機是英國數學家艾倫·圖靈于1936年提出的一種將人的計算行為進行抽象的數學邏輯機，其更抽象的意義為一種計算模型，可以看作等價于任何有限邏輯數學過程的終極強大邏輯機器。
圖靈機是一個規則、狀態和轉換的系統，并不是指真正的機器。
如此說來，HTML + CSS確實不具備圖靈完備性。因為HTML + CSS無法更改系統狀態。也無法做出決策或根據輸入更改狀態……
那么，我還能說HTML + CSS是編程語言嗎？
CSS的控制結構
是的，你沒看錯，CSS有自己的控制結構方式。下面是一些例子。
順序控制
與其他編程語言一樣，我們可以在CSS中逐行執行指令。
body{
// Set the background to white color
background:#fff;
// Set the font size to 20px
font-size: 20px;
// Set the background to yellow
background:yellow;
// Set the font size to 14px
font-size:14px
}
在上述代碼中，第一條指令被覆蓋， 所以最后的結果是：
條件控制
@media screen and (max-width: 567px) {
// Style 1
}
@media screen and (max-width: 900px) {
// style 2
}
在上述代碼中，如果設備屏幕的最大寬度為567px，則應用樣式1；如果最大寬度為900px，則應用樣式2。因此，這就是一個條件控制。
@supports (display: flex) {
navbar{
display:flex;
}
}
對于上述navbar的樣式代碼，如果用戶的設備支持，則顯示屬性將設置為“flex”。你甚至可以使用關鍵字“not”書寫false語句：
@supports not (display: flex) {
div { float: left; } /* alternative styles */
}
循環控制
你是認真的嗎？是認真的。CSS也有類似循環的指令。盡管看上去與其他編程語言的循環有所不同。CSS的循環指令沒有“for”循環或“while”循環。讓我們看一下這段代碼：
li a{
font-weight:700;
display: block;
padding: 15px;
margin-bottom:10px;
background:#333;
color:white;
text-align: center;
text-decoration: none;
}
li a.active{
background:red;
color:white;
}
第一段代碼告訴瀏覽器循環遍歷“li”元素內所有的“a”元素，然后應用給定的樣式。第二段代碼告訴瀏覽器再循環一遍。如果“a”元素的類為“active”，則應用給定的樣式。因此，我結合使用了循環和條件控制。
現在你是否同意HTML + CSS具有編程語言結構？你同意？那太好了！我們之間達成了共識，你可以走了。
哦？你還在繼續閱讀？你還有疑問？那么就讓我來一一解答吧。
如果有人說CSS具備圖靈完備性，你會說什么？你無言以對，是嗎？事實上，有一位名叫Eli Fox-Epstein的名人證明了這一點。他進行了一項實驗，并證明HTML + CSS具備圖靈完備性，而這個故事發生在2011年。有關的詳細信息，請點擊這里（https://accodeing.com/blog/2015/css3-proven-to-be-turing-complete）。
所以，你現在可以接受HTML + CSS是一種編程語言了嗎？
HTML + CSS就是當代網頁的“雙俠”（請參照電影《雙俠》）。
對于全世界所有的網站而言，無論其服務器端的語言是什么，前端都使用了HTML + CSS。
當目前為止，互聯網上的網站數目高達17億，供44億用戶使用。而且這個數字還在不斷增長。
這些網站又分為靜態網站和動態網站。靜態網站僅使用HTML + CSS構建。而動態網站還用到了其他語言。
其他語言是什么意思？
為了讓HTML + CSS大放異彩，你還需要其他的編程語言來潤色。常見的編程語言包括PHP、Python、Ruby、Javascript等等。Facebook、Twitter、Google和Medium都是動態網站。他們的網站因結合了多種語言而得以蓬勃發展。
感謝您的閱讀。如果你有不同的觀點，請在下方留言。
原文：https://medium.com/swlh/the-most-used-and-unrecognized-programming-languages-b0882e8c8c6f?
本文為 CSDN 翻譯，轉載請注明來源出處。
【End】
文來自為圖靈社區與CSS魔法的訪談CSS魔法， 原名張鵬，國內知名CSS技術專家，《CSS 揭秘》譯者，QCon 講師，CSS Conf 講師，前百姓網前端架構師。
CSS魔法：對一個專業的 CSS 開發者來說，首先，CSS2 的核心知識必須完全掌握。以《CSS權威指南》（第三版）為例，除了 “聲音樣式” 之外，這本書的所有內容都是應該透徹理解的。即使記不住某些冷僻屬性的名稱與行為，也需要知道在哪里可以快速查閱。
接下來，關于 CSS3，很多同學都問過我這樣一個問題：“魔法哥，現在瀏覽器都支持 CSS3 了，我跳過 CSS2 直接學 CSS3 可以嗎？”
在回答這個問題之前，我們需要先搞清楚 “CSS3” 到底是什么。讀過《CSS揭秘》這本書的同學應該都很清楚了，“CSS3” 是一個俗稱，并不是 W3C 的官方術語。基本上它是CSS2 之后更新或新增的 CSS 規范模塊的合稱。
實際上，CSS3 相對于 CSS2 并不是類似軟件版本更替那樣的升級。CSS2 的全稱是 “CSS Level 2”，后續的 CSS 規范并不是完全以替代品的形態出現的，某些 Level3 的 CSS 規范模塊（或新增的規范模塊）往往是基于 CSS2 來擴展的。
因此，對于 CSS 學習者來說，如果買了一本只講 CSS3 新增內容的教程或參考書，那還需要搭配 CSS2 的書來看。事實上，由于篇幅所限，市面上絕大部分以 “CSS3” 為賣點的圖書確實都不會重復講解 CSS2 的內容。看到這里，相信上面的問題在大家心中已經得出答案了吧。
魔法哥自己的學習路徑是這樣的：
如果新入門的同學面對龐雜的 CSS 體系感覺無從下手，不妨參考這條路徑。
CSS魔法：01.首先，推薦大家使用 CSS 預處理器。由于 CSS 并不是編程語言，并不具備抽象能力，當網站的規模發展到一定程度之后，原生 CSS 很難解決抽象與復用的問題。而預處理器則正好彌補了 CSS 在這方面的不足。
即使你不打算學習預處理器的特有語法，甚至還有些排斥，那也不妨嘗試利用它的模塊機制來拆分和組織代碼。由于預處理器大多兼容 CSS 原生語法，因此你可以保持原來寫代碼的習慣，僅利用預處理器在模塊化方面的功能。
對于多人合作的團隊來說，通過模塊來拆分代碼尤為重要。雖然引入預處理器會要求你在工作流中加入構建環節，但我認為這個成本是完全值得的。
02.做好 CSS 代碼的 “分層”。我設計的 CSS 架構通常都會由“Normalize + Reset → 通用基礎樣式 → UI 組件 → 頁面通用的布局框架 → 單個頁面的布局和樣式”這幾個層級構成，越往左越靠近架構，越往右越靠近業務。
劃好層級并把代碼寫到正確的層級去，可以帶來很多好處：在團隊分工上，可以把不同層級的代碼交給不同的人來開發和維護，相當于關注點分離；從架構角度來看，也可以實現 “控制復雜度” 這一重要目的。
03.善用工具。比如通過 Lint 程序來保障代碼規范的執行，通過構建工具來讓重復勞動盡可能自動化，通過 Autoprefixer 這樣的工具來加工或生成代碼，等等。俗話說，磨刀不誤砍柴工，多看多聽多試，用開放的心態去了解和嘗試新工具，往往會有不錯的收獲。
如果想問 “有哪些實用的 CSS 特性”，那我覺得至少要提一下 Flexbox。它是 CSS3 引入的更強大、更易用的布局方式，而且我們在移動端已經可以安全地使用 Flexbox 的基礎特性了。其它的特性，比如高級選擇符、漸變、動畫等高級特性，也非常有價值，我在編寫 UI 框架時都有實際應用。
此外，大家可能還想了解在編寫 CSS 時需要掌握的原則和思路。這里我會推薦《CSS揭秘》這本書中的“CSS 編碼技巧”一節。我一直想寫篇文章來講述自己多年積累的 CSS 經驗，但一直苦于找不到合適的切入點，總怕掛一漏萬。而當我讀到這一節時終于釋然——原來已經有人幫我做了這件事情！隨后我也將它親手翻譯了出來，也算了卻了一樁心事。
CSS魔法：確實，近些年前端領域的新技術、新工具、以及新的實踐方式都層出不窮，稍不留神就會有落伍的感覺。而每個人精力都是有限的，面對這樣的局面，難免會有一種疲于奔命的壓迫感。
我自己的應對方式是抓住核心，放棄自己很難精通的、一時用不到的、或者對當下想做的事情價值不大的技術方向。比如一路以來，我放棄了富媒體方向的 Flash，放棄了圖形與游戲方向的 Canvas 和 WebGL，放棄了單頁應用方向的 MV*，放棄了語言方向的 FP ，等等。
當然這些 “放棄” 都是戰略性的，而不是永久性的。畢竟精力有限，不可能面面俱到。不過，一旦某個方向變成自己必須攻克的戰略要地，那我也必然會義無反顧躍入新坑。
除了在技術范疇內作取舍，我還會把一部分精力放在 “人” 身上——就是寫代碼的這群人。個人英雄的時代一去不復返了，單打獨斗能力再強，也難成氣候。因此，幫助身邊的小伙伴快速成長，打造一支梯隊完備、技能互補的前端開發團隊，往往更具現實意義。有些時候，這也可以成為一種 “突破瓶頸” 的解決方案——每當團隊里的小伙伴攻克了某項新技術時，我都可以寬慰自己：我不會，沒關系，有小伙伴可以頂上！
CSS魔法：哇噢，這個問題完全是面試題的既視感啊！好的，我來好好回答一下，重溫被面試的感覺。
根據 Web 標準的 “分離” 原則，網頁界面由三層構成：結構層、表現層、行為層。這三者在技術上分別由 HTML、CSS、JS （JavaScript）來實現。大家都知道有句話叫 “術業有專攻”，在網頁上也是一樣，不同的層應該由不同的技術來實現。
在近些年，CSS 的能力得到了不少提升，比如：hover 偽類的增強以及 :checked、:target 等新偽類的出現，令原本只能由 JS 實現的交互功能也可以用 CSS 來實現了。這意味著，在某些場景下，這兩者的功能有重疊的地方。
不過從原理上來說，CSS 只具備修改渲染樹的能力，無法修改 DOM 結構（“渲染樹” 是指 DOM 樹在應用樣式之后產生的、用于渲染網頁界面的數據模型）。CSS 可以通過 display、visibility、opacity 等屬性來控制元素的顯隱，但無法把元素從 DOM 樹上刪除或移動，也無法創建新的 DOM 元素。這是 CSS 的能力邊界。
雖然這兩者的功能有一些重疊，但它們并不是互斥的。JS 和 CSS 是可以合作的，而且我們應該擅用這種合作關系，發揮各自所長。舉例來說，CSS 的聲明式特性比較簡單易懂，在管理樣式方面更加易于書寫和維護。因此，在實現某些動態效果的時候，我們可以把不同狀態的樣式以類的形式寫在 CSS 中，然后讓 JS 通過切換元素的類來實現樣式的變化。
CSS魔法：簡單地說：不可能。
首先說一下 “UI” 這個概念。UI 并不是靜態的布局和樣式，不是設計師發給我們的 PSD 圖像。UI 是用戶界面，它的核心是交互，而交互需要由 JS 來實現。交互以及交互傳達出的用戶體驗，才是眼下前端的核心價值。
接下來，我們回到實際的開發場景中來看待這個問題。如果是團隊作戰，那么團隊中的個體當然可以有所側重和取舍。在整個技術棧中，自己放下的某個環節只要有小伙伴可以頂上，那就沒啥大問題。不過如果是打算通吃前后端的全棧工程師給自己做職業規劃，那么 JS 是繞不開的。
CSS魔法：這要看你給自己的定位是什么。我認為技術工作者大致可以分為兩類。第一類人單純被技術本身所吸引——相信我們都有感觸，技術本身就有一種迷人的美！而第二類人把技術作為手段，他們學習技術的最終目的是通過技術來推動一些事。這兩種技術人都有各自合理的出發點，并沒有孰對孰錯之分。
那么，如果你是第一類人，那你對自己的規劃和定位必然是某個領域的技術專家。所有有價值的技術都應該被你吃透，而且相信你自己也會有源源不斷的強烈興趣，去把這些技術掰開了、揉碎了研究到極致。
而如果你是第二類人，那么 “知其所以然” 就不是必須的了。尤其是在團隊中，你可以把 “知其所以然” 的任務交給技術專家，把有限的精力投入到更適合自己的地方去。
CSS魔法：我這些年寫博客始終以初中級開發者作為主要受眾，創建的“CSS魔法” 微信公眾號也仍然關注前端初學者群體。因此可以聊的經驗有很多，最重要的應該是——“系統學習、打好基礎”，因為真正基礎的東西是不會過時的。
我也曾模仿別人網站的代碼，或是在網上收集別人發表的各種技巧，然后把找來的一句句代碼拼湊在一起。雖然這種方法通常也可以生效，但我完全不知其所以然，那些代碼片斷對我來說無異于外星人的咒語。由于無人指導，無法系統地學習知識，當時的狀態就像是在黑暗的迷宮中摸索一樣。
當時在書店里能找到的相關書籍也無非是一些迎合國人 “短平快” 心理的快餐書，什么“現學現用”“代碼速查 300 例” 之類。我是一個喜歡打破沙鍋問到底的人，這些沒頭沒尾的所謂技巧顯然無法滿足我的好奇心，失望而歸。
幾年之后，以圖靈為代表的科技圖書公司開始引進國外的經典教程和參考書。當《精通CSS》《JavaScript 高級程序設計》這些著作捧到我手上時，你可以想像我當時有多么欣喜若狂。
在瘋狂求知的過程中，我發現，前些年我在網上費盡辛苦收集到的珍稀黑魔法，其實在書里都有著更加全面和系統的講解。當我穩固地掌握了 HTML、CSS、JS 的基礎知識之后，我驚訝地發現，原先那些看似神奇、背都背不下來的外星咒語，早已融入我的血液，成為信手拈來的本能。
現在的孩子們是幸福的，你們生活在一個信息通暢、資源富足的時代。因此不需要眼巴巴地乞求 “大神們” 施舍只言片語的秘技，只要多讀幾頁書，你也可以成為別人眼中的大神！
希望這樣的“CSS魔法”能對大家有所幫助！
、HTML表單
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
