作為一名前端開發工程師ID嵌套樣式問題，對于網站前端開發需要具備什么核心思想？
前端開發核心思想?
1、表現、內容和行為的分離
2、標記應該是結構良好、語義正確 以及 普遍合法 ID嵌套樣式問題。
3、Javascript應該起到漸進式增強用戶體驗的作用 ID嵌套樣式問題。
總體原則?
1、縮進?
對于所有編程語言，我們要求縮進必須是軟tab（用空格字符）ID嵌套樣式問題。在你的文本編輯器里敲 Tab 應該等于 4個空格 。
2、可讀性 vs 壓縮?
對于維護現有文件，我們認為可讀性比節省文件大小更重要ID嵌套樣式問題。大量空白和適當的ASCII藝術都是受鼓勵的。任何開發者都不必故意去壓縮HTML或CSS，也不必把Javascript代碼最小化得面目全非。
我們會在服務器端或build過程中自動最小化并gzip壓縮所有的靜態客戶端文件，例如CSS和JSID嵌套樣式問題。
3、標記?
任何網頁的首要組件就是基于標簽的HTML標記語言ID嵌套樣式問題。標記定義了文檔的結構和綱要，并提供結構化的內容。除了最基本的概念（例如標題、段落和列表）之外，標記并不是用來定義頁面上內容的外觀和體驗的。HTML的表現屬性都已經被廢棄了，有關樣式的定義應該被包含在 樣式表中。
4、HTML5?
Doctype?標記中必須總是使用合適的Doctype來指示瀏覽器觸發標準模式. 永遠要避免Quirks模式ID嵌套樣式問題。
HTML5特別好的一個方面就是它簡化了Doctype需要的代碼ID嵌套樣式問題。無意義的屬性被棄用了，DOCTYPE 聲明也被顯著地簡化了。另外，也無需再用 CDATA 對內聯JavaScript代碼進行轉義，而這在此之前為了讓XHTML符合XML的嚴密性是必需的。
HTML5 Doctype
4.1、!DOCTYPE html
字符編碼?
所有標記必須通過UTF-8編碼傳遞，因為這種編碼方式是對國際化最友好的ID嵌套樣式問題。必須在部分都指定這種編碼。
設定字符編碼是通過 meta 標簽進行ID嵌套樣式問題。
meta " /
如果是HTML5ID嵌套樣式問題，則只需要寫：
meta charset="utf-8"
4.2、標記的總體原則?
編寫HTML標記的總體原則ID嵌套樣式問題。提醒大家一點，在創建的HTML文檔里總是要使用能夠代表內容語義的標記。
段落分隔符要使用實際對應的p元素，而不是用多個br標簽ID嵌套樣式問題。
在合適的條件下，充分利用dl （定義列表）和blockquote 標簽ID嵌套樣式問題。
列表中的條目必須總是放置于ul、ol或dl 中，永遠不要用一組 div或p 來表示ID嵌套樣式問題。
給每個表單里的字段加上 label 標簽，其中的 for屬性必須和對應的輸入字段對應，這樣用戶就可以點擊標簽ID嵌套樣式問題。同理，給標簽加上 cursor:pointer; 樣式也是明智的做法。
不用使用輸入字段中的 size 屬性ID嵌套樣式問題。該屬性是和輸入字段里文本的 font-size 相關的。應該使用CSS寬度。
在某些閉合的 /div標簽旁邊加上一段html注釋，說明這里閉合的是什么元素ID嵌套樣式問題。這在有大量嵌套和縮進的情況下會很有用。
不要把表格用于頁面布局ID嵌套樣式問題。
在合適的條件下，利用 microformats 和/或者 Microdata ，具體說是 hCard 和 adrID嵌套樣式問題。
在合適的條件下，利用 thead、tbody和th標簽 (以及Scope屬性）ID嵌套樣式問題。
具備恰當語法結構(THEAD,TBODY,TH [scope])的 Table 標記
01.table summary="This is a chart of year-end returns for 2005."
02. thead
03. tr
04. th scope="col"Table header 1/th
05. th scope="col"Table header 2/th
06. /tr
07. /thead
08. tbody
09. tr
10. tdTable data 1/td
11. tdTable data 2/td
12. /tr
13. /tbody
14./table
對于頁眉和標題，永遠使用首字母大寫格式ID嵌套樣式問題。不要在標記中使用全部大寫或小寫的標題，而是應用CSS屬性 text-transform:uppercase/lowercase 。
屬性加引號?
在HTML5規范里并沒有嚴格要求屬性值兩邊加引號ID嵌套樣式問題。但考慮到一些屬性可以接受空白值，為了保持一致性，我們要求所有屬性值必須加上引號。
p class="line note" data-attribute="106"Thi s is my paragraph of special text./p
CSS?
1.網頁的第二個組件就是在層疊樣式表（CSS）中包含的表現信息ID嵌套樣式問題。Web瀏覽器成功實現CSS后，整整一代web開發者對他們網站的外觀和體驗擁有了全部的控制權。CSS 從表現方面則是通過對視覺屬性的定義來描述網頁。CSS 的強大之處在于，這些屬性可以混合并通過各種標示符匹配，它可以通過樣式規則的分層（”層疊“）來控制頁面的布局和視覺特征。
2.從外部文件加載CSS，盡可能減少文件數ID嵌套樣式問題。加載標簽必須放在文件的 HEAD 部分。用 LINK 標簽加載，永遠不要用@import。
3.加載樣式表
link rel="stylesheet" type="text/css" href="myStylesheet.css" /
4.不要用內聯式樣式
p style="font-size: 12px; color: #FFFFFF"This is poor form, I say/p
5.不要在文件中用內聯式引入的樣式，不管它是定義在樣式標簽里還是直接定義在元素上ID嵌套樣式問題。這樣會很難追蹤樣式規則。
6.使用 normalize.css 讓渲染效果在不同瀏覽器中更一致ID嵌套樣式問題。
7.使用類似 YUI fonts.css 的字體規格化文件ID嵌套樣式問題。
8.定義樣式的時候，對樣式在頁面只出現一次的元素用id，其他的用classID嵌套樣式問題。
9.理解層疊和選擇器的明確度 ，這樣你就可以寫出非常簡潔且高效的代碼ID嵌套樣式問題。
10.編寫性能優化的選擇器ID嵌套樣式問題。盡可能避免使用開銷大的CSS選擇器。例如，避免 * 通配符選擇器，也不要疊加限定條件到 ID 選擇器（例如 div#myid）或 class 選擇器（例如 table.results）上。這對于速度至上并包含了成千上萬個DOM元素的web應用來說尤為重要。
CSS盒子模型?
代碼要求最低要求：選擇器單獨占一行，每個屬性占一行ID嵌套樣式問題。屬性聲明要有縮進。
作為提高的要求，關聯或孩子樣式要增加2-4個空格的縮進ID嵌套樣式問題。這樣有利于分層查看和組織，產生（對某些人來說）可讀性更好的樣式表。
另外，在給一個樣式指定多個選擇器的時候，把每個選擇器單獨放一行是個好主意ID嵌套樣式問題。這樣可以避免一行變得太長，也能提高可讀性及版本控制流程。
01..post-list li a{
02. color:#A8A8A8;
03.}
04. .post-list li a:hover{
05. color:#000;
06. text-decoration:none;
07. }
08. .post-list li .author a,
09. .post-list li .author a:hover{
10. color:#F30;
11. text-transform:uppercase;
12. }
在多個開發者協作環境下，避免用單行CSS格式，因為這樣會給版本控制帶來問題ID嵌套樣式問題。
字母排序?
如果你對性能情有獨鐘， 對CSS屬性進行字母排序有利于在GZIP壓縮中識別大量可重復的特征ID嵌套樣式問題。
Classes vs. IDs?
對于所用的樣式只出現一次的元素，給它設一個id屬性ID嵌套樣式問題。這個屬性只會應用于該元素，不會用到其他地方。Class屬性則可以用到多個具有相同樣式屬性的元素上。具有相同外觀和表現的元素可以具有相同的class名。
1.ul id="categories"
2. li class="item"Category 1/li
3. li class="item"Category 2/li
4. li class="item"Category 3/li
5./ul
選擇器命名的慣例?
無論是 ID 還是 class，對任何東西最好總是根據它是什么而不是它看上去是什么樣子來命名ID嵌套樣式問題。 比如一個頁面上的特別提示的 class 名是 bigBlueText （大藍字），可它的樣式早就被改成紅色小字體，這個名字就沒意義了。使用更聰明的慣例如 noteText （提示文字）就好多了，因為即使視覺樣式改變了，它也還是管用的。
選擇器?
CSS3 選擇器 規格引入了一整套對于更好地選擇元素極其有用的 CSS 選擇器ID嵌套樣式問題。
偽類?
偽類 使你能動態地修飾網頁內容的樣式ID嵌套樣式問題。有些偽類從CSS1 （:visited, :hover等） 和 CSS2 （:first-child, :lang）那時候開始就有了。CSS3又往列表里加入了16個新的偽類，這些偽類對于動態地修飾網頁內容的樣式特別有用。 學習如何深度使用偽類。
組合及屬性選擇器?
組合選擇器 提供了為特定元素選擇其后代元素、孩子元素或兄弟元素的快捷方式ID嵌套樣式問題。
屬性選擇器 適用于具有特定屬性 和/或 特定值的元素ID嵌套樣式問題。正則表達式的知識對屬性選擇大有幫助。
明確度?
瀏覽器會通過計算選擇器的明確度ID嵌套樣式問題。來決定應用哪個CSS規則。如果兩個選擇器都適用于同樣的元素，具有更高明確度的那個會勝出。ID 選擇器比屬性選擇器明確度高，class 選擇器比任何數量的元素選擇器明確度高。盡量使用 ID 選擇器來提高明確度。有時候我們可能會想方設法給一個元素應用一條CSS規則，但用盡方法也不能如愿。這種情況有可能是因為我們使用的選擇器比另外一個的明確度低，所以明確度高的另一個選擇器里的屬性就比我們想應用的選擇器優先了。這種情況在更大或更復雜的樣式表里更為常見。在小一些的項目里，通常這不是大問題。
計算明確度?
當你在一個很大很復雜的樣式表上干活的時候，知道如何計算選擇器的明確度會有很大幫助，會節約你的時間，并讓你的選擇器更有效率ID嵌套樣式問題。
明確度的計算方式是對你的CSS的各種組件計數，并用 (a,b,c,d) 格式表達出來ID嵌套樣式問題。
元素ID嵌套樣式問題，偽元素: d = 1 – (0,0,0,1)
類ID嵌套樣式問題，偽類，屬性: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
內聯樣式: a = 1 – (1,0,0,0)
不過，也許使用現成的明確度計算器更好一些ID嵌套樣式問題。
明確度計算器
你應該了解的關于明確度的一些事
IE 明確度 bugs
使用 !important 會覆蓋掉所有的明確度，不管它有多高ID嵌套樣式問題。因此我們傾向于避免使用它。大部分時候是沒必要用它的。即使你需要覆蓋某個你訪問不到的樣式表里的選擇器，往往也會有其他的辦法去覆蓋。盡可能避免使用它。
像素 vs. Em?
我們使用 px 作為定義 font size 的度量單位，因為它能提供對文本的絕對控制ID嵌套樣式問題。我們知道為字體大小使用 em 單位一度很流行，這樣可以解決 IE6 無法改變基于像素的文本大小的問題。不過，現在所有的主流瀏覽器（包括 IE7 和 IE8）都支持基于像素單位的文本大小 和/或 整頁縮放。既然 IE6 被廣泛認為已廢棄，用像素定義文本尺寸更好。另外，無單位的 line-height 也應該優先考慮，因為它不會從父元素繼承一個百分比值，而是基于 font-size 的一個乘數。
正確
1.#selector {
2. font-size: 13px;
3. line-height: 1.5; /* 13 * 1.5 = 19.5 ~ Rounds to 20px. */
4.}
不正確
1./* Equivalent to 13px font-size and 20px line-height, but only if the browser default text size is 16px. */
2.#selector {
3. font-size: 0.813em;
4. line-height: 1.25em;
5.}
IE Bugs?
021yin.com 了解更多信息。
修復 IE
1.!--[if lt IE 7 ] body class="ie6" ![endif]--
2.!--[if IE 7 ] body class="ie7" ![endif]--
3.!--[if IE 8 ] body class="ie8" ![endif]--
4.!--[if IE 9 ] body class="ie9" ![endif]--
5.!--[if !IE]!-- body !--![endif]--
1..box { float: left; margin-left: 20px; }
2..ie6 .box { margin-left: 10px; }
如果你在用HTML5（以及 HTML5 Boilerplate）ID嵌套樣式問題， 我們推薦使用 Modernizer JavaScript庫和下列模式：
1.!--[if lt IE 7] html class="no-js ie ie6" lang="en" ![endif]--
2.!--[if IE 7] html class="no-js ie ie7" lang="en" ![endif]--
3.!--[if IE 8] html class="no-js ie8" lang="en" ![endif]--
4.!--[if IE 9] html class="no-js ie9" lang="en" ![endif]--
5.!--[if gt IE 9]!--html class="no-js" lang="en"!--![endif]--
速記格式?
一般情況下要優先使用CSS速記格式，一是因為它的簡潔，二是用它也可以擴充已有的值，例如margin和padding的情況ID嵌套樣式問題。 開發者必須注意TRBL 縮寫，它表示元素的各邊按順時針方向定義的順序：上、右、下、左。如果bottom沒有定義，它就會從top繼承值。同理，如果left未定義，它從right繼承值。如果只有top的值有定義，所有的邊都會繼承那一個值。
下面是關于減少樣式表代碼冗余和使用CSS速記格式的更多內容：
021yin.com /journal/news/css-background-shorthand
021yin.com /journal/css-redundancy
021yin.com /css-shorthand
圖片?
對于（用于背景的）重復圖片ID嵌套樣式問題，要使用 比 1×1 像素大的圖片
永遠不要用空白圖片ID嵌套樣式問題。
多使用 CSS精靈（sprites）ID嵌套樣式問題。它會使懸停狀態更簡單，改善頁面加載速度，并減少二氧化碳的排放。
一般情況下，所有的圖片都應該切成帶透明背景（PNG8），并裁減成緊密貼合圖片外邊框ID嵌套樣式問題。
不過，logo必須總是帶有背景遮片，并在裁減內容之外留出內邊框ID嵌套樣式問題。
顏色管理?
確認團隊所有成員都有一致的顏色管理設置ID嵌套樣式問題。
任意兩臺顯示器顯示的顏色很可能會有所不同，但必須使用sRGB顏色作為缺省配置ID嵌套樣式問題。
當你在Photoshop打開文件時，要注意顏色配置警告，當Photoshop建議把圖片轉換到另一個配置時，要通知其他團隊成員ID嵌套樣式問題。
永遠不要把顏色配置嵌入到圖片里ID嵌套樣式問題。
當你從Photoshop保存圖片時，務必去掉”Embed Color Profile”選項的勾選ID嵌套樣式問題。
通用的文本和字體樣式?
標題?
要給 h1-h6 標題 — 包括作為鏈接的標題 — 定義缺省樣式ID嵌套樣式問題。在你的CSS文檔頂部定義它們，在必要時修改它們以保持整個站點的一致性。
標題必須有層次，能表明從大到小不同級別的重要性，h1具有最大的字體大小ID嵌套樣式問題。
SEO：要大致地了解頁面的層次組織和閱讀效果，在開發者工具里關閉CSS效果，你會看到一個基于文字的視圖，包括所有的 h1-h6 ， strong， em 等標簽ID嵌套樣式問題。
鏈接?
必須定義鏈接的缺省樣式，樣式要和主要的文字樣式不同，載懸停狀態下也要有不同的樣式ID嵌套樣式問題。
當給鏈接加下劃線樣式時，使用 border-bottom 并用 text-decoration: none; 加點內邊框ID嵌套樣式問題。這樣看起來更好一些。
深入學習和理解CSS及基于瀏覽器的盒子模型，對于掌握CSS布局的基礎是非常必要的ID嵌套樣式問題。
021yin.com /qdkfjc/46.html