整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
家好，今天告訴大家一個好消息，CSS要支持類似Sass框架的嵌套語法了，不需要任何框架，就可以很方便的使用，是不是特別爽呢。那么我們一起看看這個想法和過程是如何產(chǎn)生的，有助于我們更好的理解這個 CSS 嵌套語法方案
W3C 的年底充滿了起起伏伏，該組織與麻省理工學(xué)院之間的辯論最終在圣誕節(jié)前夕得到解決，這要歸功于兩個組織的領(lǐng)導(dǎo)。
幸運的是，它并沒有影響 CSS 嵌套的工作，這個新特性不僅在 CSS 組中，而且在開發(fā)者社區(qū)中都引起了激烈的爭論。
2022 年 12 月 15 日，Jen Simmons 宣布了一項調(diào)查，以選擇開發(fā)人員最喜歡的 CSS 嵌套變體。
在排除了方案一和方案二之后，2500 名開發(fā)者不得不在方案三、方案四和方案五之間做出選擇。
調(diào)查結(jié)果太棒了！事實證明，86% 的開發(fā)人員選擇了與心愛的 Sass 最相似的選項 3。
在我們能夠慶祝 CSS 將會擁有一個熟悉的原生嵌套解決方案之前，有一些事情需要考慮。
調(diào)查結(jié)果可作為社區(qū)期望的指標。 W3C 團隊采取正確方向的輸入。
團隊在認真聽取用戶聲音并聽取在線辯論的同時，還必須完善最終的解決方案。有許多原因需要考慮。
雖然 Sass 語法很好，但不可能將其 1:1 轉(zhuǎn)換為 CSS。
CSS 標準依賴于瀏覽器解析必須理解新語法的樣式表。團隊必須考慮整個 CSS 標準，并確保新語法在所有用例中都能兼容。
這可能很棘手，可能需要解析器開關(guān)或一些規(guī)則來確保嵌套以可預(yù)測的方式工作。
為了新語法的成功，規(guī)則集必須最少，團隊被吸引到特殊字符規(guī)則中。該規(guī)則規(guī)定嵌套選擇器必須以特殊字符開頭。例如 &、.、# 或：。
該規(guī)則很容易理解，應(yīng)該也很容易記住。
還有其他不確定因素。嵌套運算符 (&) 是強制性的還是可選的，目前仍有爭議。
盡管如此，該團隊在兩周前決定聽從開發(fā)人員的聲音，并從選項 3 開始繼續(xù)工作。與 Sass 最相似的一個。同時對未來可能發(fā)生的所有可能性持開放態(tài)度。
如果您是前端網(wǎng)絡(luò)工程師，您也可以參與這項工作。查看文章末尾的鏈接以導(dǎo)航到討論 CSS 嵌套的問題。
完善 CSS 嵌套肯定需要幾個月的時間。我會讓你知道進展情況。
在 W3C 團隊支持標準的情況下，我相信最終的解決方案將成為構(gòu)建結(jié)構(gòu)良好的樣式表的標準。對于構(gòu)建現(xiàn)代應(yīng)用程序非常重要的東西。
今天的分享就到這里，針對這個方案大家有什么看法，歡迎大家在評論區(qū)發(fā)表看法，你也可以通過以下的討論鏈接參與到這個標準的制定中。感謝你的閱讀，如果你喜歡我的分享，別忘了點贊轉(zhuǎn)發(fā)，讓更多的人看到，最后別忘記點個關(guān)注，你的支持將是我分享最大的動力，后續(xù)我會持續(xù)輸出更多內(nèi)容，敬請期待。
討論鏈接：https://github.com/w3c/csswg-drafts/issues/8248
原文：https://tomaszs2.medium.com/w3c-decided-on-css-nested-syntax-950bc13f3ce7
作者：Tom Smykowski
非直接翻譯，有自行改編和添加部分。
擊鏈接閱讀原文，獲取更多技術(shù)內(nèi)容：React組件封裝實踐：如何拆解復(fù)雜的頁面-阿里云開發(fā)者社區(qū)
在日常開發(fā)中，遇到非常難以維護的頁面是常態(tài)，相信不少同學(xué)也為此苦惱過，筆者在業(yè)務(wù)開發(fā)中總結(jié)了些經(jīng)驗希望對大家有所啟發(fā)。（后臺回復(fù)大數(shù)據(jù)即可獲得《大數(shù)據(jù)&AI實戰(zhàn)派》電子書）
作者 | 王峰(楚梟)
來源 | 阿里開發(fā)者公眾號
在日常開發(fā)中，遇到非常難以維護的頁面是常態(tài)，相信不少同學(xué)也為此苦惱過，筆者在業(yè)務(wù)開發(fā)中總結(jié)了些經(jīng)驗希望對大家有所啟發(fā)。下圖是一個較為復(fù)雜的詳情頁、表單頁，我截取了其中一小部分作為示例：
隨著需求不斷迭代，這個頁面的代碼變得越來越復(fù)雜，代碼達到幾千行，html 標簽嵌套層級非常深，每次想在正確的節(jié)點改東西、加元素都非常費眼睛；每次想修改、疊加業(yè)務(wù)邏輯，看到一堆 useEffect、useState、useRef 令人望而卻步。于是決定重構(gòu)以改變現(xiàn)狀。
如何重構(gòu)一個復(fù)雜前端頁面？筆者平常主要寫后端，實際工程中后端代碼的腐化很多都來源于 if-else 不斷疊加，要重構(gòu)一般分幾個層次看：
大的思路如此，具體場景各有各的特殊性，需要靈活應(yīng)對，這里也不過多展開。總之，后端的復(fù)雜度和各個場景的業(yè)務(wù)邏輯息息相關(guān)，垂直縱深很大，但前端呢？私以為前端雖然也有業(yè)務(wù)邏輯但不深，它的復(fù)雜不是來源于垂直縱深，而是水平堆積。一個頁面的內(nèi)容經(jīng)常又多又雜，有詳情、有表單、各種區(qū)塊、不同標簽頁，里面的內(nèi)容我不贅述。那么重構(gòu)的方向呼之欲出：使用組合的思想拆分水平堆積的業(yè)務(wù)邏輯塊。具體到 React，其實就是拆解業(yè)務(wù)、封裝組件，是一個組件化的過程。
其實前端整個 React App 說白了可以抽象成一個組件樹，如圖：
筆者習(xí)慣將組件分成：基礎(chǔ)組件和區(qū)塊組件。
按照基礎(chǔ)組件和區(qū)塊組件的劃分，我開始重構(gòu)上圖詳情頁。
我將頁面上的展示內(nèi)容按照業(yè)務(wù)塊進行了劃分，自頂向上對業(yè)務(wù)區(qū)塊進行了重新的定義，如圖：
劃分好了就開始封裝，列舉幾個組件的封裝示例。
AliTalk IM 組件定義
接收方 IM 身份的 id 作為入?yún)ⅲ祷?IM 展示組件，點擊 icon 則喚起聊天彈窗進行聊天操作，完成后可關(guān)閉彈窗。至于初始化聊天框、銷毀聊天框的邏輯，以及如何進行聊天，應(yīng)該在組件內(nèi)封裝好，外部業(yè)務(wù)不關(guān)心這些，主要代碼：
type ChatProps = {
uid?: string;
};
const Chat: FC<ChatProps> = (data: ChatProps) => {
const [showChat, setShowChat] = useState(true);
useEffect(() => {
console.log('init Alitalk: ' + data.uid);
return () => {
console.log('destroy Alitalk: ' + data.uid);
setShowChat(false);
const aliTalkMessageBox = document.getElementsByClassName('weblite-iframe');
for (let i = 0; i < aliTalkMessageBox.length; i++) {
const item = aliTalkMessageBox[i];
item.remove();
}
};
}, []);
return (
<div>
{showChat && (
<Alitalk uid={data.uid} pid={'xx'} bizType={1} bizId={'xx'} >
<img width={24} height={24}
src={
'https://img.alicdn.com/imgextra/i2/O1CN01acXzMG1d5JsurHGVR_!!6000000003684-2-tps-200-200.png'
} />
<span style={{ marginLeft: '5px', color: '#FF6600' }}>chat now</span>
</Alitalk>
)}
</div>
);
};
export default Chat;AliTalk IM 組件定義組件引用
直接引入 <Chat> 標簽，一行代碼即可：
<Descriptions style={{ marginBottom: 24 }} title="買家信息">
<Descriptions.Item label="買家旺旺">
<Chat uid={detailData?.data?.buyerAliTalkId} />
</Descriptions.Item>
</Descriptions>剩余60%，完整內(nèi)容請點擊下方鏈接查看：React組件封裝實踐：如何拆解復(fù)雜的頁面-阿里云開發(fā)者社區(qū)
阿里云開發(fā)者社區(qū)，千萬開發(fā)者的選擇。百萬精品技術(shù)內(nèi)容、千節(jié)免費系統(tǒng)課程、豐富的體驗場景、活躍的社群活動、行業(yè)專家分享交流，盡在：阿里云開發(fā)者社區(qū)-云計算社區(qū)-阿里云
網(wǎng)頁開發(fā)過程中，我們有時會遇到HTML頁面白屏的問題，即打開網(wǎng)頁時頁面顯示空白，沒有任何內(nèi)容。這不僅令用戶困惑，也使開發(fā)者頭疼不已。本文將分享一些常見的HTML頁面白屏問題解決方法，幫助你快速解決這個問題，讓你的網(wǎng)頁煥然一新！
第一步：檢查HTML代碼
首先，我們需要檢查HTML代碼是否正確。常見的錯誤包括標簽未閉合、標簽嵌套錯誤等。這些錯誤可能會導(dǎo)致頁面無法正常顯示。因此，仔細檢查HTML代碼，確保沒有語法錯誤是解決白屏問題的第一步。
第二步：檢查CSS文件
HTML頁面的樣式通常由CSS文件控制。如果CSS文件中存在錯誤或者無法正常加載，可能會導(dǎo)致頁面白屏。我們可以通過以下步驟檢查CSS文件是否存在問題：
1、檢查CSS文件路徑是否正確：確保CSS文件的路徑正確，并且文件存在于指定的位置。可以通過瀏覽器開發(fā)者工具查看網(wǎng)絡(luò)面板，檢查CSS文件是否被成功加載。
2、檢查CSS文件語法錯誤：使用CSS驗證工具，如W3C CSS驗證服務(wù)，檢查CSS文件是否存在語法錯誤。如果存在錯誤，及時修復(fù)。
3、檢查CSS選擇器和樣式規(guī)則：檢查CSS文件中的選擇器和樣式規(guī)則是否正確。可能存在選擇器與HTML元素不匹配或樣式規(guī)則沖突的情況。可以通過逐個注釋掉樣式規(guī)則，逐步排查問題。
第三步：檢查JavaScript代碼
JavaScript代碼也可能導(dǎo)致頁面白屏。以下是檢查JavaScript代碼的步驟：
1、檢查JS文件路徑是否正確：與CSS文件類似，確保JS文件的路徑正確，并且文件存在于指定的位置。通過瀏覽器開發(fā)者工具查看控制臺面板，檢查是否有JS文件加載錯誤的提示信息。
2、檢查JS代碼語法錯誤：使用JS語法檢查工具，檢查JS代碼是否存在語法錯誤。如果有錯誤，及時修復(fù)。
3、檢查JS代碼邏輯錯誤：檢查JS代碼中的邏輯是否正確。可能存在變量未定義、函數(shù)未調(diào)用或者邏輯錯誤等問題。可以通過調(diào)試工具，如瀏覽器開發(fā)者工具中的調(diào)試器，逐步排查問題。
第四步：排查網(wǎng)絡(luò)請求問題
如果前面的步驟都沒有發(fā)現(xiàn)問題，那么可能是網(wǎng)絡(luò)請求出現(xiàn)了問題。以下是一些排查網(wǎng)絡(luò)請求問題的方法：
1、檢查網(wǎng)絡(luò)連接：確保你的設(shè)備已連接到互聯(lián)網(wǎng)，并且網(wǎng)絡(luò)連接穩(wěn)定。
2、檢查資源加載狀態(tài)：通過瀏覽器開發(fā)者工具的網(wǎng)絡(luò)面板，檢查頁面中的資源加載狀態(tài)。可能存在資源加載失敗或者超時的情況，導(dǎo)致頁面白屏。
3、檢查服務(wù)器配置：如果你使用了服務(wù)器端腳本語言，如PHP，檢查服務(wù)器配置是否正確。可能存在服務(wù)器配置問題導(dǎo)致頁面無法正確渲染。
第五步：優(yōu)化頁面性能
如果以上方法都沒有解決問題，那么可能是頁面性能問題導(dǎo)致白屏。以下是一些優(yōu)化頁面性能的方法：
1、壓縮和合并文件：將CSS和JS文件進行壓縮和合并，減少文件的大小和數(shù)量，提高頁面加載速度。
2、使用緩存：利用瀏覽器緩存機制，將靜態(tài)資源進行緩存，減少服務(wù)器的請求次數(shù)，提高頁面加載速度。
3、異步加載資源：使用異步加載技術(shù)，如異步加載JS文件或使用延遲加載，減少頁面加載時間。
4、減少HTTP請求：減少頁面中的HTTP請求次數(shù)等。
結(jié)語：
通過以上五個步驟，我們可以逐步排查HTML頁面白屏問題，并解決它們。不同的問題可能需要不同的解決方法，因此需要耐心和細心地分析和排查。在開發(fā)過程中，我們也要時刻關(guān)注頁面性能，優(yōu)化頁面加載速度，提高用戶體驗。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
