您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)GitHub倡導(dǎo)的CSS編寫風格及文件目錄是怎樣的,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
編碼風格:
1.用兩個空格的“soft-tabs”來縮進
2.在屬性聲明的“:”后加上空格
3.在規(guī)則聲明后的“{”前加上空格
4.使用十六進制顏色代碼#000,如果不使用RGBA
5.使用//來做注釋塊(而不是/**/)
6.文檔風格與KSS相同
7.這里有個好的語法示例:
CSS Code復(fù)制內(nèi)容到剪貼板
// This is a good example! .styleguide-format { border: 1px solid #0f0; color: #000; background: rgba(0,0,0,0.5); }
SCSS 風格:
任何會在多個文件中使用的$variable 或者 @mixin應(yīng)該放在globals/下。其他的應(yīng)該放在使用它的文件的頂部。
作為一個經(jīng)驗法則,不要使用超過3層的嵌套。如果你發(fā)現(xiàn)你將要使用超過三層,想想重新組織你的規(guī)則。
文件組織:
一般來說,CSS文件組織應(yīng)該想下面這樣:
styles
├── components
│ ├── comments.scss
│ └── listings.scss
├── globals
│ ├── browser_helpers.scss
│ ├── responsive_helpers.scss
│ ├── variables.scss
├── plugins
│ ├── jquery.fancybox-1.3.4.css
│ └── reset.scss
├── sections
│ ├── issues.scss
│ ├── profile.scss
└── shared
├── forms.scss
└── markdown.scss
使用Spockets來獲取文件。但是,你應(yīng)該明確地導(dǎo)入任何在特定的SCSS文件中不會產(chǎn)生樣式(globals/)的SCSS。下面是個好的例子:
CSS Code復(fù)制內(nèi)容到剪貼板
//= require_tree ./plugins //= require my_awesome_styles @import "../globals/basic"; .rule { ... }
Pixels vs. Ems:
在font-size上使用px,因為它提供了在文字上的絕對控制。此外,更傾向于使用無單位的line-height,因為它不會繼承父元素的百分比值,而是基于字體大小的倍數(shù)。
Class的命名慣例:
不要在css文件中引用js-前綴的類名。js-只由js文件使用。在css和js共享的狀態(tài)規(guī)則使用is-前綴。
特異性(classes vs. ids):
在頁面中確定出現(xiàn)一次的元素應(yīng)該使用IDs.否則使用Class.在不確定時使用Class。
1.應(yīng)該使用ID的:header,footer,彈窗
2.不應(yīng)該使用ID的:導(dǎo)航,列表元素等
當在給一個組件加樣式的時候,從元素+類名(更傾向于類名)開始,在默認情況下更傾向于使用直接后代選擇器(>)。用盡可能少的特殊的。下面是個例子:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<ul class="category-list"> <li class="item">Category 1</li> <li class="item">Category 2</li> <li class="item">Category 3</li> </ul>
CSS Code復(fù)制內(nèi)容到剪貼板
ul.category-list {// element + class namespace &>li {// direct descendant selector > for list items list-style-type: disc; } a {// minimal specificity for all links color: #ff0000; } }
CSS特異性指南:
如果你必須使用一個id選擇器,確保在你的規(guī)則聲明中只有一個。像#header .search #quicksearch { … }這樣的被認為是不好的。
當在修改一個現(xiàn)有元素來特殊使用,試著使用類名。使用.listings-layout.listings-bigger而不是.listings-layout.bigger。想想ack/grep在你未來的代碼中。
像disabled, mousedown, danger, hover, selected,active這些類名應(yīng)該有一個類作為命名空間(button.selected是個好的例子)
實驗性功能:
我們想要內(nèi)部使用和實驗性功能。在編寫css的時候需要一些紀律因為現(xiàn)有的功能和實驗性功能的css將會被同時提供。始終牢記這些目標:
1.給新功能寫樣式的時候不要影響已有功能的樣式
2.當實驗性功能不工作的時候可以很容易的移除
3.當新功能上線的時候可以很容易移除舊的功能的css
4.在開發(fā)beta或?qū)嶒炐怨δ軙r,用-experimental變量替換根命名空間和棄用現(xiàn)有根節(jié)點。一般來說,最好重復(fù)樣式實驗塊而不是試圖和擴展現(xiàn)有的樣式。
一個現(xiàn)有功能的:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<div class="notifications"> <ul class="navigation"> <li><a href="#">Notifications</a></li> <li><a href="#">Messages</a></li> </ul> <div class="notifications-listing"> <a href="#">dragon commented on Issue #551</a> <a href="#">mojombo commented on Issue #91</a> <a href="#">defunkt uploaded a new file to defunkt/resque</a> </div> </div>
CSS Code復(fù)制內(nèi)容到剪貼板
// Deprecated: Existing notifications + messages design. To be removed when // notifications-next ships. // // Styleguide 4.5.1 .notifications { ul.navigation { float: left; width: 200px; background: #eee; } .notification-listing { &>a { display: block; font-weight: bold; } } }
看完上述內(nèi)容,你們對GitHub倡導(dǎo)的CSS編寫風格及文件目錄是怎樣的有進一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。