別忘了前端是靠什么起家的！！！
共 7974字，需瀏覽 16分鐘
·
2024-06-25 09:20
點(diǎn)擊上方 前端Q，關(guān)注公眾號(hào)
回復(fù)加群，加入前端Q技術(shù)交流群
一、忘了最基礎(chǔ)的東西
前端開(kāi)發(fā)的核心構(gòu)建在三大基石技術(shù)上：HTML、CSS和JavaScript。回想起多年前，前端開(kāi)發(fā)者常被戲稱(chēng)為“切圖仔”，但就是這樣的角色，通過(guò)精湛的CSS技巧，能夠?qū)崿F(xiàn)各種復(fù)雜的交互和特效，展現(xiàn)出前所未有的網(wǎng)頁(yè)魔法。
這是那些專(zhuān)注于服務(wù)端開(kāi)發(fā)的工程師所難以企及的領(lǐng)域。
因此，前端工程師這一職業(yè)逐漸嶄露頭角，早期的培訓(xùn)班甚至設(shè)立了專(zhuān)門(mén)的課程來(lái)傳授這些技能。
然而，隨著時(shí)間的推移，UI組件庫(kù)和框架變得越來(lái)越普及，HTML和JavaScript的重要性依舊被人們所認(rèn)可，但CSS技能卻逐漸被邊緣化，甚至有所忽視。
在一次代碼走查中，發(fā)現(xiàn)一個(gè)擁有三四年前端開(kāi)發(fā)經(jīng)驗(yàn)的同事，連CSS最基本的類(lèi)型選擇器都掌握不熟練。這一現(xiàn)象令人感到憂慮。
二、令人無(wú)語(yǔ)的代碼
在一次對(duì) useState 的使用場(chǎng)景進(jìn)行治理的過(guò)程中。發(fā)現(xiàn)了一段感覺(jué)很無(wú)語(yǔ)的代碼。代碼我簡(jiǎn)化一下如下所示：
import React, { useState } from 'react';
import { Input } from 'antd';
import type { FC } from 'react';
import styles from './index.less';
const Test: FC = () => {
const [isFocus, setIsFocus] = useState(false);
return (
<Input
className={isFocus ? styles['input-focus'] : styles.input}
onFocus={() => {
setIsFocus(true);
}}
onBlur={() => {
setIsFocus(false);
}}
/>
);
};
export default Test;
.input-focus{
background: #f2f3f;
}
三、詢問(wèn)緣由
這段代碼的目的是根據(jù)輸入框的焦點(diǎn)狀態(tài)（聚焦或失去焦點(diǎn)）來(lái)改變其樣式，邏輯上沒(méi)有問(wèn)題。
我找到編寫(xiě)這段代碼的同事詢問(wèn)：“為什么需要定義一個(gè)isFocus狀態(tài)呢？”
他看了代碼良久，有些疑惑地解釋說(shuō)：“這是為了追蹤輸入框的聚焦?fàn)顟B(tài)，從而在聚焦時(shí)改變背景色。”
“這個(gè)狀態(tài)還有其他用途嗎？”我追問(wèn)。
“沒(méi)有，就這個(gè)作用。有問(wèn)題嗎？”他回答。
我繼續(xù)探詢：“不使用isFocus狀態(tài)，我們還能達(dá)到同樣的效果嗎？”
他思考了一會(huì)兒：“如果不添加類(lèi)名來(lái)標(biāo)識(shí)輸入框的聚焦?fàn)顟B(tài)，我們?cè)趺磪^(qū)分呢？”
我提出了另一種方案：“我們能不能僅用CSS來(lái)實(shí)現(xiàn)這個(gè)效果？”
他遲疑了一下：“但是CSS怎么能識(shí)別輸入框是否聚焦呢？”
我提醒他：“你有沒(méi)有試過(guò)使用偽類(lèi)選擇器？”
“偽類(lèi)？我通常只用類(lèi)選擇器。”他回答。
我解釋道：“我們可以使用:focus偽類(lèi)來(lái)實(shí)現(xiàn)這個(gè)效果。你可以先回去繼續(xù)你的工作。”
四、審查他另外的代碼
我繼續(xù)審查了這位同事的其他代碼，發(fā)現(xiàn)他對(duì)CSS的理解似乎并不深入。例如，為了實(shí)現(xiàn)列表的斑馬紋效果，理應(yīng)直接使用:nth-child(odd)和:nth-child(even)選擇器，但他卻通過(guò)在遍歷過(guò)程中判斷索引是奇數(shù)還是偶數(shù)來(lái)分別添加不同的類(lèi)選擇器實(shí)現(xiàn)這一效果。
此外，他同時(shí)使用了float: left和position: absolute，這在布局中是矛盾的組合。
他還通過(guò)JavaScript動(dòng)態(tài)添加類(lèi)選擇器來(lái)改變輸入框提示文字的字體顏色，還一直重復(fù)定義color和font-size而不懂這些可以繼承。
我不確定這是否反映了他的態(tài)度問(wèn)題或是能力問(wèn)題，在現(xiàn)在只出不進(jìn)，內(nèi)部消化的環(huán)境下，我默默地記錄下這些，以便將來(lái)作為評(píng)估的參考。
五、關(guān)鍵是理解而不是記憶
也許會(huì)有人覺(jué)得我要求的太苛刻，也許這位同事只是忘記了有這幾個(gè)CSS選擇器。的確，CSS選擇器的種類(lèi)眾多，達(dá)到60多種，可能會(huì)讓人難以記住每一個(gè)。
然而，重點(diǎn)并不在于能否一一背誦每個(gè)選擇器，而在于理解它們各自的功能和使用場(chǎng)景。
這樣，當(dāng)面對(duì)特定的樣式需求時(shí)，我們可以輕松地查找并應(yīng)用最合適的選擇器來(lái)實(shí)現(xiàn)目標(biāo)效果。
最基本的元素選擇器、類(lèi)選擇器、和ID選擇器因其簡(jiǎn)潔直觀而被頻繁使用。但是，深入探索那些不那么顯眼的選擇器——如通配符選擇器、組合選擇器、屬性選擇器、偽類(lèi)選擇器、和偽元素選擇器——同樣至關(guān)重要。
這些選擇器賦予了我們更精細(xì)的控制權(quán)，使得我們能夠創(chuàng)造出更加復(fù)雜和細(xì)膩的視覺(jué)效果。
總之，我們不必強(qiáng)迫自己記住所有CSS選擇器。更為重要的是認(rèn)識(shí)到CSS選擇器的多樣性和強(qiáng)大之處。
這種認(rèn)識(shí)使我們能夠在遇到具體的樣式挑戰(zhàn)時(shí)，知道如何尋找解決方案，從而更高效地運(yùn)用CSS優(yōu)化我們的代碼。
為了真正理解這些選擇器，我們需要思考它們被設(shè)計(jì)出來(lái)的原因——它們是如何幫助我們更好地控制樣式，應(yīng)對(duì)各種布局和視覺(jué)挑戰(zhàn)的。這種深入的理解方式，遠(yuǎn)比簡(jiǎn)單的記憶更為重要和有效。
六、為啥需要偽類(lèi)選擇器
偽類(lèi)選擇器在CSS中的存在有著重要的意義和作用。它們提供了一種方式來(lái)選擇HTML文檔中無(wú)法通過(guò)簡(jiǎn)單選擇器（如元素選擇器、類(lèi)選擇器或ID選擇器）直接選擇的元素。偽類(lèi)選擇器的設(shè)計(jì)初衷和主要用途包括以下幾點(diǎn)：
1、表達(dá)元素的特定狀態(tài)
偽類(lèi)選擇器允許開(kāi)發(fā)者根據(jù)用戶與頁(yè)面的交互來(lái)改變?cè)氐臉邮剑恍枰淖僅TML代碼。
例如，:hover偽類(lèi)可以用來(lái)改變鼠標(biāo)懸停在鏈接或按鈕上時(shí)的樣式，:focus偽類(lèi)用于當(dāng)元素獲得焦點(diǎn)時(shí)（比如輸入框被點(diǎn)擊時(shí)），而:active偽類(lèi)則用于元素被激活（通常是被點(diǎn)擊）的瞬間。
這些都是基于用戶行為的動(dòng)態(tài)變化，通過(guò)CSS直接實(shí)現(xiàn)，無(wú)需JavaScript介入，提高了網(wǎng)頁(yè)的交互性和用戶體驗(yàn)。
2、選擇特定位置的元素
偽類(lèi)選擇器還可以用來(lái)選擇處于特定位置的元素，例如第一個(gè)子元素、最后一個(gè)子元素或者是父元素的唯一子元素。
這對(duì)于設(shè)計(jì)復(fù)雜的布局和樣式非常有用，尤其是在處理列表、表格和導(dǎo)航菜單時(shí)。
例如，:first-child、:last-child、:nth-child()等偽類(lèi)選擇器，它們提供了一種靈活的方式來(lái)選擇和樣式化這些特定位置的元素。
3、選擇特定屬性的元素
雖然屬性選擇器（如[attribute=value]）可以用來(lái)基于元素的屬性選擇元素，但某些偽類(lèi)選擇器（如:checked）提供了更為簡(jiǎn)便的方式來(lái)選擇具有特定屬性的元素。
例如，:checked偽類(lèi)選擇器可以選擇所有選中的復(fù)選框和單選按鈕，這對(duì)于創(chuàng)建自定義表單控件的樣式非常有用。
4、增強(qiáng)可訪問(wèn)性
偽類(lèi)選擇器還可以增強(qiáng)網(wǎng)頁(yè)的可訪問(wèn)性。例如，:focus偽類(lèi)可以用來(lái)為獲得焦點(diǎn)的元素定義明顯的樣式，這對(duì)于鍵盤(pán)導(dǎo)航用戶來(lái)說(shuō)非常重要。
通過(guò)提供視覺(jué)反饋，用戶可以更容易地識(shí)別當(dāng)前交互的元素，從而提高網(wǎng)站的可訪問(wèn)性。
5、無(wú)需額外的HTML標(biāo)記
使用偽類(lèi)選擇器，開(kāi)發(fā)者可以在不增加額外HTML標(biāo)記的情況下，實(shí)現(xiàn)復(fù)雜的樣式和布局。
這有助于保持HTML代碼的簡(jiǎn)潔和語(yǔ)義化，同時(shí)還可以減少頁(yè)面的大小和提高加載速度。
總之，偽類(lèi)選擇器為CSS提供了強(qiáng)大的功能，使得開(kāi)發(fā)者能夠以更細(xì)致和動(dòng)態(tài)的方式控制網(wǎng)頁(yè)的樣式。
它們是現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的工具，使得網(wǎng)頁(yè)能夠響應(yīng)用戶的交互，同時(shí)保持代碼的整潔和高效。
七、為啥需要偽元素選擇器
偽元素選擇器在CSS中的引入，為網(wǎng)頁(yè)設(shè)計(jì)和內(nèi)容表現(xiàn)提供了更加豐富和靈活的手段。
偽元素選擇器允許開(kāi)發(fā)者訪問(wèn)并樣式化一個(gè)元素的特定部分，或者在文檔樹(shù)中虛擬地創(chuàng)建新的元素，而這些通常不能通過(guò)HTML直接實(shí)現(xiàn)。
偽元素選擇器的存在有幾個(gè)重要的原因和用途：
1、訪問(wèn)和樣式化文檔的特定部分
偽元素選擇器使得開(kāi)發(fā)者能夠訪問(wèn)并樣式化元素的特定部分，比如第一行文本、第一個(gè)字母、或者元素之前和之后的內(nèi)容。例如，::first-line 和 ::first-letter 偽元素分別允許開(kāi)發(fā)者為元素的第一行文本和第一個(gè)字母設(shè)置特定的樣式。
這在打造具有吸引力的排版和閱讀體驗(yàn)時(shí)非常有用。
2、在不改變HTML結(jié)構(gòu)的情況下添加內(nèi)容
通過(guò)使用 ::before 和 ::after 偽元素，開(kāi)發(fā)者可以在元素的內(nèi)容之前或之后插入新的內(nèi)容或裝飾，而不需要修改HTML代碼。
這種方法非常適合添加圖標(biāo)、裝飾性元素或者是為元素添加特殊的前綴或后綴，同時(shí)保持HTML的清晰和語(yǔ)義化。
3、創(chuàng)建視覺(jué)效果
偽元素選擇器也常被用于創(chuàng)建特殊的視覺(jué)效果，比如自定義的清除浮動(dòng)方法（使用 ::after 清除浮動(dòng)），或者是設(shè)計(jì)復(fù)雜的背景裝飾和形狀。
這些都可以通過(guò)偽元素以及結(jié)合CSS的其他特性（如background、border、box-shadow等）來(lái)實(shí)現(xiàn)。
4、提高網(wǎng)頁(yè)性能
使用偽元素可以在不增加額外HTML元素的情況下實(shí)現(xiàn)復(fù)雜的設(shè)計(jì)，這有助于減少DOM的大小，從而提高網(wǎng)頁(yè)的性能。通過(guò)減少頁(yè)面加載時(shí)需要解析的HTML標(biāo)簽數(shù)量，可以加快頁(yè)面的渲染速度。
5、保持HTML的語(yǔ)義化
通過(guò)使用偽元素來(lái)添加裝飾性內(nèi)容或樣式，開(kāi)發(fā)者可以避免在HTML中添加非語(yǔ)義化的標(biāo)記。
這有助于保持HTML文檔的清晰和語(yǔ)義化，使得文檔的結(jié)構(gòu)更加明確，也更容易被搜索引擎優(yōu)化（SEO）和屏幕閱讀器理解。
總之，偽元素選擇器為CSS提供了強(qiáng)大的功能，使得開(kāi)發(fā)者能夠以更細(xì)致和動(dòng)態(tài)的方式控制網(wǎng)頁(yè)的樣式和內(nèi)容。
它們是現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的工具，允許開(kāi)發(fā)者在不犧牲HTML語(yǔ)義化的前提下，實(shí)現(xiàn)復(fù)雜和創(chuàng)新的設(shè)計(jì)。
八、為啥需要屬性選擇器
屬性選擇器在CSS中的引入提供了一種強(qiáng)大的方式來(lái)根據(jù)元素的屬性及其值來(lái)選擇元素，從而應(yīng)用特定的樣式。這種選擇器的存在和使用有幾個(gè)關(guān)鍵的原因和優(yōu)勢(shì)：
1、精確選擇和樣式化元素
在復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)中，開(kāi)發(fā)者可能需要對(duì)具有特定屬性或?qū)傩灾档脑貞?yīng)用樣式，而不是僅基于元素類(lèi)型、類(lèi)或ID。屬性選擇器使得這種精確選擇成為可能。
例如，可以選擇所有設(shè)置了target="_blank"屬性的<a>標(biāo)簽，并為它們應(yīng)用特定的樣式，以提示用戶這些鏈接將在新窗口中打開(kāi)。
2、提高CSS規(guī)則的靈活性
屬性選擇器增加了CSS規(guī)則的靈活性，允許開(kāi)發(fā)者基于元素的屬性和屬性值來(lái)創(chuàng)建復(fù)雜的選擇條件。
這意味著開(kāi)發(fā)者可以在不修改HTML結(jié)構(gòu)的情況下，通過(guò)CSS實(shí)現(xiàn)更多的設(shè)計(jì)需求和響應(yīng)式布局。
3、增強(qiáng)樣式的可維護(hù)性
使用屬性選擇器，開(kāi)發(fā)者可以避免在HTML中過(guò)度使用類(lèi)或ID，從而簡(jiǎn)化HTML結(jié)構(gòu)并提高樣式的可維護(hù)性。
當(dāng)需要基于相同屬性的元素應(yīng)用統(tǒng)一的樣式時(shí)，只需在CSS中定義一次相應(yīng)的屬性選擇器規(guī)則，而不是在HTML中為每個(gè)元素重復(fù)添加類(lèi)或ID。
4、促進(jìn)更好的語(yǔ)義化和可訪問(wèn)性
屬性選擇器可以用來(lái)增強(qiáng)文檔的語(yǔ)義化和可訪問(wèn)性。例如，通過(guò)選擇具有特定role屬性的元素并為它們應(yīng)用樣式，開(kāi)發(fā)者可以幫助提高網(wǎng)頁(yè)對(duì)于屏幕閱讀器等輔助技術(shù)的可訪問(wèn)性。
5、實(shí)現(xiàn)條件樣式
在某些情況下，開(kāi)發(fā)者可能希望僅在元素具有特定屬性或?qū)傩灾禃r(shí)才應(yīng)用樣式。屬性選擇器使得這種條件樣式化成為可能，無(wú)需額外的類(lèi)或ID，也無(wú)需使用JavaScript。
這種方式非常適合實(shí)現(xiàn)基于特定數(shù)據(jù)屬性（data-*屬性）的樣式變化。
示例
假設(shè)我們想為所有含有特定屬性data-tooltip的元素添加一個(gè)工具提示樣式，我們可以使用如下CSS規(guī)則：
[data-tooltip] {
position: relative;
cursor: pointer;
}
[data-tooltip]:before {
content: attr(data-tooltip);
/* 更多的樣式規(guī)則來(lái)定義工具提示的外觀 */
}
這個(gè)示例展示了如何僅通過(guò)CSS和HTML屬性來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的工具提示功能，無(wú)需修改HTML結(jié)構(gòu)或使用JavaScript。
總之，屬性選擇器為CSS提供了更多的選擇和樣式化能力，增加了樣式表的靈活性和可維護(hù)性，同時(shí)促進(jìn)了更好的文檔結(jié)構(gòu)和語(yǔ)義化。
九、為啥需要組合選擇器
組合選擇器在CSS中扮演著至關(guān)重要的角色，它們提供了一種強(qiáng)大的機(jī)制來(lái)選擇具有特定關(guān)系的元素，從而允許開(kāi)發(fā)者以更精細(xì)、更具體的方式應(yīng)用樣式。組合選擇器的存在和使用主要基于以下幾個(gè)原因：
1. 提高選擇器的精確性
在復(fù)雜的網(wǎng)頁(yè)布局中，僅使用簡(jiǎn)單選擇器（如元素選擇器、類(lèi)選擇器或ID選擇器）往往難以精確地定位到特定的元素。
組合選擇器通過(guò)定義元素之間的關(guān)系（如父子關(guān)系、相鄰關(guān)系等），使得開(kāi)發(fā)者可以更精確地選擇到目標(biāo)元素。這種精確性對(duì)于實(shí)現(xiàn)特定的布局和樣式效果至關(guān)重要。
2. 優(yōu)化CSS的結(jié)構(gòu)
使用組合選擇器，可以避免在HTML中過(guò)度使用類(lèi)或ID來(lái)達(dá)到樣式目的，從而使得CSS的結(jié)構(gòu)更加清晰和簡(jiǎn)潔。
這種方法有助于提高代碼的可維護(hù)性和可讀性，同時(shí)減少了因重復(fù)定義樣式而導(dǎo)致的冗余。
3. 實(shí)現(xiàn)更復(fù)雜的樣式設(shè)計(jì)
組合選擇器提供了一種方式來(lái)實(shí)現(xiàn)基于特定元素關(guān)系的復(fù)雜樣式設(shè)計(jì)。例如，開(kāi)發(fā)者可以使用子選擇器（>）來(lái)僅為特定父元素的直接子元素應(yīng)用樣式，或使用相鄰兄弟選擇器（+）來(lái)為緊跟在特定元素后的兄弟元素應(yīng)用樣式。
這種靈活性使得開(kāi)發(fā)者能夠創(chuàng)造出更加動(dòng)態(tài)和富有層次感的頁(yè)面布局和視覺(jué)效果。
4. 提升樣式的可復(fù)用性
通過(guò)使用組合選擇器，開(kāi)發(fā)者可以為特定的元素關(guān)系定義樣式，而不是針對(duì)特定的類(lèi)或ID。
這種做法增加了樣式的可復(fù)用性，因?yàn)橄嗤慕M合選擇器樣式可以在不同的HTML結(jié)構(gòu)中被復(fù)用，只要這些結(jié)構(gòu)符合選擇器定義的元素關(guān)系。
5. 保持HTML的語(yǔ)義化
組合選擇器的使用有助于保持HTML代碼的語(yǔ)義化，因?yàn)樗鼈冊(cè)试S開(kāi)發(fā)者基于元素之間的自然關(guān)系來(lái)應(yīng)用樣式，而不是強(qiáng)迫添加額外的類(lèi)或ID。
這樣不僅使得HTML結(jié)構(gòu)更加清晰，也有助于搜索引擎優(yōu)化（SEO）和提高網(wǎng)站的可訪問(wèn)性。
示例
假設(shè)我們想為一個(gè)列表中的第一個(gè)項(xiàng)目添加特殊樣式，我們可以使用子選擇器和偽類(lèi)選擇器的組合來(lái)實(shí)現(xiàn)這一點(diǎn)：
ul > li:first-child {
color: red;
}
這個(gè)示例展示了如何使用組合選擇器來(lái)精確選擇并樣式化特定的元素，而無(wú)需為該元素添加額外的類(lèi)或ID。
總之，組合選擇器是CSS中不可或缺的一部分，它們通過(guò)定義元素之間的關(guān)系增強(qiáng)了選擇器的功能，使得開(kāi)發(fā)者能夠以更靈活、更高效的方式設(shè)計(jì)和實(shí)現(xiàn)網(wǎng)頁(yè)樣式。
往期推薦
最后
歡迎加我微信，拉你進(jìn)技術(shù)群，長(zhǎng)期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專(zhuān)業(yè)的技術(shù)人...