[wp-trac] [WordPress Trac] #20570: Tidying Admin CSS, bringing it up to CSS Code Standards (work in progress)

[WordPress Trac]

#20570: Tidying Admin CSS, bringing it up to CSS Code Standards (work in progress)
------------------------------+-------------------------
 Reporter:  georgestephanis   |       Owner:
     Type:  enhancement       |      Status:  closed
 Priority:  normal            |   Milestone:
Component:  Administration    |     Version:  3.4
 Severity:  minor             |  Resolution:  maybelater
 Keywords:  work-in-progress  |     Focuses:  ui
------------------------------+-------------------------

Comment (by GaryJ):

 Replying to [comment:30 helen]:
 > I don't know. I don't see any realistic path to this, as lovely as it
 sounds. Let's maybelater this, maybe over time as we do things like split
 files, introduce reusable components, '''and take advantage of tooling''',
 we can naturally ease in some sanity.

 Specifically regarding property ordering, CSSComb has been rewritten as
 JS, so it's available as a grunt task (and also available as a Sublime
 Text plugin, and also the csscomb.com website, once they've finished
 rebuilding it). I'd love to see this integrated, and any .csscomb.json
 file in core referenced from the CSS Coding Standards Handbook so that
 plugin and theme developers can grab a copy and use it in their own
 projects.

 The CSS Coding Standards in the Handbook currently gives the
 [http://make.wordpress.org/core/handbook/coding-standards/css/#property-
 ordering property ordering]:

 * Display
 * Positioning
 * Box model
 * Colors and Typography
 * Other

 This isn't prescriptive enough to be useful.

 The advantage of having a consistent order of properties is reduced
 maintenance (it works on source files, so properties could be ordered pre-
 commit too) and to gain more benefit when gzipping.

 As an example, CSSComb can take:

 {{{
 .foo:before {
         content: 'foo';
         background: #424242;
         width: 18px;
         border-radius: 10px;
         font-size: 11px;
         line-height: 18px;
         color: #fff;
         height: 18px;
         content: 'foo';
         text-align: center;
         display: inline-block;
 }
 }}}

 and order it to:

 {{{
 .foo:before {
         display: inline-block;
         width: 18px;
         height: 18px;
         font-size: 11px;
         line-height: 18px;
         color: #fff;
         border-radius: 10px;
         background: #424242;
         content: 'foo';
         text-align: center;
 }
 }}}

 Properties are individually orderable, so if you want text-align up next
 to font-related properties, it can be.

 The output can optionally contain groupings (might be nice for .scss
 files):
 {{{
 .foo:before {
         display: inline-block;

         width: 18px;
         height: 18px;

         font-size: 11px;
         line-height: 18px;

         color: #fff;
         border-radius: 10px;
         background: #424242;

         content: 'foo';
         text-align: center;
 }
 }}}

 Any reason not to implement this tool to automate a consistent order of
 properties?

--
Ticket URL: <https://core.trac.wordpress.org/ticket/20570#comment:31>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform