[Feature] CSS Basic architecture #2
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
bblurock
force-pushed
the
front-end-BEM-draft
branch
from
32673ab to
aea5ae9
Compare
bblurock
force-pushed
the
front-end-BEM-draft
branch
from
5c86154 to
916844e
Compare
bblurock
force-pushed
the
front-end-BEM-draft
branch
from
916844e to
758e7bb
Compare
|
@LeoOnTheEarth 永來我更新了 CSS syntax 的部分 |
|
英文的那一段有要轉成中文嗎？ Coding Standards 已經拖太久囉，這一兩週要趕快結束掉 |
|
目前想寫的都寫進去了，昨天新增 single/multi class pattern。 今天會把 BEM 的部分翻成中文，應該就大功告成。 請大家這兩日抽空閱讀中文的部分，看有什麼問題。 |
| ``` | ||
| 在 "single-class" 中，同樣的 style 被定義在多個 classes 上，好處是 html 的元素只需使用單一的 class。 | ||
|
|
||
| ### "multi-class" 模式 |
|
該繼續囉 |
| <img src="images/blocks-example.png" alt="Blocks example" style="width: 200px;"/> | ||
|
|
||
| ##### 命名規則 | ||
| Block 的命名方式很簡單。只要其命名是具有意義且可以自我說明 (self-explaining) 的即可。必要的話可以以破折號 (dash) 隔開，也有使用駝峰式命名的做法 [[10]]，待討論。 |
There was a problem hiding this comment.
這裡需要討論：
如果命名太長，使用駝峰式命名或是一個 dash隔開。
因為 BEM 中 object 和 element 是用雙底線隔開 ex: text-field__label，如果用 dash 就會看起來比較亂；
如果是用駝峰則是這種寫法 textField__label 比較簡潔。
請投票！
There was a problem hiding this comment.
There was a problem hiding this comment.
駝峰的麻煩在於需要多按一次鍵盤，駝峰跟底線在一起時你寫程式一整天會很想死
There was a problem hiding this comment.
BEM like 的 css 可以參考 Ghost.io
https://github.com/TryGhost/Ghost/tree/master/core/client
https://github.com/TryGhost/Ghost/tree/master/core/client/assets/sass
他們走的是無底線設計
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Preview: here