Programming Abstractions In C》學習第47天，p111-p113，總結如下：

一、技術總結

1. boilerplate

/*
 * File: random.h
 * Version: 1.0
 * Last modified on Fri Jul 22 16:44:36 1994 by eroberts
 * -----------------------------------------------------
 * This interface provides several functions for generating
 * pseudo-random numbers.
 */

#ifndef _random_h
#define _random_h

#include "genlib.h"
#include <stdlib.h>

/*
 * Constant: RAND_MAX
 * ------------------
 * Unfortunately, several libraries that supposedly conform to
 * the ANSI standard do not define RAND_MAX in <stdlib.h>.  To
 * reduce portability problems, this interface defines RAND_MAX
 * to be the largest positive integer if it is undefined.
 */

#ifndef RAND_MAX
#  define RAND_MAX ((int) ((unsigned) ~0 >> 1))
#endif

/*
 * Function: Randomize
 * Usage: Randomize();
 * -------------------
 * This function sets the random seed so that the random sequence
 * is unpredictable.  During the debugging phase, it is best not
 * to call this function, so that program behavior is repeatable.
 */

void Randomize(void);

/*
 * Function: RandomInteger
 * Usage: n=RandomInteger(low, high);
 * ------------------------------------
 * This function returns a random integer in the range low to high,
 * inclusive.
 */

int RandomInteger(int low, int high);

/*
 * Function: RandomReal
 * Usage: d=RandomReal(low, high);
 * ---------------------------------
 * This function returns a random real number in the half-open
 * interval [low .. high), meaning that the result is always
 * greater than or equal to low but strictly less than high.
 */

double RandomReal(double low, double high);

/*
 * Function: RandomChance
 * Usage: if (RandomChance(p)) . . .
 * ---------------------------------
 * The RandomChance function returns TRUE with the probability
 * indicated by p, which should be a floating-point number between
 * 0 (meaning never) and 1 (meaning always).  For example, calling
 * RandomChance(.30) returns TRUE 30 percent of the time.
 */

bool RandomChance(double p);

#endif

p113，These three lines are often referred to as interface boilerplate。boilerplate這個詞會在計算機相關的教材中會經常看到，英文的意思是：“text that can be copied and used in computer program，with only small changes.”(模板)，之所以叫模板，是因為在每個頭文件中都有這三句。這個單詞不難理解，關鍵是通過此次的教材對這個單詞有一個具體的、形象的記錄，當提到這個單詞，就知道具體指的是什么。

二、英語總結

1. roll a die一句里面的die是什么意思？

答：die: n.a small cube with a different number of spots on each side.(骰子)，所以roll a die的就是"擲骰子"。

2. along with語法

答：along with在表示伴隨、以及或連同等意思時，兩者之間無先后順序，可能在前也可能在后。這點與follow不同。示例：For each of these functions, the interface contains

one-line prototype along with a comment that describe the purpose of the function from

the perspective of clients.

3. up to 語法

答：原文：The line:

#ifndef _random_h

cause the compiler to skip any text up to the #endif line if the the symbol _random_h has been previously defined。

up to短語主要有兩種用法：

(1)adv. used to say that sth is less than or equal to but not more than a stated value。

(2)adv. until。

都表示的是“程度”，而不是“方向”。

三、參考資料

1. 編程

1) Eric S.Roberts，《Programming Abstractions in C》：https://book.douban.com/subject/2003414

2. 英語

1) Etymology Dictionary：https://www.etymonline.com

2) Cambridage Dictionary：https://dictionary.cambridge.org

歡迎搜索及關注：編程人(a_codists)

This is the page title

 
 
 
 
 
 
 
 
 ...

ul>li*3>.feature>span.number+i+h4+p

guard 'livereload' do
 watch('index.html')
 watch(%r{stylesheets/.+\.(css)})
 watch(%r{scripts/.+\.(js)})
end
guard :compass

$ git clone git@github.com:abruzzi/design-boilerplate.git mydesign

$ cd mydesign
$ bundle install

載說明：原創不易，未經授權，謝絕任何形式的轉載

層疊樣式表（CSS）是一種強大的樣式表語言，可以幫助前端開發人員為簡單的網頁添加樣式。然而，在使用這種樣式表語言時，開發人員可能會犯一些錯誤。這些錯誤會妨礙開發人員編寫高效的代碼。本文探討了一些常見的錯誤，并為每個錯誤提供了解決方案。

以下是我們開發人員經常犯的九個最常見的錯誤；你也犯過其中一些嗎？

1、濫用“!important”

!important 是 CSS 中的一個關鍵字，它可以幫助我們將屬性值設置為比其他樣式選項更重要。例如，如果您將 !important 聲明應用于元素樣式，那么該樣式將覆蓋該屬性類別的所有其他樣式。以下是語法：

selector {
 property: value !important;
}

例如，如果您有一個標題元素 - h1 ，就像這樣：

<h1 class="css-mistake">CSS Mistakes</h1>

然后您應用以下樣式規則：

h1 {
 color: red;
}
.css-mistake {
 color: green;
}

默認情況下，標題文本的顏色將為“綠色”，因為類選擇器具有比元素（標簽）選擇器更高的CSS特異性選擇器。但是使用 !important ，您可以覆蓋該樣式CSS規則（從而使元素（標簽）選擇器覆蓋類選擇器）。通過這種方式，標題文本的顏色將為紅色，優先于類選擇器設置的綠色。

h1 {
 color: red !important;
}

過度使用 !important 會導致特異性戰爭-一種狀態，其中樣式開始互相覆蓋，無法按照樣式表的作者定義的方式工作。下一節將通過列舉適當使用 !important 的實例來提供解決此問題的方法。

什么時候應該使用？

就像本節標題所說的那樣——“過度使用 !important ”，我們在使用這個關鍵詞時必須小心謹慎。只有在迫切需要時才應該節制地使用 !important 。以下是一些使用它的情況：

• 在一個樣式表中，你使用了第三方庫或框架，并且你需要你自己編寫的自定義樣式（自定義的CSS）來覆蓋該庫中的樣式，而不需要修改該庫的主題。
• 當您需要覆蓋一些預定義的樣式以增強可訪問性時。這種情況在您嘗試使您的網站對所有用戶包括視力受損的用戶（低視力患者）都可訪問時經常發生。例如，您設置了一些顏色值，最終發現對于視力受損的人來說很具挑戰性，無法產生共鳴。您可以使用 !important 來覆蓋默認的顏色值。
• 如果你遇到了CSS樣式調整無法有效解決的布局問題，你可以使用 !important 來解決這個特定的樣式問題。然而，請記住這種方法應該被視為最后的手段。
• 你需要知道一些瀏覽器對CSS有默認樣式。在這種情況下，你可以使用 !important 來覆蓋默認樣式，確保在不同瀏覽器上的樣式一致性。
• 您還可以將其用于測試和調試樣式表。如果某個樣式不起作用，您可以應用 !important 來強制應用所需的樣式，覆蓋任何沖突的樣式。這種方法可以幫助您快速定位代碼中的問題所在。

2、使用絕對單位

在進行樣式設計時，使用正確的長度單位對于創建響應式設計至關重要。CSS有兩類長度單位：絕對單位和相對單位。許多CSS屬性，如“寬度”、“高度”、“字體大小”等，都使用單位來表示其值。下面的代碼片段給出了單位的使用示例：

selector {
 font-size: 14px;
}

在上面的代碼片段中，我們聲明了“font-size”CSS屬性，然后給它賦了一個14px的值。

什么是絕對單位？

這些是長度單位，無論渲染媒體如何，都具有固定的值，與設備的屏幕尺寸無關。這些單位非常適合在不同屏幕尺寸上保持元素的相同大小。你可能已經使用過一些標準的絕對單位，如像素 - px, 點 - pt, 英寸 - in, 毫米 - mm, 厘米 - cm, 和派卡 - pc. 絕對單位為我們提供了準確、固定和精確的樣式值，但它們不會根據屏幕尺寸進行縮放。絕對單位不適用于實現響應式設計。因此，將它們限制在不需要根據瀏覽器尺寸或設備屏幕尺寸進行調整的元素上。另一方面，相對單位如其名稱所示，是相對于另一個屬性（大多數情況下是父元素）的。這些單位具有靈活性，可以根據視口動態增長，適應響應式設計，與絕對單位不同。一些相對單位的例子是百分比（%）- rem, em, 等等。

如何使用相對單位及其解釋

了解每個相關單位的重要性，使您具備有效使用它們的知識。以下是一些相關單位及其解釋：

% - 這個單位完全依賴于父元素。因此，它是相對于父元素的。例如，如果你將一個元素的寬度設置為80%，它將是父元素寬度的80%。請注意，在以下屬性的值中使用百分比：寬度、高度、邊距和內邊距。

em - 這與父元素的字體大小相關。例如，如果您將元素的字體大小設置為4em，則它將是父元素字體大小的四倍。在處理排版（文本）時使用 em - 這使文本按比例縮放。

rem - 這是相對于根元素的字體大小。通常使用 rem 來實現整個布局的一致樣式。

vh - 相對于視口高度的1%。

vw - 相對于視口寬度的1%。

3、使用內聯樣式

內聯樣式是一種通過 style 屬性將直接樣式傳遞給HTML元素的樣式系統。雖然存在這種樣式系統，但重要的是要理解它的使用不支持應用程序構建的最佳實踐，因為它會創建不可重用的代碼。只有在測試或美化簡單的HTML文件時才使用內聯樣式。以下是一些避免使用這種樣式系統的原因：

• 使用內聯樣式，你無法遵循DRY（不要重復自己）原則。內聯樣式會導致代碼重復和不可重用的代碼，因為每個元素都會被單獨設置樣式，即使它們共享相同的樣式。內聯樣式會導致冗余的代碼。
• 代碼變得難以閱讀，也變得臃腫。這會導致HTML文件大小增加，影響性能。此外，您的代碼變得混亂而沒有結構性；因此，應該區分結構（HTML）和樣式（CSS）。
• 這導致了一種被稱為“可維護性復雜性”的情況，基本上意味著你的代碼變得難以維護。例如，如果你需要修改一個元素的外觀，你必須找到相應的HTML標簽并進行直接的樣式調整。想象一下，如果內聯樣式散布在各個地方，這種方法就不適合擴展。

最佳實踐

為了克服內聯樣式的缺點，您必須使用內部樣式表（位于 <style> 標簽內的樣式）或外部樣式表來保持您的代碼健康和有組織。

• 外部樣式表：創建一個外部CSS文件。存儲您的樣式，然后將其與HTML鏈接起來。通過這樣做，您可以區分HTML和CSS代碼，使您的樣式易于維護和重用。
• 內部樣式表：在您的HTML文件中，使用 <style> 標簽在HTML文檔的 <head>. 中。盡管這種方法是在HTML文件中，但您仍然可以實現內容（元素）與表現（樣式）的分離。

4、不使用CSS重置

不同的瀏覽器具有各種默認樣式，這些樣式不同，導致元素的外觀不一致。這就是為什么我們必須定義一些樣式，以便在其他瀏覽器上為網頁樣式提供一致的起點。這些樣式被稱為“CSS重置”。CSS重置是一種CSS樣式，用于刪除瀏覽器默認樣式的規則。如果您熟悉CSS，并且在使用過程中有時會注意到某些特定屬性的默認樣式，如 margin. ，CSS重置可以幫助我們將樣式基礎調整到一致的水平。以下是使用這些重置的原因：

• 一致的樣式：我們可以通過CSS重置覆蓋瀏覽器的默認樣式，使樣式表保持一致。
• 為了保持對樣式表的控制，CSS重置確保您的樣式受到您作為樣式表作者的影響，而不是您的瀏覽器。

如何創建自己的CSS重置

這里是要遵循的簡單步驟：

• 首先，您必須確定您想要刪除或覆蓋的默認樣式。這是起點，因為在提出解決方案之前，您必須先確定問題。
• 然后，針對已確定的樣式，編寫自己的CSS樣式。這些樣式將作為你的樣式表遵循的規則。
• 最后，在各種瀏覽器上測試您的樣式表，以確保您的CSS重置優先于特定于瀏覽器的樣式。為了使事情看起來不那么抽象，這里是一個使用通用CSS選擇器（*）實現的簡單CSS重置。

* {
 margin: 0;
 padding: 0;
 border: 0;
}

上面的代碼是一個基本的CSS重置，它針對邊距、內邊距和邊框屬性，將每個屬性的值設為0。這個過程被稱為“標準化過程”，它可以消除瀏覽器默認的間距和邊框。這里有一些在線的CSS重置：

• Normalize.css（https://necolas.github.io/normalize.css/）
• Josh Comeau custom CSS reset（https://www.joshwcomeau.com/css/custom-css-reset/）
• HTML5 Boilerplate HTML5模板（https://html5boilerplate.com/）
• The popular Eric Meyer’s Reset CSS（https://meyerweb.com/eric/tools/css/reset/）

5、不使用單行CSS代碼

CSS中的單行代碼是CSS代碼的速記樣式。它可以使代碼更加清晰和有結構。掌握這些速記技巧將有助于您編寫更簡潔的代碼（將多行代碼壓縮為單行）。例如，當您想要在所有邊緣（上，下，左，右）處對元素邊距進行樣式設置時，您不需要明確地指定所有屬性（如 margin-top, margin-right, margin-bottom, 和 margin-left, ），您可以直接使用邊距屬性的速記方式。下面的代碼解釋了這一點：

/* Don't do this */
margin-top: 10px;
margin-bottom: 10px;
margin-right: 15px;
margin-left: 15px;
/* Instead, use Margin Shorthand */
margin: 10px 20px 10px 20px;
/* Margin Shorthand can even be more simplified */
margin: 10px 20px;

這些簡短的話語帶來了許多優點：

• 簡潔的代碼：您可以編寫更短、整潔且易讀的代碼。
• 高效的代碼：您可以編寫高效的代碼，減小樣式表文件的大小并提高性能。
• 可維護的代碼：樣式表變得更易維護和無錯誤。修改樣式和調試樣式也變得更容易。要發掘這些一行代碼的全部威力，您必須查看可用的CSS一行代碼。以下是一些經過篩選的資源，以幫助您的探險：
• Mozilla（https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties）
• Plainenglish（https://javascript.plainenglish.io/11-css-one-liners-that-are-insanely-useful-8a2878200474）
• Web dev（https://web.dev/one-line-layouts/）

6、未有效地使用選擇器

CSS選擇器可以在外部或內部樣式表中定位HTML元素。CSS中有許多選擇器方法，包括標簽（元素）、類、ID和偽元素。知道何時使用選擇器以及何時不使用選擇器非常重要。此外，您還必須了解CSS選擇器的工作原理。

• 標簽選擇器：這些選擇器使用標簽名稱（例如： div, p ）來定位特定的HTML元素。它們具有最低的特異性，因為它們也會導致廣泛的樣式，即將樣式應用于所有具有指定標簽的HTML元素。
• 類選擇器：這些選擇器更具體，不像標簽選擇器那樣，因為它們使用應用于HTML元素的類屬性。例如：（ .container ），（ .header ）。
• ID選擇器：在我們日常活動中，ID是一個唯一的值；同樣，在CSS中，ID選擇器也是如此。ID選擇器是用于定位單個或唯一HTML元素的唯一ID屬性。例如，( #name )，( #title )。它們具有很高的特異性，適度使用可以使它們變得獨一無二。上面是一些CSS選擇器。本指南假設您已經熟悉CSS選擇器。然而，本指南仍然解釋了一些常見的選擇器及其工作原理。那么，在選擇選擇器時，您應該注意什么呢？

1. 具體性：使用特定于目標元素的選擇器。這將創建一個樣式約束，并幫助避免過于具體的選擇器，這可能會影響代碼的可重用性。
2. 可讀性：所選擇的選擇器應易于閱讀和理解，幫助我們實現清晰的代碼架構。
3. 盡量減少使用ID選擇器：僅在需要使用唯一ID時才使用ID選擇器。如果不小心使用，由于其高度特異性，將會帶來極大的復雜性。
4. 當您需要可重用的代碼時，請使用類選擇器。

如何避免使用過于復雜的選擇器

如果你在你的樣式表中遇到了像下面這樣的代碼片段，那就意味著你正在使用過于復雜的選擇器。

#container > .box > content .section .title p > span .italic {
 color: blue;
 font-weight: bold;
}

以下是避免過于復雜選擇器的技巧：

• 為元素選擇器選擇最具體的選擇器。
• 為元素選擇器選擇最具體的選擇器。
• 使用選擇器組合器來選取具有相同樣式的元素。
• 經常學習代碼重構（您將能夠發現復雜的選擇器）。
• 使用CSS模塊來組織代碼結構。
• 避免使用后代選擇器。例如，使用（ ul, li, 和 a ）來選擇一個元素。這樣可能很高效，但隨著時間的推移，它們最終會導致選擇器過于復雜。

7、忽略瀏覽器兼容性

瀏覽器兼容性很重要，因為你不希望樣式在一個瀏覽器上良好運行，在另一個瀏覽器上則運行不正常。忽略瀏覽器兼容性可能會導致用戶在不同瀏覽器上的體驗不一致。這是因為不同的瀏覽器有其自己的CSS樣式渲染方式。但是，你可以通過考慮瀏覽器兼容性并確保你的樣式與不同瀏覽器兼容來實現樣式一致性。實現瀏覽器兼容性代碼的一種方法是實施以下操作：

使用供應商前綴：某些CSS屬性需要您使用前綴來渲染，無論使用哪種瀏覽器。需要這些前綴的瀏覽器包括Internet Explorer，Mozilla Firefox和Safari。這些前綴被稱為供應商前綴，因為它們是特定類型的瀏覽器獨有的。前綴的示例： -webkit-, -moz-, 和 -ms-. 。

/* webkit-prefixed version - used by browsers that use the WebKit layout engine, such as Chrome and Safari- */
-webkit-border-radius: 8px;
/* ms-prefixed version -used by browsers that use the Microsoft layout engine, such as Internet Explorer. */
-ms-border-radius: 10px;
/* standard version */
border-radius: 8px;

聲明字體回退：在為“font-family”等屬性分配值時，您必須添加回退字體。如果自定義字體不可用，回退字體將是實施的選項之一。

利用Can I Use網站檢查CSS屬性在各種瀏覽器中的兼容性。（https://caniuse.com/）

8、使用顏色名稱而不是十六進制代碼

Hex碼是顏色的十六進制表示。它是一個由“#”符號前綴的6位代碼，后跟三對十六進制數字，其中第一對表示紅色值，第二對表示綠色值，最后一對表示藍色值。語法：

使用直接的顏色關鍵詞有一些限制：

顏色名稱在不同的瀏覽器中是不一致的。例如，如果你將顏色屬性設置為綠色，不同的瀏覽器對其解釋的方式也會有所不同。因此，不同瀏覽器之間的渲染是不一致的。

顏色名稱受到限制，因為您無法調整它們的色調、陰影等。

顏色名稱的選擇有限。由于使用顏色名稱的限制，我們需要選擇使用十六進制代碼，這些代碼沒有這些限制。以下是十六進制代碼比顏色關鍵字更合適的原因：

• 十六進制代碼在各種瀏覽器中都是精確且一致的。
• 現代瀏覽器廣泛支持它們
• 他們有各種顏色供開發人員選擇
• 不受限于實施 - 您可以輕松調整它們以適應您的偏好。

尋找十六進制代碼的高效方法

以下是獲取十六進制代碼的幾種方法：

• 使用在線顏色選擇器 - 打開您的瀏覽器并輸入此查詢 - “在線顏色選擇器”，然后搜索。在返回的頁面上，您會得到一個顏色選擇器。
• 你還可以通過色彩圖表了解十六進制代碼。
• 在瀏覽器開發者工具的控制臺中，您還可以訪問一個顏色選擇器工具。
• 最后，您可以在網上查找已經進行了適當研究并整理了這些十六進制代碼列表的資源。

9、其他忽視的額外錯誤

使用0px替代0：毫無疑問，這可能不會對樣式表產生影響，但為了最佳實踐，請確保使用0而不是0px。

selector {
 /*Don't do this*/
 padding: 10px 12px 15px 0px;
 /*Do this*/
 padding: 10px 12px 15px 0;
}

設置高的z-index值：給 z-index 分配高值是非常不必要和過度的。遲早，這將在你的樣式表中造成問題，特別是當 z-index. 有多個實現時。

selector {
 /*Don't do this*/
 z-index: 50;
 /*Do this*/
 z-index: 2; /*Let the value be minimal*/
}

結論

本文深入探討了常見的CSS錯誤，并為每個錯誤提供了深入的解決方案。通過閱讀本指南，毫無疑問您已經了解了一些常見的CSS錯誤，并且從此以后，您將知道如何解決它們，因為我們還要研究每個錯誤的解決方案。

由于文章內容篇幅有限，今天的內容就分享到這里，文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請別忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想獲取更多前端技術的知識，歡迎關注我，您的支持將是我分享最大的動力。我會持續輸出更多內容，敬請期待。