Finalize CSS naming convention and architecture

@holly-johnson and I have discussed using BEMIT, based on BEM and ITCSS, but we've yet to fully commit to any one methodology.

Do we adopt the Hungarian notation-like used in the aforementioned BEMIT article?

Two dashes or one after the framework ('dcf' or whatever else we choose to call it) and institution (presumably 'unk', 'unl', 'unmc', 'unca') namespaces? I think @Shaderpixel (Richard Lock, here at UNL) is in favor of two dashes. I go back and forth.

In other words, which do you prefer for the 'display: grid' utility class:

dcf-d-grid
dcf--d-grid
dcf-u-d-grid ('u' for 'utility' class)
dcf--u-d-grid

If adopting the Hungarian notation, would it be helpful if the next fragment of the class name was restricted to not using another single letter (e.g. '…u-d-grid' vs '…u-disp-grid')?

@holly-johnson stopped by today and we discussed some architectural changes. We've moved theme files to a sibling directory of core. The theme directory structure now more closely matches the ITCSS-like structure of the core directory. See #19

I'll go ahead and rephrase my question as a suggestion: if we do adopt the Hungarian notation to indicate class intent, the fragment that follows must not be another single letter to avoid confusion.

How would this change existing classes?

For display (none, block, inline, inline-block, flex, inline-flex, grid, inline-grid, subgrid, table), we could simply remove the d. However, how do we distinguish between styling a table (.dcf--table) vs merely setting the display of an element as a table (display: table;)? Is that a distinction that needs to be made? I think most of the actual table styling occurs in the children elements (th, td, etc). In our meeting this morning, @ptryno also wondered if dcf--none was obvious enough to indicate display: none;. While there are other properties (borders, for example) that could use the value none, I don't know if any of them would warrant such a name. In other words, I think the weight of the name matches the gravity of the property. Or, do we use a fragment like disp- or even display-? I certainly prefer the simplicity of a name like dcf--block if we could find solutions for table and agreement around none.

For grid and flexbox, we could modify the g- and f-, respectively, to grid- and flex-. I also think we can remove flexbox and grid qualifiers for alignment and justification utilities. Because some of these properties are used for both, we can remove duplicate rules and save some file size. Any properties specific to either grid or flexbox simply won't work when applied to the wrong display.

I think we need a utility class for overflow: hidden;. I haven't been able to think of anything better than dcf--overflow-hidden or dcf--u-overflow-hidden. Something more succinct or is this ok?

Commenting on the prefix naming convention: <a href="#" class="dcf--c-btn dcf--c-btn--red dcf--u-mt0 unl--c-btn--hover-scale my-own-custom-class mycontainer-news">Submit</a> VS <a href="#" class="dcf-c-btn dcf-c-btn--red dcf-u-mt0 unl-btn--hover-scale my-own-custom-class mycontainer-news">Submit</a> Trying to compare the two, I find that the former feels more difficult to scan given that the double dashes creates an extra cognitive effort to process the extended length of the class names and my eyes focuses more on the extra dashes than the actual class name as a whole. Also, when we do use the modifiers specified in BEM, dcf--c-btn--red or even dcf--c-card__child--promo-item feels cumbersome to look at, more so when we have a chain of classnames. So after giving some more thought, I kinda lean back towards single dashes as it feels more natural. Besides if we all follow the same prefix, I have a feeling our eyes will automatically pick out the common prefixes for the DCF framework and campus themes without relying on the double dashes. Also, the Hungarian notation namespaces that follow after the prefix helps with readability. (Note, @skoolbus39 and I looked at Salesforce's Lightning design system and they use single dash for their prefix.)

As for the Hungarian notation-like namespaces, I lean heavily towards using them. To me they help with identifying the purpose of each classes in the HTML without having the need to go into the style sheet to see what they do and whether with confidence they can be modified or overwritten. This article pretty much sums up all the benefits of using them.

@skoolbus39 per your question regarding the next fragment following the type namespace I will try to do more research and see if any recommendations/usage recommendations from other organizations out there and comment on that hopefully next week.

Examples of design systems using a namespace prefix with a single dash: https://lightningdesignsystem.com/utilities/alignment/ https://design.cms.gov/utilities/

I could still be persuaded otherwise, but after more thought, like @Shaderpixel, I'm leaning toward: .dcf-u-[value]. Thoughts on single dash vs. double dashes vs. underscores for modifiers?

Where possible, for the sake of brevity, I prefer class names where the values themselves convey the intent of the property. Position properties (e.g. .dcf-u-absolute, .dcf-u-relative) work well because the values aren't used by other properties. Of course, this won't work for all classes.

Potential class names:

Visibility:
- .dcf-u-invisible, .dcf-u-hidden, .dcf-u-visibility-hidden, .dcf-u-vis-hidden
- .dcf-u-sr-only vs .dcf-u-visibility-screen-reader or .dcf-u-vis-screen-reader
Display: .dcf-u-[value] (would need to address the aforementioned issues for none and table), .dcf-u-disp-[value], .dcf-u-display-[value]
Flexbox:
- I like these: .dcf-u-flex-col, .dcf-u-flex-col-rev, .dcf-u-flex-row, .dcf-u-flex-row-rev, .dcf-u-flex-wrap, .dcf-u-flex-wrap-rev, .dcf-u-flex-nowrap
- …but am unsure about class names for flex order: .dcf-u-flex-o#, .dcf-u-flex-order#, .dcf-u-flex-no#, where # could be 1–9?
Box Alignment (for both flexbox and grid): .dcf-u-justify-content-[value] (seems long) or abbreviate .dcf-u-jc-[value]
Font Sizes: .dcf-u-lg#, .dcf-u-sm#. @Shaderpixel mentioned that 'lg' and 'sm' left him wondering where 'md' was. These classes should increase or decrease an element's font-size incrementally larger or smaller than the base font-size. Is there a better way to convey 'larger' and 'smaller'? 'plus' and 'minus'? 'incr' and 'decr'?
Line Height: .dcf-u-lh#, .dcf-u-line#, .dcf-u-line-height-# or instead of using numbers define with terms like 'compact', 'cozy', 'tight', 'loose', etc?
Horizontal Text Alignment: .dcf-u-text-[value] (my preference), .dcf-u-text-align-[value]
Vertical Text Alignment: .dcf-u-vertical-[value], .dcf-u-valign-[value], .dcf-u-text-[value]. I like the latter as it describes that text is being aligned, while the values themselves convey direction. However, I worry about potential for confusion using .dcf-u-text-top for vertical-align: top; and .dcf-u-text-text-top for vertical-align: text-top;). Is this an instance where double dashes or underscores for modifiers would add clarity?
Letter Spacing: dcf-u-ls#, dcf-u-letter#, dcf-u-spacing#, dcf-u-track#, dcf-u-tracking#

Are there other possibilities I'm not seeing?

Double dashes for modifiers are good with me, so is double underscores for block child elements (BEM). Its just that when seeing double dashes on both ends of a class name (when a modifier is present) throws me off when trying to scan. class="dcf--c-btn--red dcf--c-card--promo". Will weigh in on class names soon.

I like the idea of using either a double dash or an underscore for modifiers. I think your .dcf-u-text-text-top example is a good one. Trying to decide which I like better though.

class="dcf-u-text--text-top dcf-c-card--promo dcf-c-btn--red"

class="dcf-u-text_text-top dcf-c-card_promo dcf-c-btn_red"

For class names, I personally like clarity over brevity where it makes sense. Im thinking of all the other devs we have on campus that may be using this sometime down the road. A good example would be with font sizes. What do you think about .dcf-u-font-incr# .dcf-u-font-decr#? I just wonder if something like .dcf-u-incr# is enough?

I'll continue looking at it and try to add more input later.

A few more options:

.dcf-u-text-grow1, .dcf-u-text-shrink1 (via @Shaderpixel)
.dcf-u-incr-sz1, .dcf-u-decr-sz1
.dcf-u-larger1, .dcf-u-smaller1

I kinda like the simplicity and directness of the last option.

Current utility class names:

MULTIPLE DEFINED VALUES IN INCREMENTS

Height .dcf-u-h100 // height 100%

Width .dcf-u-w100 // width 100%

Margins .dcf-u-m0 // margin (all sides), value 0 .dcf-u-m1 // margin (all sides), value 1 .dcf-u-m2 // margin (all sides), value 2 .dcf-u-m3 // margin (all sides), value 3 .dcf-u-m4 // margin (all sides), value 4 .dcf-u-m5 // margin (all sides), value 5 .dcf-u-m6 // margin (all sides), value 6

.dcf-u-mt0 // margin-top, value 0 .dcf-u-mt1 // margin-top, value 1 .dcf-u-mt2 // margin-top, value 2 .dcf-u-mt3 // margin-top, value 3 .dcf-u-mt4 // margin-top, value 4 .dcf-u-mt5 // margin-top, value 5 .dcf-u-mt6 // margin-top, value 6

.dcf-u-mr0 // margin-right, value 0 .dcf-u-mr1 // margin-right, value 1 .dcf-u-mr2 // margin-right, value 2 .dcf-u-mr3 // margin-right, value 3 .dcf-u-mr4 // margin-right, value 4 .dcf-u-mr5 // margin-right, value 5 .dcf-u-mr6 // margin-right, value 6

.dcf-u-mb0 // margin-bottom, value 0 .dcf-u-mb1 // margin-bottom, value 1 .dcf-u-mb2 // margin-bottom, value 2 .dcf-u-mb3 // margin-bottom, value 3 .dcf-u-mb4 // margin-bottom, value 4 .dcf-u-mb5 // margin-bottom, value 5 .dcf-u-mb6 // margin-bottom, value 6

.dcf-u-ml0 // margin-left, value 0 .dcf-u-ml1 // margin-left, value 1 .dcf-u-ml2 // margin-left, value 2 .dcf-u-ml3 // margin-left, value 3 .dcf-u-ml4 // margin-left, value 4 .dcf-u-ml5 // margin-left, value 5 .dcf-u-ml6 // margin-left, value 6

Padding .dcf-u-p0 // padding (all sides), value 0 .dcf-u-p1 // padding (all sides), value 1 .dcf-u-p2 // padding (all sides), value 2 .dcf-u-p3 // padding (all sides), value 3 .dcf-u-p4 // padding (all sides), value 4 .dcf-u-p5 // padding (all sides), value 5 .dcf-u-p6 // padding (all sides), value 6

.dcf-u-pt0 // padding-top, value 0 .dcf-u-pt1 // padding-top, value 1 .dcf-u-pt2 // padding-top, value 2 .dcf-u-pt3 // padding-top, value 3 .dcf-u-pt4 // padding-top, value 4 .dcf-u-pt5 // padding-top, value 5 .dcf-u-pt6 // padding-top, value 6

.dcf-u-pr0 // padding-right, value 0 .dcf-u-pr1 // padding-right, value 1 .dcf-u-pr2 // padding-right, value 2 .dcf-u-pr3 // padding-right, value 3 .dcf-u-pr4 // padding-right, value 4 .dcf-u-pr5 // padding-right, value 5 .dcf-u-pr6 // padding-right, value 6

.dcf-u-pb0 // padding-bottom, value 0 .dcf-u-pb1 // padding-bottom, value 1 .dcf-u-pb2 // padding-bottom, value 2 .dcf-u-pb3 // padding-bottom, value 3 .dcf-u-pb4 // padding-bottom, value 4 .dcf-u-pb5 // padding-bottom, value 5 .dcf-u-pb6 // padding-bottom, value 6

.dcf-u-pl0 // padding-left, value 0 .dcf-u-pl1 // padding-left, value 1 .dcf-u-pl2 // padding-left, value 2 .dcf-u-pl3 // padding-left, value 3 .dcf-u-pl4 // padding-left, value 4 .dcf-u-pl5 // padding-left, value 5 .dcf-u-pl6 // padding-left, value 6

Font-size .dcf-u-lg5 // larger than base font-size .dcf-u-incr-sz-1 .dcf-u-lg4 // larger than base font-size .dcf-u-larger2 .dcf-u-lg3 // larger than base font-size .dcf-u-txt-incr1 .dcf-u-lg2 // larger than base font-size .dcf-u-lg1 // larger than base font-size

.dcf-u-sm1 // smaller than base font-size .dcf-u-decr-sz-1 .dcf-u-sm2 // smaller than base font-size .dcf-u-smaller2 .dcf-u-sm3 // smaller than base font-size .dcf-u-txt-decr1 .dcf-u-sm4 // smaller than base font-size

Line-height .dcf-u-lh1 // base line-height .dcf-u-lh2 // tighter line-height .dcf-u-lh3 // tightest line-height

Letter-spacing .dcf-u-track1 // increase letter-spacing .dcf-u-track2 // increase letter-spacing a little bit more

UNIQUE, SINGLE VALUE

Position .dcf-u-static .dcf-u-relative .dcf-u-absolute .dcf-u-fixed .dcf-u-sticky

Text-transform .dcf-u-capitalize .dcf-u-lowercase .dcf-u-uppercase

VALUES SHARED BY MULTIPLE PROPERTIES

Backgrounds .dcf-u-bg-transparent

Box alignment Align Items .dcf-u-ai-flexstart .dcf-u-ai-flexend .dcf-u-ai-center .dcf-u-ai-baseline .dcf-u-ai-stretch .dcf-u-ai-start .dcf-u-ai-end

Align Content .dcf-u-ac-flexstart .dcf-u-ac-flexend .dcf-u-ac-center .dcf-u-ac-stretch .dcf-u-ac-around .dcf-u-ac-between .dcf-u-ac-evenly .dcf-u-ac-start .dcf-u-ac-end

Align Self .dcf-u-as-auto .dcf-u-as-flexstart .dcf-u-as-flexend .dcf-u-as-center .dcf-u-as-baseline .dcf-u-as-stretch .dcf-u-as-start .dcf-u-as-end

Justify Items .dcf-u-ji-start .dcf-u-ji-end .dcf-u-ji-center .dcf-u-ji-stretch

Justify Content .dcf-u-jc-flexstart .dcf-u-jc-flexend .dcf-u-jc-center .dcf-u-jc-around .dcf-u-jc-between .dcf-u-jc-evenly .dcf-u-jc-start .dcf-u-jc-end .dcf-u-jc-stretch

Justify Self .dcf-u-js-start .dcf-u-js-center .dcf-u-js-end .dcf-u-js-stretch

Colors .dcf-u-inverse a.dcf-u-inverse:link a.dcf-u-inverse:visited a.dcf-u-inverse:hover a.dcf-u-inverse:active

Display .dcf-u-none .dcf-u-block .dcf-u-inline .dcf-u-inlineblock .dcf-u-flex .dcf-u-inlineflex .dcf-u-grid .dcf-u-inlinegrid .dcf-u-subgrid .dcf-u-table .dcf-u-tablecell

Flexbox .dcf-u-flex-col .dcf-u-flex-colrev .dcf-u-flex-row .dcf-u-flex-rowrev

.dcf-u-flex-wrap .dcf-u-flex-wraprev .dcf-u-flex-nowrap

Floats .dcf-u-float-right .dcf-u-float-left .dcf-u-clear-right .dcf-u-clear-left .dcf-u-clear-both

Order (for flexbox and grid) .dcf-u-1st .dcf-u-2nd .dcf-u-3rd .dcf-u-4th .dcf-u-5th .dcf-u-6th .dcf-u-7th .dcf-u-8th .dcf-u-9th

Overflow .dcf-u-overflow-visible // necessary? .dcf-u-overflow-hidden .dcf-u-overflow-scroll .dcf-u-overflow-auto .dcf-u-overflow-x-visible // necessary? .dcf-u-overflow-x-hidden .dcf-u-overflow-x-scroll .dcf-u-overflow-x-auto .dcf-u-overflow-y-visible // necessary? .dcf-u-overflow-y-hidden .dcf-u-overflow-y-scroll .dcf-u-overflow-y-auto

Vertical text alignment .dcf-u-txt-baseline .dcf-u-txt-top .dcf-u-txt-middle .dcf-u-txt-bottom .dcf-u-txt-texttop .dcf-u-txt-textbottom

Horizontal text alignment .dcf-u-txt-center .dcf-u-txt-left .dcf-u-txt-right

Text-decoration .dcf-u-txt-decor-none

Text wrap (white-space) .dcf-u-txt-nowrap

Font weight .dcf-u-regular .dcf-u-bold

Font styles .dcf-u-roman .dcf-u-italic

Visibility .dcf-u-invisible .dcf-u-visible .dcf-u-sr-only .dcf-u-sr-only.dcf-u-show-on-focus:active .dcf-u-sr-only.dcf-u-show-on-focus:focus

MULTIPLE PROPERTY RULES

Aspect ratio .dcf-u-aspect-ratio .dcf-u-16x9:before .dcf-u-4x3:before .dcf-u-1x1:before

Borders .dcf-u-b1 .dcf-u-bt .dcf-u-br .dcf-u-bb .dcf-u-bl .dcf-u-b0

Border-radius .dcf-u-circle .dcf-u-rounded .dcf-u-rounded-top .dcf-u-rounded-right .dcf-u-rounded-bottom .dcf-u-rounded-left

Disabled .dcf-u-disabled

Overlay .dcf-u-overlay-dark .dcf-u-overlay-light

digitalcampusframework / dcf

Finalize CSS naming convention and architecture #6