Skip to content

Commit 366e652

Browse files
authored
Add bookmark section
Adding a bookmark section to help developers have an easy way to find selectors for a particular landmark.
1 parent 41ad26f commit 366e652

File tree

1 file changed

+30
-1
lines changed

1 file changed

+30
-1
lines changed

README.md

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
1. [CSS](#css)
1212
- [Formatting](#formatting)
1313
- [Comments](#comments)
14+
- [Bookmarks](#bookmarks)
1415
- [OOCSS and BEM](#oocss-and-bem)
1516
- [ID Selectors](#id-selectors)
1617
- [JavaScript hooks](#javascript-hooks)
@@ -102,12 +103,40 @@ Finally, properties are what give the selected elements of a rule declaration th
102103

103104
### Comments
104105

105-
* Prefer line comments (`//` in Sass-land) to block comments.
106+
* Prefer line comments to block comments.
106107
* Prefer comments on their own line. Avoid end-of-line comments.
107108
* Write detailed comments for code that isn't self-documenting:
108109
- Uses of z-index
109110
- Compatibility or browser-specific hacks
110111

112+
### Bookmarks
113+
* Organize styles using bookmarks made with the format `/*##*/` for developers to follow a flow of landmarks (e.g. header, footer, main)
114+
* Use bookmarks to note subsections of landmarks `/*#0. foo/a) bar#*/`
115+
116+
**Bad**
117+
118+
```css
119+
//Header
120+
.foo{
121+
//...
122+
}
123+
```
124+
125+
**Good**
126+
127+
```css
128+
/*#1. Header#*/
129+
/*#1. Header/a) foo#*/
130+
.foo{
131+
//...
132+
}
133+
134+
/*#1. Header/b) bar#*/
135+
.bar{
136+
//...
137+
}
138+
```
139+
111140
### OOCSS and BEM
112141

113142
We encourage some combination of OOCSS and BEM for these reasons:

0 commit comments

Comments
 (0)