[{"data":1,"prerenderedAt":787},["ShallowReactive",2],{"i-feather:search":3,"i-feather:x":8,"i-feather:moon":10,"i-feather:sun":12,"i-fa-brands:youtube":14,"i-fa-brands:twitch":18,"i-fa-brands:github":20,"i-fa-brands:linkedin":23,"i-fa-brands:stack-overflow":26,"i-simple-icons:bluesky":29,"i-fa-brands:mastodon":31,"i-fa-regular:envelope":33,"i-fa-solid:rss":35,"post-\u002Fsystem-for-grouping-and-sorting-css-properties\u002F":37,"post-navigation":383,"i-fa-solid:share-alt":767,"i-fa-brands:facebook":769,"i-fa-brands:twitter":771,"i-fa-brands:reddit":773,"i-fa-brands:patreon":775,"i-simple-icons:buymeacoffee":777,"i-fa-brands:paypal":779,"i-fa-regular:question-circle":781,"i-feather:arrow-left":783,"i-feather:arrow-right":785},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"11\" cy=\"11\" r=\"8\"\u002F>\u003Cpath d=\"m21 21l-4.35-4.35\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M18 6L6 18M6 6l12 12\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 12.79A9 9 0 1 1 11.21 3A7 7 0 0 0 21 12.79\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"5\"\u002F>\u003Cpath d=\"M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":15,"height":16,"rotate":4,"vFlip":6,"hFlip":6,"body":17},576,512,"\u003Cpath fill=\"currentColor\" d=\"M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597c-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821c11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305m-317.51 213.508V175.185l142.739 81.205z\"\u002F>",{"left":4,"top":4,"width":16,"height":16,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cpath fill=\"currentColor\" d=\"M391.17 103.47h-38.63v109.7h38.63ZM285 103h-38.63v109.75H285ZM120.83 0L24.31 91.42v329.16h115.83V512l96.53-91.42h77.25L487.69 256V0Zm328.24 237.75l-77.22 73.12h-77.24l-67.6 64v-64h-86.87V36.58h308.93Z\"\u002F>",{"left":4,"top":4,"width":21,"height":16,"rotate":4,"vFlip":6,"hFlip":6,"body":22},496,"\u003Cpath fill=\"currentColor\" d=\"M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2\"\u002F>",{"left":4,"top":4,"width":24,"height":16,"rotate":4,"vFlip":6,"hFlip":6,"body":25},448,"\u003Cpath fill=\"currentColor\" d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3M135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5c0 21.3-17.2 38.5-38.5 38.5m282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7c-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5c67.2 0 79.7 44.3 79.7 101.9z\"\u002F>",{"left":4,"top":4,"width":27,"height":16,"rotate":4,"vFlip":6,"hFlip":6,"body":28},384,"\u003Cpath fill=\"currentColor\" d=\"M290.7 311L95 269.7L86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8l153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24l119.3 160.3l32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":30},"\u003Cpath fill=\"currentColor\" d=\"M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037c-.856 3.061-3.978 3.842-6.755 3.37c4.854.826 6.089 3.562 3.422 6.299c-5.065 5.196-7.28-1.304-7.847-2.97c-.104-.305-.152-.448-.153-.327c0-.121-.05.022-.153.327c-.568 1.666-2.782 8.166-7.847 2.97c-2.667-2.737-1.432-5.473 3.422-6.3c-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026\"\u002F>",{"left":4,"top":4,"width":24,"height":16,"rotate":4,"vFlip":6,"hFlip":6,"body":32},"\u003Cpath fill=\"currentColor\" d=\"M433 179.11c0-97.2-63.71-125.7-63.71-125.7c-62.52-28.7-228.56-28.4-290.48 0c0 0-63.72 28.5-63.72 125.7c0 115.7-6.6 259.4 105.63 289.1c40.51 10.7 75.32 13 103.33 11.4c50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.5 102.5 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7c56.12-6.7 105-41.3 111.23-72.9c9.8-49.8 9-121.5 9-121.5m-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175c25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5l11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1c23.71 27.3 18.4 53 18.4 175z\"\u002F>",{"left":4,"top":4,"width":16,"height":16,"rotate":4,"vFlip":6,"hFlip":6,"body":34},"\u003Cpath fill=\"currentColor\" d=\"M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48m0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49c-16.841 13.247-50.201 45.072-73.413 44.701c-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646c21.857 17.205 60.134 55.186 103.062 54.955c42.717.231 80.509-37.199 103.053-54.947c49.528-38.783 82.032-64.401 104.947-82.653V400z\"\u002F>",{"left":4,"top":4,"width":24,"height":16,"rotate":4,"vFlip":6,"hFlip":6,"body":36},"\u003Cpath fill=\"currentColor\" d=\"M128.081 415.959c0 35.369-28.672 64.041-64.041 64.041S0 451.328 0 415.959s28.672-64.041 64.041-64.041s64.04 28.673 64.04 64.041m175.66 47.25c-8.354-154.6-132.185-278.587-286.95-286.95C7.656 175.765 0 183.105 0 192.253v48.069c0 8.415 6.49 15.472 14.887 16.018c111.832 7.284 201.473 96.702 208.772 208.772c.547 8.397 7.604 14.887 16.018 14.887h48.069c9.149.001 16.489-7.655 15.995-16.79m144.249.288C439.596 229.677 251.465 40.445 16.503 32.01C7.473 31.686 0 38.981 0 48.016v48.068c0 8.625 6.835 15.645 15.453 15.999c191.179 7.839 344.627 161.316 352.465 352.465c.353 8.618 7.373 15.453 15.999 15.453h48.068c9.034-.001 16.329-7.474 16.005-16.504\"\u002F>",{"id":38,"title":39,"author":40,"body":41,"comments":330,"date":360,"dateModified":361,"description":362,"extension":363,"headings":364,"heroImage":373,"meta":374,"path":375,"permalink":375,"published":376,"stem":377,"tags":378,"timeToRead":382},"posts\u002Fposts\u002F2021\u002Fsystem-for-grouping-and-sorting-css-properties\u002Findex.md","A System for Grouping & Sorting CSS Properties","Muhammad Rehan Saeed",{"type":42,"value":43,"toc":327},"minimark",[44,75,84,87,118,121,140,143,149,164,182,185,198,201,208,211,224,256,259,272,285,288,300,303,306,320,323],[45,46,47,48,53,54,63,64,69,70,74],"p",{},"There are no hard and fast rules for code style and as I've ",[49,50,52],"a",{"href":51},"\u002Fstop-brace-wars-use-stylecop\u002F","written about before"," it can get ugly when people have various opposing opinions on the subject. In CSS, which I'm quite fond of writing, I believe the answer is mostly given to us by using ",[49,55,62],{"href":56,"rel":57,"target":61},"https:\u002F\u002Fprettier.io\u002F",[58,59,60],"nofollow","noopener","noreferrer","_blank","Prettier",", the opinionated code formatter. Unfortunately, Prettier does not sort CSS properties for you ",[49,65,68],{"href":66,"rel":67,"target":61},"https:\u002F\u002Fgithub.com\u002Fprettier\u002Fprettier\u002Fissues\u002F1963",[58,59,60],"and never will",", so this post is one solution (",[71,72,73],"strong",{},"not"," the correct solution because there is no correct solution).",[45,76,77,78,83],{},"There are automated tools like ",[49,79,82],{"href":80,"rel":81,"target":61},"https:\u002F\u002Fgithub.com\u002Fhudochenkov\u002Fpostcss-sorting",[58,59,60],"postcss-sorting"," that can help with this but I think it'd be difficult to use in real life because there will always be exceptions to the hard coded rules.",[45,85,86],{},"But why even bother to group and sort CSS properties? Well, I think it makes sense for two reasons. The first is that it can make it quicker to quickly scan the CSS and find what you need. The second is that if you're working in a team environment, it can make it easier to work on CSS that has one over arching consistent style.",[88,89,92,98],"h1",{"id":90,"data-section-heading":91},"grouping-css-properties","",[93,94,97],"span",{"className":95},[96],"heading__text","Grouping CSS Properties",[99,100,103],"anchor-link",{"href":101,"label":102},"#grouping-css-properties","Link to this section",[104,105,112],"svg",{"xmlns":106,"xmlns:xlink":107,"viewBox":108,"version":109,"width":110,"height":110,"aria-hidden":111},"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","http:\u002F\u002Fwww.w3.org\u002F1999\u002Fxlink","0 0 16 16","1.1",22,"true",[113,114],"path",{"fill":115,"fill-rule":116,"d":117},"currentColor","evenodd","M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z",[45,119,120],{},"I believe you can split CSS properties into a few groups:",[122,123,124,128,131,134,137],"ol",{},[125,126,127],"li",{},"Parent layout",[125,129,130],{},"Layout",[125,132,133],{},"Box Model",[125,135,136],{},"Positioning",[125,138,139],{},"Display",[45,141,142],{},"Here is an example of the four groups in real life:",[144,145],"pre",{"className":146,"language":147,"meta":91,"style":91,"html":148},"language-css shiki shiki-themes light-plus monokai","css","\u003Cspan class=\"line\">\u003Cspan class=\"sFi-G\">.card\u003C\u002Fspan>\u003Cspan class=\"sjLUg\"> {\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">  \u002F* Parent Layout *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  grid-area\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: card;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">  \u002F* Layout *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  display\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">grid\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  align-items\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">center\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  gap\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">10\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  grid-template-areas\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">:\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"swiDo\">    \"header header\"\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"swiDo\">    \"content content\"\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  grid-template-columns\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">1\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">fr\u003C\u002Fspan>\u003Cspan class=\"s0PsH\"> 1\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">fr\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  grid-template-rows\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">1\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">fr\u003C\u002Fspan>\u003Cspan class=\"s0PsH\"> 1\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">fr\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  justify-items\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">center\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">  \u002F* Positioning *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  position\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">absolute\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  top\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  right\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  bottom\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  left\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  inset-inline-start\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  inset-inline-end\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  inset-inline\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  inset-block-start\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  inset-block-end\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  inset-block\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  z-index\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">10\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">  \u002F* Box Model *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  box-sizing\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">border-box\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  width\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">100\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  height\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">100\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  inline-size\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">100\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  block-size\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">100\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  margin\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">10\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  padding\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">10\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">  \u002F* Display *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  background-color\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">red\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  border\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">10\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sztIZ\"> solid\u003C\u002Fspan>\u003Cspan class=\"sztIZ\"> green\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  color\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">white\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  font-family\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">sans-serif\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  font-size\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">16\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  text-align\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">center\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sjLUg\">}\n\u003C\u002Fspan>\u003C\u002Fspan>",[150,151,153,157],"h2",{"id":152,"data-section-heading":91},"parent-layout",[93,154,156],{"className":155},[96],"Parent Layout",[99,158,160],{"href":159,"label":102},"#parent-layout",[104,161,162],{"xmlns":106,"xmlns:xlink":107,"viewBox":108,"version":109,"width":110,"height":110,"aria-hidden":111},[113,163],{"fill":115,"fill-rule":116,"d":117},[45,165,166,167,171,172,175,176,181],{},"The parent layout is any CSS layout properties that effect or come from the parent element. This usually boils down to ",[168,169,170],"code",{},"grid-area"," if you're using ",[168,173,174],{},"grid-template-areas"," which you ",[49,177,180],{"href":178,"rel":179,"target":61},"https:\u002F\u002Fcss-tricks.com\u002Fsnippets\u002Fcss\u002Fcomplete-guide-grid\u002F#grid-template-areas",[58,59,60],"totally should"," because it allows you to change the layout child elements without modifying the child elements CSS too much.",[144,183],{"className":146,"language":147,"meta":91,"style":91,"html":184},"\u003Cspan class=\"line\">\u003Cspan class=\"sFi-G\">.card\u003C\u002Fspan>\u003Cspan class=\"sjLUg\"> {\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">  \u002F* Parent Layout *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  grid-area\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: card;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">  \u002F* ... *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sjLUg\">}\n\u003C\u002Fspan>\u003C\u002Fspan>",[150,186,188,191],{"id":187,"data-section-heading":91},"layout",[93,189,130],{"className":190},[96],[99,192,194],{"href":193,"label":102},"#layout",[104,195,196],{"xmlns":106,"xmlns:xlink":107,"viewBox":108,"version":109,"width":110,"height":110,"aria-hidden":111},[113,197],{"fill":115,"fill-rule":116,"d":117},[45,199,200],{},"CSS Layout properties determine how the contents of the CSS class will be layed out. The common case is that you're using CSS Grid or FlexBox and want to group their respective properties together where they make the most sense.",[45,202,203,204,207],{},"I think it makes the most sense to start with the ",[168,205,206],{},"display"," property because that determines the type of layout followed by other properties in alphabetical order.",[144,209],{"className":146,"language":147,"meta":91,"style":91,"html":210},"\u003Cspan class=\"line\">\u003Cspan class=\"sFi-G\">.card\u003C\u002Fspan>\u003Cspan class=\"sjLUg\"> {\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">    \u002F* ... *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">    \u002F* Layout *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    display\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">grid\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    align-items\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">center\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    gap\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">10\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    grid-template-areas\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">:\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"swiDo\">        \"header header\"\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"swiDo\">        \"content content\"\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    grid-template-columns\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">1\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">fr\u003C\u002Fspan>\u003Cspan class=\"s0PsH\"> 1\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">fr\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    grid-template-rows\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">1\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">fr\u003C\u002Fspan>\u003Cspan class=\"s0PsH\"> 1\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">fr\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    justify-items\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">center\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">    \u002F* ... *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>",[150,212,214,217],{"id":213,"data-section-heading":91},"positioning",[93,215,136],{"className":216},[96],[99,218,220],{"href":219,"label":102},"#positioning",[104,221,222],{"xmlns":106,"xmlns:xlink":107,"viewBox":108,"version":109,"width":110,"height":110,"aria-hidden":111},[113,223],{"fill":115,"fill-rule":116,"d":117},[45,225,226,227,230,231,233,234,237,238,237,241,244,245,248,249,244,252,255],{},"CSS properties related to ",[168,228,229],{},"position"," come next. Similar to ",[168,232,206],{},", we put the position at the top and follow in alphabetical order. Again there is an exception to be made here with ",[168,235,236],{},"top",", ",[168,239,240],{},"right",[168,242,243],{},"bottom"," and ",[168,246,247],{},"left"," which follow the order that ",[168,250,251],{},"margin",[168,253,254],{},"padding"," values take.",[144,257],{"className":146,"language":147,"meta":91,"style":91,"html":258},"\u003Cspan class=\"line\">\u003Cspan class=\"sFi-G\">.card\u003C\u002Fspan>\u003Cspan class=\"sjLUg\"> {\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">    \u002F* ... *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">    \u002F* Positioning *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    position\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">absolute\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    top\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    right\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    bottom\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    left\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    inset-inline-start\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    inset-inline-end\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    inset-block-start\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    inset-block-end\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    inset-inline\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    inset-block\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">0\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    z-index\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">10\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">    \u002F* ... *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>",[150,260,262,265],{"id":261,"data-section-heading":91},"box-model",[93,263,133],{"className":264},[96],[99,266,268],{"href":267,"label":102},"#box-model",[104,269,270],{"xmlns":106,"xmlns:xlink":107,"viewBox":108,"version":109,"width":110,"height":110,"aria-hidden":111},[113,271],{"fill":115,"fill-rule":116,"d":117},[45,273,274,275,244,278,281,282,284],{},"CSS properties that affect the box model can come next. Again, I'm using alphabetical order except for ",[168,276,277],{},"width",[168,279,280],{},"height"," where it makes more sense for them to go together with ",[168,283,277],{}," always being first (there are a lot of exceptions to the rules in CSS).",[144,286],{"className":146,"language":147,"meta":91,"style":91,"html":287},"\u003Cspan class=\"line\">\u003Cspan class=\"sFi-G\">.card\u003C\u002Fspan>\u003Cspan class=\"sjLUg\"> {\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">    \u002F* ... *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">    \u002F* Box Model *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    box-sizing\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">border-box\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    margin\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">10\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    padding\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">10\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    width\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">100\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    height\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">100\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    inline-size\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">100\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">    block-size\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">100\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">    \u002F* ... *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>",[150,289,290,293],{"id":206,"data-section-heading":91},[93,291,139],{"className":292},[96],[99,294,296],{"href":295,"label":102},"#display",[104,297,298],{"xmlns":106,"xmlns:xlink":107,"viewBox":108,"version":109,"width":110,"height":110,"aria-hidden":111},[113,299],{"fill":115,"fill-rule":116,"d":117},[45,301,302],{},"Finally, there are CSS display properties which affect the look and feel. This is also a kind of 'Other' category where you can place remaining properties which don't make sense in other groups.",[144,304],{"className":146,"language":147,"meta":91,"style":91,"html":305},"\u003Cspan class=\"line\">\u003Cspan class=\"sFi-G\">.card\u003C\u002Fspan>\u003Cspan class=\"sjLUg\"> {\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">  \u002F* ... *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"s1q82\">  \u002F* Display *\u002F\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  background-color\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">red\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  border\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">10\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sztIZ\"> solid\u003C\u002Fspan>\u003Cspan class=\"sztIZ\"> green\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  color\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">white\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  font-family\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">sans-serif\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  font-size\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"s0PsH\">16\u003C\u002Fspan>\u003Cspan class=\"sf9xX\">px\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sTE26\">  text-align\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">: \u003C\u002Fspan>\u003Cspan class=\"sztIZ\">center\u003C\u002Fspan>\u003Cspan class=\"sjLUg\">;\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"line\">\u003Cspan class=\"sjLUg\">}\n\u003C\u002Fspan>\u003C\u002Fspan>",[88,307,309,313],{"id":308,"data-section-heading":91},"final-comments",[93,310,312],{"className":311},[96],"Final Comments",[99,314,316],{"href":315,"label":102},"#final-comments",[104,317,318],{"xmlns":106,"xmlns:xlink":107,"viewBox":108,"version":109,"width":110,"height":110,"aria-hidden":111},[113,319],{"fill":115,"fill-rule":116,"d":117},[45,321,322],{},"This is just one method of grouping and ordering CSS properties that I've found useful in real life projects. There is no correct answer to this problem and I think the problem space is probably too complex to make a tool like Prettier do the work for you because there will always be exceptions to the rules.",[324,325,326],"style",{},"html pre.shiki code .sFi-G, html code.shiki .sFi-G{--shiki-default:#800000;--shiki-dark:#A6E22E}html pre.shiki code .sjLUg, html code.shiki .sjLUg{--shiki-default:#000000;--shiki-dark:#F8F8F2}html pre.shiki code .s1q82, html code.shiki .s1q82{--shiki-default:#008000;--shiki-dark:#88846F}html pre.shiki code .sTE26, html code.shiki .sTE26{--shiki-default:#E50000;--shiki-default-font-style:inherit;--shiki-dark:#66D9EF;--shiki-dark-font-style:italic}html pre.shiki code .sztIZ, html code.shiki .sztIZ{--shiki-default:#0451A5;--shiki-dark:#66D9EF}html pre.shiki code .s0PsH, html code.shiki .s0PsH{--shiki-default:#098658;--shiki-dark:#AE81FF}html pre.shiki code .sf9xX, html code.shiki .sf9xX{--shiki-default:#098658;--shiki-dark:#F92672}html pre.shiki code .swiDo, html code.shiki .swiDo{--shiki-default:#A31515;--shiki-dark:#E6DB74}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);}",{"title":91,"searchDepth":328,"depth":328,"links":329},2,[],{"issue":331,"comments":335},{"number":332,"title":333,"html_url":334},298,"[Comment] A System for Grouping & Sorting CSS Properties","https:\u002F\u002Fgithub.com\u002FRehanSaeed\u002Frehansaeed.github.io\u002Fissues\u002F298",[336,348],{"id":337,"html_url":338,"body_html":339,"created_at":340,"updated_at":340,"author_association":341,"user":342,"reactions":346},1284592041,"https:\u002F\u002Fgithub.com\u002FRehanSaeed\u002Frehansaeed.github.io\u002Fissues\u002F298#issuecomment-1284592041","\u003Cp>box model before positioning? Hmm, not sure about that…\u003C\u002Fp>","2022-10-19T21:26:58Z","NONE",{"login":343,"avatar_url":344,"html_url":345},"Bielousov","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F1741272?v=4","https:\u002F\u002Fgithub.com\u002FBielousov",{"url":347,"total_count":4,"+1":4,"-1":4,"laugh":4,"hooray":4,"confused":4,"heart":4,"rocket":4,"eyes":4},"https:\u002F\u002Fapi.github.com\u002Frepos\u002FRehanSaeed\u002Frehansaeed.github.io\u002Fissues\u002Fcomments\u002F1284592041\u002Freactions",{"id":349,"html_url":350,"body_html":351,"created_at":352,"updated_at":352,"author_association":353,"user":354,"reactions":358},1344137621,"https:\u002F\u002Fgithub.com\u002FRehanSaeed\u002Frehansaeed.github.io\u002Fissues\u002F298#issuecomment-1344137621","\u003Cp>\u003Ca target=\"_blank\" rel=\"nofollow noopener noreferrer\" href=\"https:\u002F\u002Fgithub.com\u002FBielousov\">@Bielousov\u003C\u002Fa> Thinking about it some more, I don't know why I did it that way around. I've updated the post with your suggestion.\u003C\u002Fp>","2022-12-09T10:38:41Z","OWNER",{"login":355,"avatar_url":356,"html_url":357},"RehanSaeed","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F2270364?v=4","https:\u002F\u002Fgithub.com\u002FRehanSaeed",{"url":359,"total_count":4,"+1":4,"-1":4,"laugh":4,"hooray":4,"confused":4,"heart":4,"rocket":4,"eyes":4},"https:\u002F\u002Fapi.github.com\u002Frepos\u002FRehanSaeed\u002Frehansaeed.github.io\u002Fissues\u002Fcomments\u002F1344137621\u002Freactions","2021-04-20T10:00:00+00:00",null,"Grouping and Sorting CSS properties can make your CSS easier to read and helps with consistency in a team environment. There is no correct answer but something is better than nothing.","md",[365,367,368,369,370,371,372],{"depth":366,"value":97},1,{"depth":328,"value":156},{"depth":328,"value":130},{"depth":328,"value":136},{"depth":328,"value":133},{"depth":328,"value":139},{"depth":366,"value":312},"\u002Fimages\u002Fhero\u002FCSS-1600x900.png",{},"\u002Fsystem-for-grouping-and-sorting-css-properties\u002F",true,"posts\u002F2021\u002Fsystem-for-grouping-and-sorting-css-properties\u002Findex",[379,380,381],"CSS","CSS Classes","Standards",3,[384,388,392,395,400,403,406,410,414,418,421,425,430,433,436,440,444,448,451,455,459,463,466,471,476,480,483,486,489,494,498,501,506,510,514,518,521,525,529,533,537,541,545,549,552,556,560,564,568,571,575,579,582,585,589,593,598,602,606,610,614,618,622,625,628,631,635,639,642,646,649,652,655,658,662,666,669,672,676,680,683,686,689,693,697,701,705,708,711,716,719,722,723,726,730,734,737,741,744,747,751,755,759,763],{"title":385,"permalink":386,"heroImage":387,"timeToRead":366},"Just Start - The First Blog Post","\u002Fjust-start-the-first-blog-post\u002F","\u002Fimages\u002Fhero\u002FJust-Start-1366x768.png",{"title":389,"permalink":390,"heroImage":391,"timeToRead":328},"ConfigureAwait in Task Parallel Library (TPL)","\u002Fconfigureawait-task-parallel-library\u002F","\u002Fimages\u002Fhero\u002FMicrosoft-.NET-1366x768.png",{"title":393,"permalink":51,"heroImage":394,"timeToRead":382},"Stop The Brace Wars, Use StyleCop","\u002Fimages\u002Fhero\u002FStyleCop-1366x768.png",{"title":396,"permalink":397,"heroImage":398,"timeToRead":399},"Reactive Extensions (Rx) - Part 1 - Replacing C# Events","\u002Freactive-extensions-part1-replacing-events\u002F","\u002Fimages\u002Fhero\u002FReactive-Extensions-1366x768.png",4,{"title":401,"permalink":402,"heroImage":398,"timeToRead":382},"Reactive Extensions (Rx) - Part 2 - Wrapping C# Events","\u002Freactive-extensions-part2-wrapping-events\u002F",{"title":404,"permalink":405,"heroImage":398,"timeToRead":328},"Reactive Extensions (Rx) - Part 3 - Naming Conventions","\u002Freactive-extensions-part3-naming-conventions\u002F",{"title":407,"permalink":408,"heroImage":409,"timeToRead":382},"WPF Metro Part 1 - Modern UI for WPF","\u002Fwpf-metro-part1-modern-ui-for-wpf\u002F","\u002Fimages\u002Fhero\u002FModern-UI-for-WPF-1366x768.png",{"title":411,"permalink":412,"heroImage":413,"timeToRead":382},"WPF Metro Part 2 - MahApps Metro","\u002Fwpf-metro-part2-mahapps-metro\u002F","\u002Fimages\u002Fhero\u002FMahApps-Metro-1366x768.png",{"title":415,"permalink":416,"heroImage":417,"timeToRead":382},"Windows 8.1 TouchScreen Gaming Laptops","\u002Fwindows-8-touchscreen-gaming-laptops\u002F","\u002Fimages\u002Fhero\u002FFry-Shutup-And-Take-My-Money-1366x768.png",{"title":419,"permalink":420,"heroImage":398,"timeToRead":382},"Reactive Extensions (Rx) - Part 4 - Replacing Timers","\u002Freactive-extensions-part4-replacing-timers\u002F",{"title":422,"permalink":423,"heroImage":424,"timeToRead":328},"WPF Metro Part 3 - Elysium","\u002Fwpf-metro-part3-elysium\u002F","\u002Fimages\u002Fhero\u002FElysium-1366x768.png",{"title":426,"permalink":427,"heroImage":428,"timeToRead":429},"WPF Metro Part 4 - Elysium Extra","\u002Fwpf-metro-part4-elysium-extra\u002F","\u002Fimages\u002Fhero\u002FElysium-Extra-1366x768.png",8,{"title":431,"permalink":432,"heroImage":398,"timeToRead":399},"Reactive Extensions (Rx) - Part 5 - Awaiting Observables","\u002Freactive-extensions-part5-awaiting-observables\u002F",{"title":434,"permalink":435,"heroImage":391,"timeToRead":429},"GetHashCode Made Easy","\u002Fgethashcode-made-easy\u002F",{"title":437,"permalink":438,"heroImage":398,"timeToRead":439},"Reactive Extensions (Rx) - Part 6 - Task ToObservable","\u002Freactive-extensions-part6-task-toobservable\u002F",5,{"title":441,"permalink":442,"heroImage":443,"timeToRead":366},"Portable Class Library (PCL) version of NotificationsExtensions NuGet package","\u002Fportable-class-library-version-of-notificationsextensions-nuget-package\u002F","\u002Fimages\u002Fhero\u002FNuGet-1366x768.png",{"title":445,"permalink":446,"heroImage":447,"timeToRead":439},"Model-View-ViewModel (MVVM) - Part 1 - Overview","\u002Fmodel-view-viewmodel-mvvm-part1-overview\u002F","\u002Fimages\u002Fhero\u002FMVVM-1366x768.png",{"title":449,"permalink":450,"heroImage":447,"timeToRead":399},"Model-View-ViewModel (MVVM) - Part 2 - IDisposable","\u002Fmodel-view-viewmodel-mvvm-part2-idisposable\u002F",{"title":452,"permalink":453,"heroImage":447,"timeToRead":454},"Model-View-ViewModel (MVVM) - Part 3 - INotifyPropertyChanged","\u002Fmodel-view-viewmodel-mvvm-part3-inotifypropertychanged\u002F",11,{"title":456,"permalink":457,"heroImage":458,"timeToRead":382},"Naming Conventions","\u002Fnaming-conventions\u002F","\u002Fimages\u002Fhero\u002FNaming-Conventions-1366x768.png",{"title":460,"permalink":461,"heroImage":447,"timeToRead":462},"Model-View-ViewModel (MVVM) - Part 4 - INotifyDataErrorInfo","\u002Fmodel-view-viewmodel-mvvm-part4-inotifydataerrorinfo\u002F",12,{"title":464,"permalink":465,"heroImage":428,"timeToRead":399},"Elysium Extra 1.1 Released","\u002Felysium-extra-1-1-released\u002F",{"title":467,"permalink":468,"heroImage":469,"timeToRead":470},"ASP.NET Core Boilerplate","\u002Fasp-net-mvc-boilerplate\u002F","\u002Fimages\u002Fhero\u002FASP.NET-Core-Boilerplate-1366x768.png",7,{"title":472,"permalink":473,"heroImage":474,"timeToRead":475},"Internet Favicon Madness (Updated)","\u002Finternet-favicon-madness\u002F","\u002Fimages\u002Fhero\u002FFavicons-1366x768.png",17,{"title":477,"permalink":478,"heroImage":479,"timeToRead":470},"Custom Visual Studio Project Templates","\u002Fcustom-visual-studio-project-templates\u002F","\u002Fimages\u002Fhero\u002FVisual-Studio-1366x768.png",{"title":481,"permalink":482,"heroImage":479,"timeToRead":382},"Configuration File Transforms In Visual Studio Should Be Built In","\u002Fconfiguration-file-transforms-in-visual-studio-should-be-built-in\u002F",{"title":484,"permalink":485,"heroImage":469,"timeToRead":454},"Securing the ASP.NET MVC Web.config","\u002Fsecuring-the-aspnet-mvc-web-config\u002F",{"title":487,"permalink":488,"heroImage":398,"timeToRead":328},"Reactive Extensions (Rx) - Part 7 - Sample Events","\u002Freactive-extensions-part7-sample-events\u002F",{"title":490,"permalink":491,"heroImage":492,"timeToRead":493},"NWebSec ASP.NET MVC Security Through HTTP Headers","\u002Fnwebsec-asp-net-mvc-security-through-http-headers\u002F","\u002Fimages\u002Fhero\u002FNWebSec-1366x768.png",6,{"title":495,"permalink":496,"heroImage":497,"timeToRead":110},"Content Security Policy (CSP) for ASP.NET MVC","\u002Fcontent-security-policy-for-asp-net-mvc\u002F","\u002Fimages\u002Fhero\u002FContent-Security-Policy-CSP-for-ASP.NET-MVC-1366x768.png",{"title":499,"permalink":500,"heroImage":391,"timeToRead":439},"C# 6.0 - Saving Developers From Themselves","\u002Fc-6-0-saving-developers-from-themselves\u002F",{"title":502,"permalink":503,"heroImage":504,"timeToRead":505},"Building RSS\u002FAtom Feeds for ASP.NET MVC","\u002Fbuilding-rssatom-feeds-for-asp-net-mvc\u002F","\u002Fimages\u002Fhero\u002FRSS-And-Atom-1366x768.png",19,{"title":507,"permalink":508,"heroImage":509,"timeToRead":454},"Canonical URL's for ASP.NET MVC","\u002Fcanonical-urls-for-asp-net-mvc\u002F","\u002Fimages\u002Fhero\u002FLink-Juice-1366x768.png",{"title":511,"permalink":512,"heroImage":513,"timeToRead":399},"Dynamically Generating Robots.txt Using ASP.NET MVC","\u002Fdynamically-generating-robots-txt-using-asp-net-mvc\u002F","\u002Fimages\u002Fhero\u002FRobots.txt-1366x768.jpg",{"title":515,"permalink":516,"heroImage":517,"timeToRead":399},"Minifying HTML for ASP.NET MVC","\u002Fminifying-html-for-asp-net-mvc\u002F","\u002Fimages\u002Fhero\u002FThe-Internet-Is-A-Series-Of-Tubes-1366x768.jpg",{"title":519,"permalink":520,"heroImage":469,"timeToRead":328},"Whats New in ASP.NET Core Boilerplate","\u002Fwhats-new-in-asp-net-5-mvc-6-boilerplate\u002F",{"title":522,"permalink":523,"heroImage":524,"timeToRead":470},"Dynamically Generating Sitemap.xml for ASP.NET MVC","\u002Fdynamically-generating-sitemap-xml-for-asp-net-mvc\u002F","\u002Fimages\u002Fhero\u002FSitemaps-1366x768.png",{"title":526,"permalink":527,"heroImage":528,"timeToRead":328},"So I've Been Awarded Microsoft MVP Status!","\u002Fso-ive-been-awarded-microsoft-mvp-status\u002F","\u002Fimages\u002Fhero\u002FMicrosoft-MVP-1366x768.png",{"title":530,"permalink":531,"heroImage":532,"timeToRead":366},".NET Big-O Algorithm Complexity Cheat Sheet","\u002Fnet-big-o-algorithm-complexity-cheat-sheet\u002F","\u002Fimages\u002Fhero\u002FNET-Big-O-Algorithm-Complexity-Cheat-Sheet-1366x768.jpg",{"title":534,"permalink":535,"heroImage":536,"timeToRead":382},"Logging with Serilog.Exceptions","\u002Flogging-with-serilog-exceptions\u002F","\u002Fimages\u002Fhero\u002FSerilog.Exceptions-1366x768.png",{"title":538,"permalink":539,"heroImage":540,"timeToRead":366},"Make Certificate","\u002Fmake-certificate\u002F","\u002Fimages\u002Fhero\u002FMake-Certificate-1366x768.png",{"title":542,"permalink":543,"heroImage":544,"timeToRead":328},"Colorful.Console","\u002Fcolorful-console\u002F","\u002Fimages\u002Fhero\u002FColorful.Console-1366x768.png",{"title":546,"permalink":547,"heroImage":548,"timeToRead":382},"Subresource Integrity TagHelper Using ASP.NET Core - Part 1","\u002Fsubresource-integrity-taghelper-using-asp-net-core\u002F","\u002Fimages\u002Fhero\u002FMake-Security-Easy-1366x768.png",{"title":550,"permalink":551,"heroImage":548,"timeToRead":399},"Subresource Integrity TagHelper Using ASP.NET Core - Part 2","\u002Fsubresource-integrity-taghelper-using-asp-net-core-part-2\u002F",{"title":553,"permalink":554,"heroImage":555,"timeToRead":439},"Social TagHelpers for ASP.NET Core","\u002Fsocial-taghelpers-for-asp-net-core\u002F","\u002Fimages\u002Fhero\u002FSocial-Media-1366x768.png",{"title":557,"permalink":558,"heroImage":559,"timeToRead":493},"Azure Active Directory Versus Identity Server","\u002Fazure-active-directory-versus-identity-server\u002F","\u002Fimages\u002Fhero\u002FAzure-Active-Directory-Versus-Identity-Server-1366x768.png",{"title":561,"permalink":562,"heroImage":563,"timeToRead":328},"ASP.NET Core Fluent Interface Extensions","\u002Fasp-net-core-fluent-interface-extensions\u002F","\u002Fimages\u002Fhero\u002FFluent-Interface-All-The-Things-1366x768.png",{"title":565,"permalink":566,"heroImage":567,"timeToRead":454},"NGINX for ASP.NET Core In-Depth","\u002Fnginx-asp-net-core-depth\u002F","\u002Fimages\u002Fhero\u002FNGINX-1366x768.png",{"title":569,"permalink":570,"heroImage":391,"timeToRead":328},"The Dotnet Watch Tool","\u002Fthe-dotnet-watch-tool\u002F",{"title":572,"permalink":573,"heroImage":574,"timeToRead":399},"Making Application Insights Fast & Secure","\u002Fmaking-application-insights-fast-and-secure\u002F","\u002Fimages\u002Fhero\u002FApplication-Insights-1366x768.png",{"title":576,"permalink":577,"heroImage":578,"timeToRead":470},"SEO Friendly URL's for ASP.NET Core","\u002Fseo-friendly-urls-asp-net-core\u002F","\u002Fimages\u002Fhero\u002FSearch-Engine-Optimization-SEO-1366x768.png",{"title":580,"permalink":581,"heroImage":398,"timeToRead":366},"Reactive Extensions (Rx) - Part 8 - Timeouts","\u002Freactive-extensions-rx-part-8-timeouts\u002F",{"title":583,"permalink":584,"heroImage":391,"timeToRead":399},"Custom Project Templates Using dotnet new","\u002Fcustom-project-templates-using-dotnet-new\u002F",{"title":586,"permalink":587,"heroImage":588,"timeToRead":429},"Cross-Platform DevOps for .NET Core","\u002Fcross-platform-devops-net-core\u002F","\u002Fimages\u002Fhero\u002FDotnet-Cake-AppVeyor-Travis-1366x768.png",{"title":590,"permalink":591,"heroImage":592,"timeToRead":470},"Cleaning Up CSPROJ","\u002Fcleaning-up-csproj\u002F","\u002Fimages\u002Fhero\u002FCleaning-Up-CSPROJ-1366x768.png",{"title":594,"permalink":595,"heroImage":596,"timeToRead":597},"dotnet new Feature Selection","\u002Fdotnet-new-feature-selection\u002F","\u002Fimages\u002Fhero\u002FWho-Wants-To-Be-A-Millionaire-1366x768.png",9,{"title":599,"permalink":600,"heroImage":601,"timeToRead":399},"ASP.NET Core Lazy Command Pattern","\u002Fasp-net-core-lazy-command-pattern\u002F","\u002Fimages\u002Fhero\u002FASP.NET-Core-Lazy-Command-Pattern-1366x768.png",{"title":603,"permalink":604,"heroImage":605,"timeToRead":328},"Structured Data using Schema.NET","\u002Fstructured-data-using-schema-net\u002F","\u002Fimages\u002Fhero\u002FSchema.NET-1366x768.png",{"title":607,"permalink":608,"heroImage":609,"timeToRead":493},"Keeping Up With Software Development","\u002Fkeeping-software-development\u002F","\u002Fimages\u002Fhero\u002FKeeping-up-with-Software-Development-1366x768.png",{"title":611,"permalink":612,"heroImage":613,"timeToRead":328},"A Very Generic .editorconfig File (Updated)","\u002Fgeneric-editorconfig-file\u002F","\u002Fimages\u002Fhero\u002FA-Very-Generic-Editorconfig-File-1366x768.png",{"title":615,"permalink":616,"heroImage":617,"timeToRead":439},"ASP.NET Core Caching in Practice","\u002Fasp-net-core-caching-in-practice\u002F","\u002Fimages\u002Fhero\u002FASP.NET-Core-Caching-in-Practice-1366x768.png",{"title":619,"permalink":620,"heroImage":621,"timeToRead":366},"Docker Read-Only File Systems","\u002Fdocker-read-file-systems\u002F","\u002Fimages\u002Fhero\u002FDocker-1366x768.png",{"title":623,"permalink":624,"heroImage":621,"timeToRead":382},"Docker Labels in Depth","\u002Fdocker-labels-depth\u002F",{"title":626,"permalink":627,"heroImage":621,"timeToRead":399},"Useful Docker Images - Part 1","\u002Fuseful-docker-images-part1\u002F",{"title":629,"permalink":630,"heroImage":621,"timeToRead":439},"Useful Docker Images - Part 2","\u002Fuseful-docker-images-part2\u002F",{"title":632,"permalink":633,"heroImage":634,"timeToRead":399},"Writing your Webpack configuration in TypeScript","\u002Fwriting-your-webpack-configuration-in-typescript\u002F","\u002Fimages\u002Fhero\u002FTypeScript-1366x768.png",{"title":636,"permalink":637,"heroImage":638,"timeToRead":439},"Writing Code while Asleep","\u002Fwriting-code-asleep\u002F","\u002Fimages\u002Fhero\u002FWhile-Alive-Eat-Sleep-Code-Repeat-1366x768.png",{"title":640,"permalink":641,"heroImage":391,"timeToRead":328},"The Dotnet Watch Tool Revisited","\u002Fthe-dotnet-watch-tool-revisited\u002F",{"title":643,"permalink":644,"heroImage":645,"timeToRead":328},".NET Boxed","\u002Fnet-boxed\u002F","\u002Fimages\u002Fhero\u002FDotnet-Boxed-1366x768.png",{"title":647,"permalink":648,"heroImage":391,"timeToRead":328},"Migrating to Entity Framework Core Seed Data","\u002Fmigrating-to-entity-framework-core-seed-data\u002F",{"title":650,"permalink":651,"heroImage":391,"timeToRead":382},"Optimally Configuring Entity Framework Core","\u002Foptimally-configuring-entity-framework-core\u002F",{"title":653,"permalink":654,"heroImage":391,"timeToRead":366},"ASP.NET Core Hidden Gem - QueryHelpers","\u002Fasp-net-core-hidden-gem-queryhelpers\u002F",{"title":656,"permalink":657,"heroImage":391,"timeToRead":597},"Optimally Configuring ASP.NET Core HttpClientFactory","\u002Foptimally-configuring-asp-net-core-httpclientfactory\u002F",{"title":659,"permalink":660,"heroImage":661,"timeToRead":470},"PluralSight vs LinkedIn Learning vs FrontendMasters vs Egghead.io vs YouTube","\u002Fpluralsight-vs-linkedin-learning-vs-frontendmasters-vs-egghead-io-vs-youtube\u002F","\u002Fimages\u002Fhero\u002FOnline-Learning-1366x768.png",{"title":663,"permalink":664,"heroImage":665,"timeToRead":597},"Is ASP.NET Core now a Mature Platform?","\u002Fis-asp-net-core-now-a-mature-platform\u002F","\u002Fimages\u002Fhero\u002FRocket-1366x768.jpg",{"title":667,"permalink":668,"heroImage":645,"timeToRead":597},"A Simple and Fast Object Mapper","\u002Fa-simple-and-fast-object-mapper\u002F",{"title":670,"permalink":671,"heroImage":621,"timeToRead":366},"Securing ASP.NET Core in Docker","\u002Fsecuring-asp-net-core-in-docker\u002F",{"title":673,"permalink":674,"heroImage":675,"timeToRead":399},"Git Cloning the Windows OS Repo","\u002Fgit-cloning-the-windows-os-repo\u002F","\u002Fimages\u002Fhero\u002FWindows-1366x768.png",{"title":677,"permalink":678,"heroImage":679,"timeToRead":470},".gitattributes Best Practices","\u002Fgitattributes-best-practices\u002F","\u002Fimages\u002Fhero\u002FGit-1366x768.png",{"title":681,"permalink":682,"heroImage":391,"timeToRead":382},"Unit Testing dotnet new Templates","\u002Funit-testing-dotnet-new-templates\u002F",{"title":684,"permalink":685,"heroImage":645,"timeToRead":439},"What dotnet new Could Be","\u002Fwhat-dotnet-new-could-be\u002F",{"title":687,"permalink":688,"heroImage":391,"timeToRead":399},"ASP.NET Core Integration Testing & Mocking using Moq","\u002Fasp-net-core-integration-testing-mocking-using-moq\u002F",{"title":690,"permalink":691,"heroImage":692,"timeToRead":470},"Choosing a Static Site Generator","\u002Fchoosing-a-static-site-generator\u002F","\u002Fimages\u002Fhero\u002FStatic-Site-Generators-1600x900.png",{"title":694,"permalink":695,"heroImage":696,"timeToRead":328},"Spicing up your Browser Console","\u002Fspicing-up-your-browser-console\u002F","\u002Fimages\u002Fhero\u002FFiglet-Fonts-1600x900.png",{"title":698,"permalink":699,"heroImage":700,"timeToRead":439},"Racism in Software Development & Beyond","\u002Fracism-in-software-development-and-beyond\u002F","\u002Fimages\u002Fhero\u002FBlack-Glowing-Fist-1600x900.png",{"title":702,"permalink":703,"heroImage":704,"timeToRead":439},"The Easiest Way to Version NuGet Packages","\u002Fthe-easiest-way-to-version-nuget-packages\u002F","\u002Fimages\u002Fhero\u002FSemantic-Versioning-1600x900.png",{"title":706,"permalink":707,"heroImage":443,"timeToRead":493},"The Fastest NuGet Package Ever Published (Probably)","\u002Fthe-fastest-nuget-package-ever-published-probably\u002F",{"title":709,"permalink":710,"heroImage":391,"timeToRead":382},"Automating .NET Security Updates","\u002Fautomating-dotnet-security-updates\u002F",{"title":712,"permalink":713,"heroImage":714,"timeToRead":715},"Deep Dive into Open Telemetry for .NET","\u002Fdeep-dive-into-open-telemetry-for-net\u002F","\u002Fimages\u002Fhero\u002FOpen-Telemetry-1600x900.png",10,{"title":717,"permalink":718,"heroImage":714,"timeToRead":382},"Open Telemetry for ASP.NET Core","\u002Fopen-telemetry-for-asp-net-core\u002F",{"title":720,"permalink":721,"heroImage":714,"timeToRead":382},"Exporting Open Telemetry Data to Jaeger","\u002Fexporting-open-telemetry-data-to-jaeger\u002F",{"title":39,"permalink":375,"heroImage":373,"timeToRead":382},{"title":724,"permalink":725,"heroImage":373,"timeToRead":493},"CSS General Rules of Thumb","\u002Fcss-general-rules-of-thumb\u002F",{"title":727,"permalink":728,"heroImage":729,"timeToRead":399},"Web Component Custom Element Gotchas","\u002Fweb-component-custom-element-gotchas\u002F","\u002Fimages\u002Fhero\u002FWeb-Components-1600x900.png",{"title":731,"permalink":732,"heroImage":733,"timeToRead":328},"Code Coverage & Frontend Testing","\u002Fcode-coverage-and-frontend-testing\u002F","\u002Fimages\u002Fhero\u002FJest-Cypress-1600x900.png",{"title":735,"permalink":736,"heroImage":479,"timeToRead":366},".NET Boxed Visual Studio Integration","\u002Fdotnet-boxed-visual-studio-integration\u002F",{"title":738,"permalink":739,"heroImage":740,"timeToRead":382},"The Windows Package Manager","\u002Fwindows-package-manager\u002F","\u002Fimages\u002Fhero\u002FWinget-1600x900.png",{"title":742,"permalink":743,"heroImage":391,"timeToRead":382},"The Problem with C# 10 Implicit Usings","\u002Fthe-problem-with-csharp-10-implicit-usings\u002F",{"title":745,"permalink":746,"heroImage":714,"timeToRead":399},"Optimally Configuring Open Telemetry Tracing for ASP.NET Core","\u002Foptimally-configuring-open-telemetry-tracing-for-asp-net-core\u002F",{"title":748,"permalink":749,"heroImage":750,"timeToRead":328},"Live Streaming .NET","\u002Flive-streaming-dotnet\u002F","\u002Fimages\u002Fhero\u002FMy-YouTube-1920x1080.jpg",{"title":752,"permalink":753,"heroImage":754,"timeToRead":328},"I Was Awarded as an Open UK Honouree","\u002Fopen-uk-honouree\u002F","\u002Fimages\u002Fhero\u002FOpen-UK-Honours-1366x768.jpg",{"title":756,"permalink":757,"heroImage":758,"timeToRead":399},"On the Etiquette of Pull Request Comments","\u002Fon-the-etiquette-of-pull-request-comments\u002F","\u002Fimages\u002Fhero\u002FPrecious-PR-1600x900.jpg",{"title":760,"permalink":761,"heroImage":762,"timeToRead":366},"AI Gone Rogue","\u002Fai-gone-rogue\u002F","\u002Fimages\u002Fhero\u002FHAL-9000-Prop-1600x900.png",{"title":764,"permalink":765,"heroImage":766,"timeToRead":439},"AI Learnings from Upgrading My Blog","\u002Fai-learnings-from-upgrading-my-blog\u002F","\u002Fimages\u002Fhero\u002FAI-Agents-Upgrading-a-Blog-With-Human-Code-Review-1600x900.png",{"left":4,"top":4,"width":24,"height":16,"rotate":4,"vFlip":6,"hFlip":6,"body":768},"\u003Cpath fill=\"currentColor\" d=\"M352 320c-22.608 0-43.387 7.819-59.79 20.895l-102.486-64.054a96.55 96.55 0 0 0 0-41.683l102.486-64.054C308.613 184.181 329.392 192 352 192c53.019 0 96-42.981 96-96S405.019 0 352 0s-96 42.981-96 96c0 7.158.79 14.13 2.276 20.841L155.79 180.895C139.387 167.819 118.608 160 96 160c-53.019 0-96 42.981-96 96s42.981 96 96 96c22.608 0 43.387-7.819 59.79-20.895l102.486 64.054A96.3 96.3 0 0 0 256 416c0 53.019 42.981 96 96 96s96-42.981 96-96s-42.981-96-96-96\"\u002F>",{"left":4,"top":4,"width":16,"height":16,"rotate":4,"vFlip":6,"hFlip":6,"body":770},"\u003Cpath fill=\"currentColor\" d=\"M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48c27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256\"\u002F>",{"left":4,"top":4,"width":16,"height":16,"rotate":4,"vFlip":6,"hFlip":6,"body":772},"\u003Cpath fill=\"currentColor\" d=\"M459.37 151.716c.325 4.548.325 9.097.325 13.645c0 138.72-105.583 298.558-298.558 298.558c-59.452 0-114.68-17.219-161.137-47.106c8.447.974 16.568 1.299 25.34 1.299c49.055 0 94.213-16.568 130.274-44.832c-46.132-.975-84.792-31.188-98.112-72.772c6.498.974 12.995 1.624 19.818 1.624c9.421 0 18.843-1.3 27.614-3.573c-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319c-28.264-18.843-46.781-51.005-46.781-87.391c0-19.492 5.197-37.36 14.294-52.954c51.655 63.675 129.3 105.258 216.365 109.807c-1.624-7.797-2.599-15.918-2.599-24.04c0-57.828 46.782-104.934 104.934-104.934c30.213 0 57.502 12.67 76.67 33.137c23.715-4.548 46.456-13.32 66.599-25.34c-7.798 24.366-24.366 44.833-46.132 57.827c21.117-2.273 41.584-8.122 60.426-16.243c-14.292 20.791-32.161 39.308-52.628 54.253\"\u002F>",{"left":4,"top":4,"width":16,"height":16,"rotate":4,"vFlip":6,"hFlip":6,"body":774},"\u003Cpath fill=\"currentColor\" d=\"M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6c0-13.8 11.1-24.9 24.9-24.9c13.6 0 24.6 11.1 24.6 24.9c0 13.6-11.1 24.6-24.6 24.6M504 256c0 137-111 248-248 248S8 393 8 256S119 8 256 8s248 111 248 248m-132.3-41.2c-9.4 0-17.7 3.9-23.8 10c-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3l55.4 12.5c0 13.6 11.1 24.6 24.6 24.6c13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8c-6.1-6.4-14.7-10.2-24.1-10.2c-34.9 0-46.3 46.9-14.4 62.8c-1.1 5-1.7 10.2-1.7 15.5c0 52.6 59.2 95.2 132 95.2c73.1 0 132.3-42.6 132.3-95.2c0-5.3-.6-10.8-1.9-15.8c31.3-16 19.8-62.5-14.9-62.5M302.8 331c-18.2 18.2-76.1 17.9-93.6 0c-2.2-2.2-6.1-2.2-8.3 0c-2.5 2.5-2.5 6.4 0 8.6c22.8 22.8 87.3 22.8 110.2 0c2.5-2.2 2.5-6.1 0-8.6c-2.2-2.2-6.1-2.2-8.3 0m7.7-75c-13.6 0-24.6 11.1-24.6 24.9c0 13.6 11.1 24.6 24.6 24.6c13.8 0 24.9-11.1 24.9-24.6c0-13.8-11-24.9-24.9-24.9\"\u002F>",{"left":4,"top":4,"width":16,"height":16,"rotate":4,"vFlip":6,"hFlip":6,"body":776},"\u003Cpath fill=\"currentColor\" d=\"M512 194.8c0 101.3-82.4 183.8-183.8 183.8c-101.7 0-184.4-82.4-184.4-183.8c0-101.6 82.7-184.3 184.4-184.3C429.6 10.5 512 93.2 512 194.8M0 501.5h90v-491H0z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":778},"\u003Cpath fill=\"currentColor\" d=\"m20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379c-.197-.069-.42-.098-.57-.241c-.152-.143-.196-.366-.231-.572c-.065-.378-.125-.756-.192-1.133c-.057-.325-.102-.69-.25-.987c-.195-.4-.597-.634-.996-.788a6 6 0 0 0-.626-.194c-1-.263-2.05-.36-3.077-.416a26 26 0 0 0-3.7.062c-.915.083-1.88.184-2.75.5c-.318.116-.646.256-.888.501c-.297.302-.393.77-.177 1.146c.154.267.415.456.692.58c.36.162.737.284 1.123.366c1.075.238 2.189.331 3.287.37q1.829.074 3.65-.118q.449-.05.896-.119c.352-.054.578-.513.474-.834c-.124-.383-.457-.531-.834-.473c-.466.074-.96.108-1.382.146q-1.767.12-3.536.006a22 22 0 0 1-1.157-.107c-.086-.01-.18-.025-.258-.036q-.364-.055-.724-.13c-.111-.027-.111-.185 0-.212h.005q.416-.09.838-.147h.002c.131-.009.263-.032.394-.048a25 25 0 0 1 3.426-.12q1.011.029 2.017.144l.228.031q.4.06.798.145c.392.085.895.113 1.07.542c.055.137.08.288.111.431l.319 1.484a.237.237 0 0 1-.199.284h-.003l-.112.015a37 37 0 0 1-4.743.295a37 37 0 0 1-4.699-.304c-.14-.017-.293-.042-.417-.06c-.326-.048-.649-.108-.973-.161c-.393-.065-.768-.032-1.123.161c-.29.16-.527.404-.675.701c-.154.316-.199.66-.267 1c-.069.34-.176.707-.135 1.056c.087.753.613 1.365 1.37 1.502a39.7 39.7 0 0 0 11.343.376a.483.483 0 0 1 .535.53l-.071.697l-1.018 9.907c-.041.41-.047.832-.125 1.237c-.122.637-.553 1.028-1.182 1.171q-.868.197-1.756.205c-.656.004-1.31-.025-1.966-.022c-.699.004-1.556-.06-2.095-.58c-.475-.458-.54-1.174-.605-1.793l-.731-7.013l-.322-3.094c-.037-.351-.286-.695-.678-.678c-.336.015-.718.3-.678.679l.228 2.185l.949 9.112c.147 1.344 1.174 2.068 2.446 2.272c.742.12 1.503.144 2.257.156c.966.016 1.942.053 2.892-.122c1.408-.258 2.465-1.198 2.616-2.657l1.024-9.995l.215-2.087a.48.48 0 0 1 .39-.426c.402-.078.787-.212 1.074-.518c.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233c-2.416.359-4.866.54-7.308.46c-1.748-.06-3.477-.254-5.207-.498c-.17-.024-.353-.055-.47-.18c-.22-.236-.111-.71-.054-.995c.052-.26.152-.609.463-.646c.484-.057 1.046.148 1.526.22q.865.132 1.737.212c2.48.226 5.002.19 7.472-.14q.675-.09 1.345-.21c.399-.072.84-.206 1.08.206c.166.281.188.657.162.974a.54.54 0 0 1-.169.364zm-6.159 3.9c-.862.37-1.84.788-3.109.788a6 6 0 0 1-1.569-.217l.877 9.004c.065.78.717 1.38 1.5 1.38c0 0 1.243.065 1.658.065c.447 0 1.786-.065 1.786-.065c.783 0 1.434-.6 1.499-1.38l.94-9.95a4 4 0 0 0-1.322-.238c-.826 0-1.491.284-2.26.613\"\u002F>",{"left":4,"top":4,"width":27,"height":16,"rotate":4,"vFlip":6,"hFlip":6,"body":780},"\u003Cpath fill=\"currentColor\" d=\"M111.4 295.9c-3.5 19.2-17.4 108.7-21.5 134c-.3 1.8-1 2.5-3 2.5H12.3c-7.6 0-13.1-6.6-12.1-13.9L58.8 46.6c1.5-9.6 10.1-16.9 20-16.9c152.3 0 165.1-3.7 204 11.4c60.1 23.3 65.6 79.5 44 140.3c-21.5 62.6-72.5 89.5-140.1 90.3c-43.4.7-69.5-7-75.3 24.2M357.1 152c-1.8-1.3-2.5-1.8-3 1.3c-2 11.4-5.1 22.5-8.8 33.6c-39.9 113.8-150.5 103.9-204.5 103.9c-6.1 0-10.1 3.3-10.9 9.4c-22.6 140.4-27.1 169.7-27.1 169.7c-1 7.1 3.5 12.9 10.6 12.9h63.5c8.6 0 15.7-6.3 17.4-14.9c.7-5.4-1.1 6.1 14.4-91.3c4.6-22 14.3-19.7 29.3-19.7c71 0 126.4-28.8 142.9-112.3c6.5-34.8 4.6-71.4-23.8-92.6\"\u002F>",{"left":4,"top":4,"width":16,"height":16,"rotate":4,"vFlip":6,"hFlip":6,"body":782},"\u003Cpath fill=\"currentColor\" d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8m0 448c-110.532 0-200-89.431-200-200c0-110.495 89.472-200 200-200c110.491 0 200 89.471 200 200c0 110.53-89.431 200-200 200m107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516c17.561-9.845 28.324-16.541 28.324-29.579c0-17.246-21.999-28.693-39.784-28.693c-23.189 0-33.894 10.977-48.942 29.969c-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8M298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42s18.841-42 42-42s42 18.841 42 42\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":784},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 12H5m7 7l-7-7l7-7\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":786},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7l7 7l-7 7\"\u002F>",1794091034415]