[{"data":1,"prerenderedAt":1376},["ShallowReactive",2],{"guide-css-compression-techniques":3},{"id":4,"title":5,"body":6,"date":1368,"description":1369,"extension":1370,"meta":1371,"navigation":902,"path":1372,"readingTime":912,"seo":1373,"stem":1374,"__hash__":1375},"guides\u002Fguides\u002Fcss-compression-techniques.md","CSS Compression Techniques: From Comments to Shorthand",{"type":7,"value":8,"toc":1346},"minimark",[9,14,18,21,25,28,31,106,109,142,145,149,152,179,181,233,235,273,276,280,283,288,290,362,364,391,395,397,451,453,480,484,486,559,561,599,606,610,613,617,624,706,710,713,799,810,814,850,854,857,859,937,939,971,978,981,985,988,990,1054,1056,1091,1094,1098,1101,1141,1151,1166,1169,1188,1191,1195,1275,1278,1282,1302,1306,1315,1319,1342],[10,11,13],"h2",{"id":12},"what-is-css-compression","What Is CSS Compression?",[15,16,17],"p",{},"CSS compression (or minification) applies a set of transformations that reduce file size without changing how the browser interprets the styles. Unlike gzip — which compresses files during transfer — compression techniques modify the CSS source itself.",[15,19,20],{},"Understanding these techniques helps you write more efficient CSS and choose the right minification tools.",[10,22,24],{"id":23},"comment-removal","Comment Removal",[15,26,27],{},"CSS comments are the first thing minifiers strip. They add zero value for the browser but can significantly increase file size.",[15,29,30],{},"Before:",[32,33,38],"pre",{"className":34,"code":35,"language":36,"meta":37,"style":37},"language-css shiki shiki-themes github-light github-dark","\u002F* Primary button styles — updated 2024 *\u002F\n.btn-primary {\n  \u002F* Blue background for main CTA *\u002F\n  background-color: #0066cc;\n  color: #ffffff; \u002F* White text on blue *\u002F\n}\n","css","",[39,40,41,50,61,67,83,100],"code",{"__ignoreMap":37},[42,43,46],"span",{"class":44,"line":45},"line",1,[42,47,49],{"class":48},"sJ8bj","\u002F* Primary button styles — updated 2024 *\u002F\n",[42,51,53,57],{"class":44,"line":52},2,[42,54,56],{"class":55},"sScJk",".btn-primary",[42,58,60],{"class":59},"sVt8B"," {\n",[42,62,64],{"class":44,"line":63},3,[42,65,66],{"class":48},"  \u002F* Blue background for main CTA *\u002F\n",[42,68,70,74,77,80],{"class":44,"line":69},4,[42,71,73],{"class":72},"sj4cs","  background-color",[42,75,76],{"class":59},": ",[42,78,79],{"class":72},"#0066cc",[42,81,82],{"class":59},";\n",[42,84,86,89,91,94,97],{"class":44,"line":85},5,[42,87,88],{"class":72},"  color",[42,90,76],{"class":59},[42,92,93],{"class":72},"#ffffff",[42,95,96],{"class":59},"; ",[42,98,99],{"class":48},"\u002F* White text on blue *\u002F\n",[42,101,103],{"class":44,"line":102},6,[42,104,105],{"class":59},"}\n",[15,107,108],{},"After:",[32,110,112],{"className":34,"code":111,"language":36,"meta":37,"style":37},".btn-primary{background-color:#0066cc;color:#fff}\n",[39,113,114],{"__ignoreMap":37},[42,115,116,118,121,124,127,129,132,135,137,140],{"class":44,"line":45},[42,117,56],{"class":55},[42,119,120],{"class":59},"{",[42,122,123],{"class":72},"background-color",[42,125,126],{"class":59},":",[42,128,79],{"class":72},[42,130,131],{"class":59},";",[42,133,134],{"class":72},"color",[42,136,126],{"class":59},[42,138,139],{"class":72},"#fff",[42,141,105],{"class":59},[15,143,144],{},"Comments in development code are essential. But they should never reach production. A minifier removes them automatically.",[10,146,148],{"id":147},"whitespace-stripping","Whitespace Stripping",[15,150,151],{},"CSS ignores most whitespace between tokens. Minifiers remove:",[153,154,155,159,162,176],"ul",{},[156,157,158],"li",{},"Leading and trailing whitespace on each line",[156,160,161],{},"Blank lines between rules",[156,163,164,165,167,168,167,171,173,174],{},"Spaces around ",[39,166,120],{},", ",[39,169,170],{},"}",[39,172,126],{},", and ",[39,175,131],{},[156,177,178],{},"Newlines and indentation",[15,180,30],{},[32,182,184],{"className":34,"code":183,"language":36,"meta":37,"style":37},".container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n",[39,185,186,193,205,217,229],{"__ignoreMap":37},[42,187,188,191],{"class":44,"line":45},[42,189,190],{"class":55},".container",[42,192,60],{"class":59},[42,194,195,198,200,203],{"class":44,"line":52},[42,196,197],{"class":72},"  display",[42,199,76],{"class":59},[42,201,202],{"class":72},"flex",[42,204,82],{"class":59},[42,206,207,210,212,215],{"class":44,"line":63},[42,208,209],{"class":72},"  align-items",[42,211,76],{"class":59},[42,213,214],{"class":72},"center",[42,216,82],{"class":59},[42,218,219,222,224,227],{"class":44,"line":69},[42,220,221],{"class":72},"  justify-content",[42,223,76],{"class":59},[42,225,226],{"class":72},"space-between",[42,228,82],{"class":59},[42,230,231],{"class":44,"line":85},[42,232,105],{"class":59},[15,234,108],{},[32,236,238],{"className":34,"code":237,"language":36,"meta":37,"style":37},".container{display:flex;align-items:center;justify-content:space-between}\n",[39,239,240],{"__ignoreMap":37},[42,241,242,244,246,249,251,253,255,258,260,262,264,267,269,271],{"class":44,"line":45},[42,243,190],{"class":55},[42,245,120],{"class":59},[42,247,248],{"class":72},"display",[42,250,126],{"class":59},[42,252,202],{"class":72},[42,254,131],{"class":59},[42,256,257],{"class":72},"align-items",[42,259,126],{"class":59},[42,261,214],{"class":72},[42,263,131],{"class":59},[42,265,266],{"class":72},"justify-content",[42,268,126],{"class":59},[42,270,226],{"class":72},[42,272,105],{"class":59},[15,274,275],{},"This single transformation often accounts for the largest size reduction — sometimes 30% or more on well-commented stylesheets.",[10,277,279],{"id":278},"shorthand-property-expansion","Shorthand Property Expansion",[15,281,282],{},"Minifiers convert longhand properties into their shorthand equivalents when possible.",[284,285,287],"h3",{"id":286},"margin-and-padding","Margin and Padding",[15,289,30],{},[32,291,293],{"className":34,"code":292,"language":36,"meta":37,"style":37},".element {\n  margin-top: 10px;\n  margin-right: 20px;\n  margin-bottom: 10px;\n  margin-left: 20px;\n}\n",[39,294,295,302,318,332,345,358],{"__ignoreMap":37},[42,296,297,300],{"class":44,"line":45},[42,298,299],{"class":55},".element",[42,301,60],{"class":59},[42,303,304,307,309,312,316],{"class":44,"line":52},[42,305,306],{"class":72},"  margin-top",[42,308,76],{"class":59},[42,310,311],{"class":72},"10",[42,313,315],{"class":314},"szBVR","px",[42,317,82],{"class":59},[42,319,320,323,325,328,330],{"class":44,"line":63},[42,321,322],{"class":72},"  margin-right",[42,324,76],{"class":59},[42,326,327],{"class":72},"20",[42,329,315],{"class":314},[42,331,82],{"class":59},[42,333,334,337,339,341,343],{"class":44,"line":69},[42,335,336],{"class":72},"  margin-bottom",[42,338,76],{"class":59},[42,340,311],{"class":72},[42,342,315],{"class":314},[42,344,82],{"class":59},[42,346,347,350,352,354,356],{"class":44,"line":85},[42,348,349],{"class":72},"  margin-left",[42,351,76],{"class":59},[42,353,327],{"class":72},[42,355,315],{"class":314},[42,357,82],{"class":59},[42,359,360],{"class":44,"line":102},[42,361,105],{"class":59},[15,363,108],{},[32,365,367],{"className":34,"code":366,"language":36,"meta":37,"style":37},".element{margin:10px 20px}\n",[39,368,369],{"__ignoreMap":37},[42,370,371,373,375,378,380,382,384,387,389],{"class":44,"line":45},[42,372,299],{"class":55},[42,374,120],{"class":59},[42,376,377],{"class":72},"margin",[42,379,126],{"class":59},[42,381,311],{"class":72},[42,383,315],{"class":314},[42,385,386],{"class":72}," 20",[42,388,315],{"class":314},[42,390,105],{"class":59},[284,392,394],{"id":393},"border","Border",[15,396,30],{},[32,398,400],{"className":34,"code":399,"language":36,"meta":37,"style":37},".box {\n  border-width: 1px;\n  border-style: solid;\n  border-color: #333;\n}\n",[39,401,402,409,423,435,447],{"__ignoreMap":37},[42,403,404,407],{"class":44,"line":45},[42,405,406],{"class":55},".box",[42,408,60],{"class":59},[42,410,411,414,416,419,421],{"class":44,"line":52},[42,412,413],{"class":72},"  border-width",[42,415,76],{"class":59},[42,417,418],{"class":72},"1",[42,420,315],{"class":314},[42,422,82],{"class":59},[42,424,425,428,430,433],{"class":44,"line":63},[42,426,427],{"class":72},"  border-style",[42,429,76],{"class":59},[42,431,432],{"class":72},"solid",[42,434,82],{"class":59},[42,436,437,440,442,445],{"class":44,"line":69},[42,438,439],{"class":72},"  border-color",[42,441,76],{"class":59},[42,443,444],{"class":72},"#333",[42,446,82],{"class":59},[42,448,449],{"class":44,"line":85},[42,450,105],{"class":59},[15,452,108],{},[32,454,456],{"className":34,"code":455,"language":36,"meta":37,"style":37},".box{border:1px solid #333}\n",[39,457,458],{"__ignoreMap":37},[42,459,460,462,464,466,468,470,472,475,478],{"class":44,"line":45},[42,461,406],{"class":55},[42,463,120],{"class":59},[42,465,393],{"class":72},[42,467,126],{"class":59},[42,469,418],{"class":72},[42,471,315],{"class":314},[42,473,474],{"class":72}," solid",[42,476,477],{"class":72}," #333",[42,479,105],{"class":59},[284,481,483],{"id":482},"background","Background",[15,485,30],{},[32,487,489],{"className":34,"code":488,"language":36,"meta":37,"style":37},".hero {\n  background-color: #f0f0f0;\n  background-image: url('bg.png');\n  background-repeat: no-repeat;\n  background-position: center top;\n}\n",[39,490,491,498,509,529,541,555],{"__ignoreMap":37},[42,492,493,496],{"class":44,"line":45},[42,494,495],{"class":55},".hero",[42,497,60],{"class":59},[42,499,500,502,504,507],{"class":44,"line":52},[42,501,73],{"class":72},[42,503,76],{"class":59},[42,505,506],{"class":72},"#f0f0f0",[42,508,82],{"class":59},[42,510,511,514,516,519,522,526],{"class":44,"line":63},[42,512,513],{"class":72},"  background-image",[42,515,76],{"class":59},[42,517,518],{"class":72},"url",[42,520,521],{"class":59},"(",[42,523,525],{"class":524},"sZZnC","'bg.png'",[42,527,528],{"class":59},");\n",[42,530,531,534,536,539],{"class":44,"line":69},[42,532,533],{"class":72},"  background-repeat",[42,535,76],{"class":59},[42,537,538],{"class":72},"no-repeat",[42,540,82],{"class":59},[42,542,543,546,548,550,553],{"class":44,"line":85},[42,544,545],{"class":72},"  background-position",[42,547,76],{"class":59},[42,549,214],{"class":72},[42,551,552],{"class":72}," top",[42,554,82],{"class":59},[42,556,557],{"class":44,"line":102},[42,558,105],{"class":59},[15,560,108],{},[32,562,564],{"className":34,"code":563,"language":36,"meta":37,"style":37},".hero{background:#f0f0f0 url(bg.png) no-repeat center top}\n",[39,565,566],{"__ignoreMap":37},[42,567,568,570,572,574,576,578,581,583,587,590,592,595,597],{"class":44,"line":45},[42,569,495],{"class":55},[42,571,120],{"class":59},[42,573,482],{"class":72},[42,575,126],{"class":59},[42,577,506],{"class":72},[42,579,580],{"class":72}," url",[42,582,521],{"class":59},[42,584,586],{"class":585},"s4XuR","bg.png",[42,588,589],{"class":59},") ",[42,591,538],{"class":72},[42,593,594],{"class":72}," center",[42,596,552],{"class":72},[42,598,105],{"class":59},[15,600,601,602,605],{},"Minifiers also remove quotes around ",[39,603,604],{},"url()"," values since they're optional in most contexts.",[10,607,609],{"id":608},"value-optimization","Value Optimization",[15,611,612],{},"Minifiers apply dozens of small value-level optimizations that add up quickly.",[284,614,616],{"id":615},"zero-values","Zero Values",[15,618,619,620,623],{},"Any unit attached to ",[39,621,622],{},"0"," is unnecessary because zero is zero in every unit.",[625,626,627,643],"table",{},[628,629,630],"thead",{},[631,632,633,637,640],"tr",{},[634,635,636],"th",{},"Before",[634,638,639],{},"After",[634,641,642],{},"Rule",[644,645,646,662,676,691],"tbody",{},[631,647,648,654,659],{},[649,650,651],"td",{},[39,652,653],{},"margin: 0px",[649,655,656],{},[39,657,658],{},"margin:0",[649,660,661],{},"Drop unit from zero",[631,663,664,669,674],{},[649,665,666],{},[39,667,668],{},"padding: 0em",[649,670,671],{},[39,672,673],{},"padding:0",[649,675,661],{},[631,677,678,683,688],{},[649,679,680],{},[39,681,682],{},"opacity: 0.50",[649,684,685],{},[39,686,687],{},"opacity:.5",[649,689,690],{},"Drop leading zero from decimals",[631,692,693,698,703],{},[649,694,695],{},[39,696,697],{},"font-size: 1.0em",[649,699,700],{},[39,701,702],{},"font-size:1em",[649,704,705],{},"Drop trailing zero",[284,707,709],{"id":708},"color-optimization","Color Optimization",[15,711,712],{},"CSS supports multiple color formats. Minifiers pick the shortest representation.",[625,714,715,726],{},[628,716,717],{},[631,718,719,721,723],{},[634,720,636],{},[634,722,639],{},[634,724,725],{},"Technique",[644,727,728,741,755,769,784],{},[631,729,730,734,738],{},[649,731,732],{},[39,733,93],{},[649,735,736],{},[39,737,139],{},[649,739,740],{},"Hex shorthand",[631,742,743,748,753],{},[649,744,745],{},[39,746,747],{},"#aabbcc",[649,749,750],{},[39,751,752],{},"#abc",[649,754,740],{},[631,756,757,762,767],{},[649,758,759],{},[39,760,761],{},"#000000",[649,763,764],{},[39,765,766],{},"#000",[649,768,740],{},[631,770,771,776,781],{},[649,772,773],{},[39,774,775],{},"rgb(255, 0, 0)",[649,777,778],{},[39,779,780],{},"red",[649,782,783],{},"Named color (shorter)",[631,785,786,791,796],{},[649,787,788],{},[39,789,790],{},"rgba(0,0,0,0)",[649,792,793],{},[39,794,795],{},"transparent",[649,797,798],{},"Named keyword",[15,800,801,802,805,806,809],{},"Not all named colors are shorter than hex. For example, ",[39,803,804],{},"darkgray"," (8 chars) is longer than ",[39,807,808],{},"#a9a9a9"," (7 chars). Good minifiers compare both options.",[284,811,813],{"id":812},"font-weight","Font Weight",[625,815,816,824],{},[628,817,818],{},[631,819,820,822],{},[634,821,636],{},[634,823,639],{},[644,825,826,838],{},[631,827,828,833],{},[649,829,830],{},[39,831,832],{},"font-weight: normal",[649,834,835],{},[39,836,837],{},"font-weight:400",[631,839,840,845],{},[649,841,842],{},[39,843,844],{},"font-weight: bold",[649,846,847],{},[39,848,849],{},"font-weight:700",[10,851,853],{"id":852},"selector-merging","Selector Merging",[15,855,856],{},"When multiple selectors share the same rule block, merging them reduces repetition.",[15,858,30],{},[32,860,862],{"className":34,"code":861,"language":36,"meta":37,"style":37},"h1 {\n  color: #333;\n  font-weight: bold;\n}\n\nh2 {\n  color: #333;\n  font-weight: bold;\n}\n",[39,863,864,872,882,894,898,904,910,921,932],{"__ignoreMap":37},[42,865,866,870],{"class":44,"line":45},[42,867,869],{"class":868},"s9eBZ","h1",[42,871,60],{"class":59},[42,873,874,876,878,880],{"class":44,"line":52},[42,875,88],{"class":72},[42,877,76],{"class":59},[42,879,444],{"class":72},[42,881,82],{"class":59},[42,883,884,887,889,892],{"class":44,"line":63},[42,885,886],{"class":72},"  font-weight",[42,888,76],{"class":59},[42,890,891],{"class":72},"bold",[42,893,82],{"class":59},[42,895,896],{"class":44,"line":69},[42,897,105],{"class":59},[42,899,900],{"class":44,"line":85},[42,901,903],{"emptyLinePlaceholder":902},true,"\n",[42,905,906,908],{"class":44,"line":102},[42,907,10],{"class":868},[42,909,60],{"class":59},[42,911,913,915,917,919],{"class":44,"line":912},7,[42,914,88],{"class":72},[42,916,76],{"class":59},[42,918,444],{"class":72},[42,920,82],{"class":59},[42,922,924,926,928,930],{"class":44,"line":923},8,[42,925,886],{"class":72},[42,927,76],{"class":59},[42,929,891],{"class":72},[42,931,82],{"class":59},[42,933,935],{"class":44,"line":934},9,[42,936,105],{"class":59},[15,938,108],{},[32,940,942],{"className":34,"code":941,"language":36,"meta":37,"style":37},"h1,h2{color:#333;font-weight:bold}\n",[39,943,944],{"__ignoreMap":37},[42,945,946,948,951,953,955,957,959,961,963,965,967,969],{"class":44,"line":45},[42,947,869],{"class":868},[42,949,950],{"class":59},",",[42,952,10],{"class":868},[42,954,120],{"class":59},[42,956,134],{"class":72},[42,958,126],{"class":59},[42,960,444],{"class":72},[42,962,131],{"class":59},[42,964,812],{"class":72},[42,966,126],{"class":59},[42,968,891],{"class":72},[42,970,105],{"class":59},[15,972,973,974,977],{},"This technique becomes powerful across large codebases. However, minifiers must be careful — merging selectors can change CSS specificity in edge cases or break ",[39,975,976],{},"@media"," rule boundaries.",[15,979,980],{},"Most modern minifiers only merge selectors when it's provably safe.",[10,982,984],{"id":983},"duplicate-rule-removal","Duplicate Rule Removal",[15,986,987],{},"Large projects often accumulate duplicate declarations. Minifiers deduplicate them:",[15,989,30],{},[32,991,993],{"className":34,"code":992,"language":36,"meta":37,"style":37},".card { padding: 16px; margin: 8px; }\n.panel { padding: 16px; margin: 8px; }\n",[39,994,995,1027],{"__ignoreMap":37},[42,996,997,1000,1003,1006,1008,1011,1013,1015,1017,1019,1022,1024],{"class":44,"line":45},[42,998,999],{"class":55},".card",[42,1001,1002],{"class":59}," { ",[42,1004,1005],{"class":72},"padding",[42,1007,76],{"class":59},[42,1009,1010],{"class":72},"16",[42,1012,315],{"class":314},[42,1014,96],{"class":59},[42,1016,377],{"class":72},[42,1018,76],{"class":59},[42,1020,1021],{"class":72},"8",[42,1023,315],{"class":314},[42,1025,1026],{"class":59},"; }\n",[42,1028,1029,1032,1034,1036,1038,1040,1042,1044,1046,1048,1050,1052],{"class":44,"line":52},[42,1030,1031],{"class":55},".panel",[42,1033,1002],{"class":59},[42,1035,1005],{"class":72},[42,1037,76],{"class":59},[42,1039,1010],{"class":72},[42,1041,315],{"class":314},[42,1043,96],{"class":59},[42,1045,377],{"class":72},[42,1047,76],{"class":59},[42,1049,1021],{"class":72},[42,1051,315],{"class":314},[42,1053,1026],{"class":59},[15,1055,108],{},[32,1057,1059],{"className":34,"code":1058,"language":36,"meta":37,"style":37},".card,.panel{padding:16px;margin:8px}\n",[39,1060,1061],{"__ignoreMap":37},[42,1062,1063,1065,1067,1069,1071,1073,1075,1077,1079,1081,1083,1085,1087,1089],{"class":44,"line":45},[42,1064,999],{"class":55},[42,1066,950],{"class":59},[42,1068,1031],{"class":55},[42,1070,120],{"class":59},[42,1072,1005],{"class":72},[42,1074,126],{"class":59},[42,1076,1010],{"class":72},[42,1078,315],{"class":314},[42,1080,131],{"class":59},[42,1082,377],{"class":72},[42,1084,126],{"class":59},[42,1086,1021],{"class":72},[42,1088,315],{"class":314},[42,1090,105],{"class":59},[15,1092,1093],{},"Some minifiers go further and extract shared properties from rule blocks that only partially overlap, splitting them into common and unique rule sets.",[10,1095,1097],{"id":1096},"css-custom-properties-and-compression","CSS Custom Properties and Compression",[15,1099,1100],{},"Custom properties (CSS variables) change how minifiers work.",[32,1102,1104],{"className":34,"code":1103,"language":36,"meta":37,"style":37},":root {\n  --primary: #0066cc;\n  --spacing: 16px;\n}\n",[39,1105,1106,1113,1124,1137],{"__ignoreMap":37},[42,1107,1108,1111],{"class":44,"line":45},[42,1109,1110],{"class":55},":root",[42,1112,60],{"class":59},[42,1114,1115,1118,1120,1122],{"class":44,"line":52},[42,1116,1117],{"class":585},"  --primary",[42,1119,76],{"class":59},[42,1121,79],{"class":72},[42,1123,82],{"class":59},[42,1125,1126,1129,1131,1133,1135],{"class":44,"line":63},[42,1127,1128],{"class":585},"  --spacing",[42,1130,76],{"class":59},[42,1132,1010],{"class":72},[42,1134,315],{"class":314},[42,1136,82],{"class":59},[42,1138,1139],{"class":44,"line":69},[42,1140,105],{"class":59},[15,1142,1143,1144,1147,1148,1150],{},"Minifiers cannot replace ",[39,1145,1146],{},"var(--primary)"," with ",[39,1149,79],{}," because:",[153,1152,1153,1156,1159],{},[156,1154,1155],{},"Custom properties cascade and can be overridden at any selector level",[156,1157,1158],{},"JavaScript can change custom property values at runtime",[156,1160,1161,1162,1165],{},"The ",[39,1163,1164],{},"var()"," function can have fallback values",[15,1167,1168],{},"However, minifiers can still:",[153,1170,1171,1174,1185],{},[156,1172,1173],{},"Strip whitespace within custom property declarations",[156,1175,1176,1177,1180,1181,1184],{},"Shorten hex values assigned to custom properties (",[39,1178,1179],{},"--color: #ffffff"," → ",[39,1182,1183],{},"--color:#fff",")",[156,1186,1187],{},"Remove duplicate custom property declarations in the same scope",[15,1189,1190],{},"If you use CSS variables heavily, the minification savings may be smaller than expected compared to hardcoded values. That's a trade-off for the maintainability variables provide.",[10,1192,1194],{"id":1193},"technique-impact-comparison","Technique Impact Comparison",[625,1196,1197,1209],{},[628,1198,1199],{},[631,1200,1201,1203,1206],{},[634,1202,725],{},[634,1204,1205],{},"Typical Savings",[634,1207,1208],{},"Risk Level",[644,1210,1211,1222,1232,1243,1253,1264],{},[631,1212,1213,1216,1219],{},[649,1214,1215],{},"Comment removal",[649,1217,1218],{},"5–15%",[649,1220,1221],{},"None",[631,1223,1224,1227,1230],{},[649,1225,1226],{},"Whitespace stripping",[649,1228,1229],{},"15–30%",[649,1231,1221],{},[631,1233,1234,1237,1240],{},[649,1235,1236],{},"Shorthand expansion",[649,1238,1239],{},"3–8%",[649,1241,1242],{},"Very low",[631,1244,1245,1248,1251],{},[649,1246,1247],{},"Value optimization",[649,1249,1250],{},"2–5%",[649,1252,1242],{},[631,1254,1255,1258,1261],{},[649,1256,1257],{},"Selector merging",[649,1259,1260],{},"1–5%",[649,1262,1263],{},"Low (edge cases)",[631,1265,1266,1269,1272],{},[649,1267,1268],{},"Duplicate removal",[649,1270,1271],{},"1–10%",[649,1273,1274],{},"Low (depends on codebase)",[15,1276,1277],{},"The bulk of savings come from the simplest techniques — comments and whitespace. Advanced optimizations matter most on large, messy codebases.",[10,1279,1281],{"id":1280},"key-takeaways","Key Takeaways",[153,1283,1284,1287,1290,1293,1296,1299],{},[156,1285,1286],{},"Comment removal and whitespace stripping account for the largest size reductions",[156,1288,1289],{},"Shorthand properties (margin, padding, border, background) compress longhand rules efficiently",[156,1291,1292],{},"Value optimizations — dropping zero units, shortening hex colors, removing leading zeros — add up across thousands of declarations",[156,1294,1295],{},"Selector merging is powerful but requires careful implementation to avoid specificity bugs",[156,1297,1298],{},"CSS custom properties limit minification potential since values are resolved at runtime",[156,1300,1301],{},"Always test minified output against your unminified source to catch edge cases",[10,1303,1305],{"id":1304},"try-it-yourself","Try It Yourself",[15,1307,1308,1309,1314],{},"See these compression techniques in action with our free ",[1310,1311,1313],"a",{"href":1312},"\u002Ftools\u002Fcss-minifier","CSS Minifier",". Paste your stylesheet and compare the before and after.",[10,1316,1318],{"id":1317},"related-guides","Related Guides",[153,1320,1321,1328,1335],{},[156,1322,1323,1327],{},[1310,1324,1326],{"href":1325},"\u002Fguides\u002Fcss-minification-guide","Why Minify CSS: Performance, File Size, and Best Practices"," — why minification matters for performance",[156,1329,1330,1334],{},[1310,1331,1333],{"href":1332},"\u002Fguides\u002Fcss-bundling-tools","CSS Bundling and Minification Tools Compared"," — pick the right minifier for your project",[156,1336,1337,1341],{},[1310,1338,1340],{"href":1339},"\u002Fguides\u002Fhtml-minification-guide","HTML Minification Guide"," — optimize your markup too",[1343,1344,1345],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":37,"searchDepth":52,"depth":52,"links":1347},[1348,1349,1350,1351,1356,1361,1362,1363,1364,1365,1366,1367],{"id":12,"depth":52,"text":13},{"id":23,"depth":52,"text":24},{"id":147,"depth":52,"text":148},{"id":278,"depth":52,"text":279,"children":1352},[1353,1354,1355],{"id":286,"depth":63,"text":287},{"id":393,"depth":63,"text":394},{"id":482,"depth":63,"text":483},{"id":608,"depth":52,"text":609,"children":1357},[1358,1359,1360],{"id":615,"depth":63,"text":616},{"id":708,"depth":63,"text":709},{"id":812,"depth":63,"text":813},{"id":852,"depth":52,"text":853},{"id":983,"depth":52,"text":984},{"id":1096,"depth":52,"text":1097},{"id":1193,"depth":52,"text":1194},{"id":1280,"depth":52,"text":1281},{"id":1304,"depth":52,"text":1305},{"id":1317,"depth":52,"text":1318},"2026-05-28","Master CSS compression techniques including comment removal, whitespace stripping, shorthand properties, value optimization, and selector merging.","md",{"immutable":902},"\u002Fguides\u002Fcss-compression-techniques",{"title":5,"description":1369},"guides\u002Fcss-compression-techniques","U4e21NnflyaB87DS-yi3oCSrmxpqbY8PYXZsJaQD8Ys",1780401327010]