[wp-trac] [WordPress Trac] #20570: Tidying Admin CSS, bringing it up to CSS Code Standards (work in progress)
WordPress Trac
noreply at wordpress.org
Sun May 11 12:32:20 UTC 2014
#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
More information about the wp-trac
mailing list