Skip to content
This repository was archived by the owner on Aug 8, 2023. It is now read-only.

Commit 2ca52c4

Browse files
committed
Tweak the namespace table
Some of the directories aren’t relevant in Progressive Web Scaffold, so I’ve re-worded it to kind of work for that and Adaptive.
1 parent e108c01 commit 2ca52c4

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

css/class-naming-conventions/readme.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -283,9 +283,9 @@ You'll have probably noticed by now that our class names have a variety of prefi
283283

284284
Prefix | Purpose | Location |
285285
------ | ------- | ------------------ |
286-
`.c-` | Component classes: this includes the root component (typically the class that defines the component itself), sub-component class, and the modifier class. [See above](#component-oriented-naming) | */app/components/[component-name]/_[component-name].scss* |
287-
`.t-` | Template classes: These class names are declared as the `template` in the corresponding [view](https://mobify.atlassian.net/wiki/display/PLAT/Views). Example template classes include: `.t-pdp`, `.t-home`, `.t-category`. | */app/pages/[page-name]/_[page-name].scss* |
288-
`.u-` | Utility classes: these are meant as one-off, strongly opinionated, high specificity overrides for very narrowly defined styles. | */app/global/styles/utilities/_[utility-name].scss* |
286+
`.c-` | Component classes: this includes the root component (typically the class that defines the component itself), sub-component class, and the modifier class. [See above](#component-oriented-naming) | Project's component directory |
287+
`.t-` | Template classes: These class names are declared as the `template` in the corresponding [view](https://mobify.atlassian.net/wiki/display/PLAT/Views). Example template classes include: `.t-pdp`, `.t-home`, `.t-category`. | Project's template directory |
288+
`.u-` | Utility classes: these are meant as one-off, strongly opinionated, high specificity overrides for very narrowly defined styles. | Project's `/styles/utilities` directory |
289289
`.x-` | Classes that start with `x-` are considered global states or document states. That means these classes should only be applied to the `html` or `body` element. Example states include `x-ios`, `x-portrait`, `x-retina`, `x-header-is-sticky`, etc. | *varies* |
290290
`.m-` (*) | Desktop embedded mobile markup classes: these are classes that we will use if we author Markup that is intended for clients to embed onto their desktop pages, but is for mobile content. | *n/a* |
291291
`.js-` | Javascript classes are used exclusively by scripts and should never have CSS styles applied to them. Repeat: **Do NOT** style Javascript classes. | *n/a*

0 commit comments

Comments
 (0)