https://bugzilla.wikimedia.org/show_bug.cgi?id=64217
Bug ID: 64217
Summary: Avoid CSS rule duplication by using more descriptive
classes
Product: MobileFrontend
Version: unspecified
Hardware: All
OS: All
Status: NEW
Severity: normal
Priority: Unprioritized
Component: Hygiene
Assignee: [email protected]
Reporter: [email protected]
Web browser: ---
Mobile Platform: ---
I tried out csscss [1] and ran it against default CSS
/w/load.php?debug=true&lang=en&modules=tablet.styles%7Cmediawiki.ui.button%7Cmobile.pagelist.styles%7Cmobile.styles.beta%7Cskins.minerva.chrome.styles%7Cskins.minerva.content.styles%7Cskins.minerva.drawers.styles&only=styles&skin=minerva&target=mobile&*
It would be useful to integrate csscss into MobileFrontend and use it to thin
down our CSS drastically.
Ideally there should be no duplication.
This is the end result:
{.beta blockquote:after,
.alpha blockquote:after} AND {blockquote:after} share 5 rules
- bottom: 0
- content: close-quote
- font-size: 3em
- position: absolute
- right: 0
{.mw-ui-button.mw-ui-constructive}, {.mw-ui-button.mw-ui-destructive} AND
{.mw-ui-button.mw-ui-progressive,
.mw-ui-button.mw-ui-primary} share 5 rules
- border-left: none
- border-right: none
- border-style: solid
- border-width: 1px
- color: #fff
{.inputs-box input:not([type=submit])} AND {.mw-ui-button} share 4 rules
- -moz-box-sizing: border-box
- -webkit-box-sizing: border-box
- box-sizing: border-box
- margin: 0
{.content .edit-page} AND {body.navigation-enabled .transparent-shield} share 4
rules
- bottom: 0
- position: absolute
- right: 0
- top: 0
{.inputs-box input:not([type=submit])} AND {input.search} share 4 rules
- -moz-box-sizing: border-box
- -webkit-appearance: none
- -webkit-box-sizing: border-box
- box-sizing: border-box
{#mw-mf-page-left ul li .icon-secondary}, {.mw-ui-button.mw-ui-constructive},
{.mw-ui-button.mw-ui-destructive} AND {.mw-ui-button.mw-ui-progressive,
.mw-ui-button.mw-ui-primary} share 4 rules
- border-left: none
- border-left-style: solid
- border-left-width: 1px
- border-right: none
{#mw-mf-page-center} AND {input.search} share 4 rules
- -moz-box-sizing: border-box
- -webkit-box-sizing: border-box
- box-sizing: border-box
- width: 100%
{#mw-mf-page-left ul li}, {.content .thumb}, {.mw-ui-button},
{.mw-ui-button.mw-ui-constructive}, {.mw-ui-button.mw-ui-destructive},
{.mw-ui-button.mw-ui-progressive,
.mw-ui-button.mw-ui-primary}, {fieldset}, {img.thumbborder} AND
{input:not([type=submit]),
textarea} share 4 rules
- border-bottom-style: solid
- border-bottom-width: 1px
- border-top-style: solid
- border-top-width: 1px
{.listThumb.needsPhoto} AND {.listThumbV} share 3 rules
- -o-background-size: 100% auto
- -webkit-background-size: 100% auto
- background-size: 100% auto
{#page-actions li} AND {.client-js #page-secondary-actions button,
.client-js #page-secondary-actions .button} share 3 rules
- background-repeat: no-repeat
- text-indent: -9999px
- vertical-align: top
{.header #mw-mf-main-menu-button} AND {.stable .header .overlay-header
.user-button,
.stable .header .overlay-header #secondary-button,
.stable .header .header .user-button,
.stable .header .header #secondary-button} share 3 rules
- -o-background-size: 24px auto
- -webkit-background-size: 24px auto
- background-size: 24px auto
{#page-actions li,
#page-actions .watch-this-article} AND {.content .edit-page} share 3 rules
- -o-background-size: auto 30px
- -webkit-background-size: auto 30px
- background-size: auto 30px
{.content table} AND {.stub .edit-page} share 3 rules
- display: block
- margin-left: 0
- margin-right: 0
{.mw-ui-button} AND {input:not([type=submit]),
textarea} share 3 rules
- background: #fff
- border: 1px solid #ccc
- border-radius: 3px
{#mw-mf-page-left ul li .icon-secondary}, {.beta .pre-content #page-actions,
.alpha .pre-content #page-actions}, {.content .edit-page} AND
{body.navigation-enabled .transparent-shield} share 3 rules
- position: absolute
- right: 0
- top: 0
{.beta blockquote:before,
.alpha blockquote:before}, {.page-list .listThumb} AND {body.navigation-enabled
.transparent-shield} share 3 rules
- left: 0
- position: absolute
- top: 0
{.beta blockquote:after,
.alpha blockquote:after}, {.content .edit-page}, {blockquote:after} AND
{body.navigation-enabled .transparent-shield} share 3 rules
- bottom: 0
- position: absolute
- right: 0
{#mw-mf-page-center}, {#mw-mf-page-left}, {.client-js #page-secondary-actions
button,
.client-js #page-secondary-actions .button}, {.inputs-box
input:not([type=submit])}, {.mw-ui-button} AND {input.search} share 3 rules
- -moz-box-sizing: border-box
- -webkit-box-sizing: border-box
- box-sizing: border-box
{#content_wrapper .top-bar} AND {.page-list li} share 3 rules
- color: #666
- padding-left: 16px
- padding-right: 16px
[1] http://zmoazeni.github.io/csscss/
--
You are receiving this mail because:
You are on the CC list for the bug.
_______________________________________________
Wikibugs-l mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/wikibugs-l
