Skip to content

Commit 942d6b7

Browse files
docs: add comments section to style guide
1 parent 11f986f commit 942d6b7

File tree

1 file changed

+42
-0
lines changed

1 file changed

+42
-0
lines changed

css-in-javascript/README.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -427,6 +427,48 @@
427427
});
428428
```
429429
430+
## Comments
431+
432+
- Inline comments (`// comment`) are allowed.
433+
434+
```js
435+
// good
436+
let foo = 145; // This is modified below in the "baz()" function
437+
```
438+
439+
- Comments may also be placed above the line if it improves clarity.
440+
441+
```js
442+
// good
443+
// This is modified below in the "baz()" function
444+
let foo = 145;
445+
```
446+
447+
- When inline comments extend the line length beyond the maximum (100 characters), move the comment to the line above to preserve readability.
448+
449+
```js
450+
// bad
451+
// This is a comment describing the following block of variable initializations
452+
let foo = 123; // used in various contexts, but mostly for soccer games, basketball, and football games
453+
let bar = 456; // used only for horse races; it is explicitly reset at the beginning of the "endRace()" function
454+
let baz = 789; // used only for car races; it will be overwritten once we reach the "oilChange()" function
455+
456+
// good
457+
// This is a comment describing the following block of variable initializations
458+
let foo = 123;
459+
// used in various contexts, but mostly for soccer games, basketball, and football games
460+
461+
let bar = 456;
462+
// used only for horse races; it is explicitly reset at the beginning of the "endRace()" function
463+
464+
let baz = 789;
465+
// used only for car races; it will be overwritten once we reach the "oilChange()" function
466+
```
467+
468+
- Use whichever style (inline or above) makes the most sense for readability and maintainability.
469+
470+
> Why? Inline comments can sometimes improve clarity, but when they hurt readability or line length, moving them above keeps code more maintainable. If large numbers of explanatory comments are required, consider refactoring the code to reduce complexity.
471+
430472
---
431473

432474
CSS puns adapted from [Saijo George](https://saijogeorge.com/css-puns/).

0 commit comments

Comments
 (0)