CSS kombinieren Klassen, sauberen Code/Duplizierung

Ich erstelle eine CSS-Reiniger für den persönlichen Gebrauch, weil die Datei, die ich habe, ist über 400kb und die meisten der Inhalt ist dupliziert.CSS kombinieren Klassen, sauberen Code/Duplizierung

Ich habe ein Skript erstellt zu lesen und CSS-Datei und brechen Sie Klassen und speichern Sie dort Styling in zwei verschiedenen Arrays. $ css_normal und classes_by_items_normal $

Ergebnis von $ css_normal (nur wenige Artikel zur Erläuterung)

Array 
(
    [header] => Array 
     (
      [display] => block 
     ) 

    [.half-law-first ul] => Array 
     (
      [font-family] => 'Lato', sans-serif 
     ) 

    [.half-law-first ul li a] => Array 
     (
      [font-family] => 'Lato', sans-serif 
     ) 

    [.half-law-second ul li a] => Array 
     (
      [font-family] => 'Lato', sans-serif 
     ) 

    [.half-law-second ul strong] => Array 
     (
      [font-family] => 'Lato', sans-serif 
     ) 

    [.title-blue] => Array 
     (
      [font-family] => 'Lato', sans-serif 
     ) 

    [.enquiry_box_home] => Array 
     (
      [min-height] => 480px 
     ) 

    [.will-step1-fbox-footer] => Array 
     (
      [padding-top] => 2px 
      [padding-bottom] => 20px 
      [-webkit-border-bottom-left-radius] => 5px 
      [-webkit-border-bottom-right-radius] => 5px 
      [-moz-border-radius-bottomleft] => 5px 
      [-moz-border-radius-bottomright] => 5px 
      [border-bottom-left-radius] => 5px 
      [border-bottom-right-radius] => 5px 
      [font-family] => 'Lato', sans-serif !important 
     ) 

    [.will-step1-fbox-footer .checkbox ] => Array 
     (
      [border-bottom] => 1px dashed #fff 
      [padding-bottom] => 8px 
      [padding-top] => 2px 
     ) 

    [.second_banner_x] => Array 
     (
     ) 

    [.custom_enquiry_box] => Array 
     (
      [width] => 100% 
      [height] => auto 
      [margin] => 0px 
      [padding] => 18px 
      [background] => rgba(3, 3, 3, 0.3) 
      [color] => #fff 
      [position] => relative 
      [z-index] => 38 
      [margin-top] => 5px 
      [-webkit-border-radius] => 5px 
      [-moz-border-radius] => 5px 
      [border-radius] => 5px 
      [box-shadow] => 4px 5px 13px rgba(0, 0, 0, 0.5) !important 
     ) 
)

Ergebnis von $ classes_by_items_normal (wenige Artikel zur Erläuterung)

Array 
(
    [display:block] => Array 
     (
      [0] => header 
      [1] => .enq_a9_result 
      [2] => #enq_a9_dots_div 
      [3] => .will-intro-box-left h1 
      [4] => .will-intro-box-left h1 span 
      [5] => .will-intro-box-left h1 span span 
      [6] => .will-intro-box-left > h1 
      [7] => .wills_2_boxes h1 
      [8] => .wills_2_boxes h2.willsBoxH2 
      [9] => .wills_2_boxes strong.willsBoxH2 
      [10] => .wills_2_boxes b.willsBoxH2 
      [11] => strong.WillsH3 
      [12] => b.WillsH3 
      [13] => .wills_2_will_text_left_area 
      [14] => .wills_2_will_text_right_area 
      [15] => .nl-banner .tooltip.bottom table td small 
      [16] => .aFPPriceAreaLeft .aFPopup + .tooltip.bottom table td small 
      [17] => .nl-banner .tooltip.bottom h3 small 
      [18] => .aFPPriceAreaLeft .aFPopup + .tooltip.bottom h3 small 
      [19] => .will_single_line1 
      [20] => .will_single_line2 
      [21] => .custom_modal span 
      [22] => .login-header-area .s1a 
      [23] => .login-header-area .s2a 
      [24] => .sign_h2_mobile 
      [25] => .show-signup-form 
      [26] => .show-signin-form 
      [27] => .gform_page_fields 
      [28] => .gform_page_footer 
      [29] => .account-sidebar li 
      [30] => .account-sidebar li a 
      [31] => .popup_box_wills_right .heading 
      [32] => .popup_box_wills_left .heading 
      [33] => .recent-posts-nav li 
      [34] => .posts-sidearea2x .will-step1-fbox 
      [35] => .difc-posts-right 
      [36] => .wills-video-modal #close_popup_left2 
      [37] => .posts-modal #close_popup_left2 
      [38] => .inpost-div strong 
      [39] => .inpost-div span 
      [40] => .wills-play-button-img 
      [41] => .not_for_u_b 
      [42] => .steps_ans_head 
      [43] => .satifaction-form-area strong 
      [44] => .satif-testi-area strong 
      [45] => .wills-main-banner-area h1 
      [46] => .wills-main-banner-area h2 
      [47] => .wills-main-banner-area .will-main-left-box p 
      [48] => .wills-main-banner-area .will-main-right-box p 
      [49] => .wills-main-banner-area .will-main-left-box b 
      [50] => .wills-main-banner-area .will-main-right-box b 
      [51] => .wills-main-difc span strong 
      [52] => .blue-sep3 
      [53] => .wills-main-boxes-area1 .main-heading-box 
      [54] => .wills-main-boxes-area1 p 
      [55] => .wills-main-details-bar p 
      [56] => .wills-new-item-price strong 
      [57] => .quest-testi-b 
      [58] => .wills-muslim-banner-area h1 
      [59] => .wills-muslim-banner-area h2 
      [60] => .nl2-banner .inBulletsStrongBig 
      [61] => .will-muslim-bottom-box 
      [62] => .wills-muslim-banner-area .will-muslim-left-box p 
      [63] => .wills-muslim-banner-area .will-muslim-right-box p 
      [64] => .wills-muslim-banner-area .will-muslim-bottom-box p 
      [65] => .wills-muslim-banner-area .will-muslim-left-box b 
      [66] => .wills-muslim-banner-area .will-muslim-right-box b 
      [67] => .wills-muslim-banner-area .will-muslim-bottom-box b 
      [68] => .wills-muslim-difc span strong 
      [69] => .blue-sep3 
      [70] => .wills_muslim_mainarea .below_heading p 
      [71] => .dmca-div 
      [72] => .dmca-div2 
      [73] => .save_quit_div 
      [74] => .free-pickup-delivery strong 
      [75] => .partners-right-area ul li 
      [76] => .partners-right-area ul li strong 
      [77] => .partners-right-area ul li em 
      [78] => .partners-right-area ul li:after 
      [79] => .adptable td span 
      [80] => .adptable .btn 
      [81] => .adptable .btn:active 
      [82] => .adptable .btn:focus 
      [83] => .single-feature-homepage .fa-area 
      [84] => .single-feature-homepage .text-area 
      [85] => .footer 
      [86] => .footer-bottom 
      [87] => .common_p 
      [88] => .bullet-inline-price span.crossed 
      [89] => .searchStrong 
      [90] => .searchoverlay form 
      [91] => .searchoverlay2 form 
      [92] => .searchMenuButton 
      [93] => .searchoverlayClose 
      [94] => .searchLink 
      [95] => .searchNav 
      [96] => .searchNav a 
      [97] => .homepage_banner_dropdowns_div_main .dropdowns_area_d 
      [98] => .homepage_banner_dropdowns_div_main .dropdowns_area_d.opened 
      [99] => .homepage_banner_dropdowns_div_main .dropdowns_area_d .dropdown_name 
      [100] => .homepage_banner_dropdowns_div_main .dropdowns_area_d .dropdowns_submenu .dropdown_sub_name 
      [101] => .homepage_banner_dropdowns_div_main .dropdowns_area_d .dropdowns_submenu.opened 
      [102] => .home_new2_bv_area 
      [103] => #posts-youtube-link-banner-home 
      [104] => .page-template-legal-forms-all .panel-heading a 
      [105] => .allFormsPanelDiv .panel-heading a 
      [106] => .page-template-legal-forms-all .panel-body ul 
      [107] => .allFormsPanelDiv .aFPRightArea 
      [108] => .aFPRightArea .aFPR1_1 strong 
      [109] => .aFPRightArea .aFPR1_1 .aFPrice 
      [110] => .homepage-tabs-holder ul.nav-tabs li.active>a:after 
      [111] => .page-id-3149 .learn-more-area a.scn4 small 
      [112] => .pricing-fee-tm 
      [113] => .page-id-7527 .will-step1-fbox-footer .tooltip.bottom table td small 
      [114] => .page-id-7599 .will-step1-fbox-footer .tooltip.bottom table td small 
      [115] => .page-id-3292 .will-step1-fbox-footer .tooltip.bottom table td small 
      [116] => .page-id-7527 .will-step1-fbox-footer .tooltip.bottom h3 small 
      [117] => .page-id-7599 .will-step1-fbox-footer .tooltip.bottom h3 small 
      [118] => .page-id-3292 .will-step1-fbox-footer .tooltip.bottom h3 small 
      [119] => .qa-box .panel-title a 
      [120] => .headerCurrencyDrop 
      [121] => .countrySelect 
      [122] => .headerCurrencyDrop.active + ul 
      [123] => .countrySelect.active + ul 
      [124] => .headerCurrencyDrop + ul > li > a 
      [125] => .countrySelect + ul > li > a 
      [126] => #mega-menu-wrap-new-header-bar #mega-menu-new-header-bar li.mega-menu-item.mega-menu-item-7731 img 
      [127] => #mega-menu-wrap-new-header-bar #mega-menu-new-header-bar li.mega-menu-item.mega-menu-item-7731 span 
      [128] => header .login-box a.hiDropdown + ul 
      [129] => header .login-box a.hiDropdown.active + ul 
      [130] => .btn-3steps-sample 
      [131] => .breadcrumbsUL 
      [132] => .extra-selectionButton-div 
      [133] => .extra-selectionButton-div a 
      [134] => .extra-selectionButton-div a small 
      [135] => .aFPPriceAreaLeft 
      [136] => .aFPSampleAreaRight 
      [137] => .aFPopup 
      [138] => .aFViewSample 
      [139] => .aFPPriceAreaLeft .aFPPriceLeft 
      [140] => img.aFPSampleAreaImg 
     ) 

    [font-family:'Lato', sans-serif] => Array 
     (
      [0] => .half-law-first ul 
      [1] => .half-law-first ul li a 
      [2] => .half-law-second ul li a 
      [3] => .half-law-second ul strong 
      [4] => .title-blue 
      [5] => .custom_enquiry_box h1 
      [6] => .wills_2_boxes 
      [7] => .wills_2_boxes a 
      [8] => .accounts-h2 
      [9] => .my-accounts-page 
      [10] => .popup_box_wills_left 
      [11] => .popup_box_wills_right 
      [12] => .popup_box_wills_right p 
      [13] => .popup_box_wills_left p 
      [14] => .popup_box_wills_right li 
      [15] => .popup_box_wills_left li 
      [16] => .popup_box_wills_right a 
      [17] => .popup_box_wills_left a 
      [18] => .inpost-div 
      [19] => .inpost-div strong 
      [20] => .inpost-div span 
      [21] => .kcw-banner-box 
      [22] => .kcw-banner-box p 
      [23] => .kcw-banner-box h1 
      [24] => .kcw-banner-box h2 
      [25] => .kcw-sep-blue-bar h2 
      [26] => .kcw-content-area 
      [27] => .kcw-content-area h2 
      [28] => .kcw-content-area ul 
      [29] => .kcw-content-area ul li 
      [30] => .wills-main-banner-area 
      [31] => .wills-muslim-banner-area 
      [32] => .home_3_boxes .three-boxes-div .single_box 
      [33] => .blue-sep h2 
      [34] => .intro-home h2 
      [35] => header 
      [36] => .sec-row 
      [37] => .sec-row .navbar-default .navbar-nav>li>a 
      [38] => .sec-row .navbar-default .navbar-nav>li>a:hover 
      [39] => .sec-row .navbar-default .navbar-nav>li>a:active 
      [40] => .nl-price-area2 .colored-bar h3 
      [41] => .nl-price-area2 .pricing_content_area h4 
     ) 

    [min-height:480px] => Array 
     (
      [0] => .enquiry_box_home 
      [1] => .will-intro-box 
     ) 

    [padding-top:2px] => Array 
     (
      [0] => .will-step1-fbox-footer 
      [1] => .will-step1-fbox-footer .checkbox 
      [2] => .wills-muslim-banner-area 
     ) 

)

Was ich will, ist Kombiniere Klassen mit gleichem Styling wie:

header 
{ 
    display: block; 
} 
.half-law-first ul, .half-law-first ul li a, .half-law-second ul li a, .half-law-second ul strong, .title-blue 
{ 
    font-family: 'Lato', sans-serif; 
} 
.enquiry_box_home 
{ 
    min-height: 480px; 
} 
.will-step1-fbox-footer, 
.will-step1-fbox-footer .checkbox 
{ 
    padding-top: 2px; 
} 
.will-step1-fbox-footer 
{ 
    padding-bottom: 20px; 
} 

.will-step1-fbox-footer .checkbox 
{ 
    border-bottom: 1px dashed #fff; 
    padding-bottom: 8px; 
}

Bitte lassen Sie mich wissen, wie es entweder mit $ css_normal oder mit $ classes_by_items_normal über PHP

Danke gemacht werden kann.

Quelle

2017-07-29 Adeel Ahmed

Muss es PHP sein? – DazDylz

Schleife auf $ classes_by_items_normal ein Array zu erstellen, wo der Schlüssel ist die Verkettung aller Klassen ist und der Wert ein Array von Immobilien

Dies ist eine erprobte nicht-Code:

$newArr = [] 
forEach($classes_by_items_normal as $prop => $classes){ 
    newArr[join(',',$classes)][] = $prop 
}

nur Schleife auf $ newArr zum Erstellen der Zeichenfolge.

Sie haben nur jeweils eine Eigenschaft, stattdessen haben beide Eigenschaften genau dieselben Klassen.

Quelle

2017-07-29 20:31:26 bormat

Danke für diese Schleife. es funktioniert, aber Klassen definiert sind so viele und in diesem Fall Klassen Namen (und Kinder in ihnen) werden wiederholt, die Text/Dateigröße erhöht, weil für jedes Mal es einzelne Eigenschaft definiert. –

folgende Arbeiten eine Form ähnlich wie $css_normal verwenden, aber ohne die Eigenschaften in Schlüssel/Wert-Paare zu spalten, sie einfach als Zeichenketten zu verlassen:

$optimized = []; 

foreach (array_keys($css) as $sel) { 
    // refetch value since it may have changed during previous iteration 
    $def = $css[$sel]; 

    // find largest common subset 
    $subset = []; 
    foreach ($css as $s_sel => $s_def) { 
    if ($sel === $s_sel) continue; 
    $common = array_intersect($def, $s_def); 
    if (count($common) > count($subset)) { 
     $subset = $common; 
    } 
    } 

    if (empty($subset)) { 
    // unchanged 
    $optimized[$sel] = $def; 
    } else { 
    // selectors containing subset 
    $sel_concat = []; 
    // find & extract subset 
    foreach ($css as $s_sel => $s_def) { 
     $diff = array_diff($s_def, $subset); 
     if (count($s_def) - count($diff) === count($subset)) { 
     $sel_concat[] = $s_sel; 
     $css[$s_sel] = $diff; 
     } 
    } 
    // concatenate selectors for subset 
    $optimized[join(', ', $sel_concat)] = $subset; 
    } 

}

Sie können es versuchen here aus.

Der Ansatz besteht darin, die größte gemeinsame Teilmenge von CSS-Eigenschaften zu finden und sie zu gruppieren.

PS. Könnte ein Tool wie CSSO für Sie nützlich sein, anstatt eine eigene Lösung in PHP einzuführen?

Quelle

2017-08-04 15:46:33

CSS kombinieren Klassen, sauberen Code/Duplizierung

Antwort

Verwandte Themen