Better organize CSS properties by type

static/common.css

@@ -1,9 +1,22 @@
+/*
+Organization:
+{
+    display and alignment
+    bounding box (width, margin, overflow, ...)
+    borders and shadows
+    backgrounds
+    foregrounds
+    misc
+}
+*/
 body
 {
     display: flex;
     flex-direction: column;
-    background-color:#00d8f4;
+
     margin: 8px;
+
+    background-color:#00d8f4;
 }
 li
 {
@@ -15,13 +28,15 @@ li
     flex-direction: row;
     justify-content: center;
     align-content: center;
+
     margin-bottom: 4px;
 }
 .header_element
 {
     display: flex;
-    justify-content: center;
     flex: 1;
+    justify-content: center;
+
     background-color: rgba(0, 0, 0, 0.1);   
 }
 .header_element:hover
@@ -30,8 +45,8 @@ li
 }
 #content_body
 {
-    flex: 0 0 auto;
     display: flex;
+    flex: 0 0 auto;
     flex-direction: row;
 }
 .add_tag_button, #search_go_button
@@ -54,15 +69,18 @@ li
 {
     /*position: absolute;*/
     top: 3px;
+    vertical-align: middle;
+
     width:  18px;
     height: 14px;
     padding: 0;
-    vertical-align: middle;
+
-    background-color: #ff4949;
     border-top: 2px solid #ffacac;
     border-left: 2px solid #ffacac;
     border-right: 2px solid #bd1b1b;
     border-bottom: 2px solid #bd1b1b;
+
+    background-color: #ff4949;
 }
 .remove_tag_button
 {
@@ -84,27 +102,31 @@ li
 }
 .photo_card_list
 {
-    background-color: #ffffd4;
-    display: block;
-    padding: 4px;
-    margin: 8px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+
+    margin: 8px;
+    padding: 4px;
+
+    background-color: #ffffd4;
 }
 .photo_card_grid
 {
     display: inline-flex;
     flex-direction: column;
-    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
+    vertical-align: middle;
+
     min-width: 150px;
     max-width: 300px;
     height: 200px;
-    background-color: #ffffd4;
     padding: 8px;
     margin: 8px;
+
     border-radius: 8px;
-    vertical-align: middle;
+    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
+
+    background-color: #ffffd4;
 }
 .photo_card_grid_thumb
 {
@@ -138,27 +160,32 @@ li
     flex: 1;
     flex-direction: column;
     justify-content: space-between;
-    font-size: 12.8px;
+
     background-color: inherit;
+
+    font-size: 12.8px;
 }
 .photo_card_grid_filename
 {
-    background-color: inherit;
-    max-height: 30px;
-    overflow: hidden;
     align-self: flex-start;
-    word-break:break-word;
-    z-index: 1;
 
     /*
     The width of photo cards should be based on the aspect ratio of the
     thumbnail image. Previously, I had problems where the card would be wider
     than necessary because the file had a long name.
     These min-width:100% + width:0 prevent the info div from controlling
-    card size, prioritizing the thumbnail.
+    card size, so we can prioritize the thumbnail instead.
     */
     min-width: 100%;
     width: 0;
+    overflow: hidden;
+    z-index: 1;
+
+    max-height: 30px;
+
+    background-color: inherit;
+
+    word-break:break-word;
 }
 .photo_card_grid_filename a
 {
@@ -170,11 +197,12 @@ li
 }
 .photo_card_grid_file_metadata
 {
+    display: flex;
+    z-index: 0;
+    justify-content: space-between;
+
     font-family: monospace;
     font-size: 11px;
-    display: flex;
-    justify-content: space-between;
-    z-index: 0;
 }
 .photo_card_grid_tags
 {
@@ -187,29 +215,34 @@ li
 }
 .tag_object
 {
-    font-size: 0.9em;
-    background-color: #fff;
     border-radius: 2px;
+
+    background-color: #fff;
+
+    font-size: 0.9em;
     text-decoration: none;
     font-family: monospace;
     line-height: 1.3;
 }
 #message_area
 {
-    overflow-y: auto;
-    background-color: rgba(0, 0, 0, 0.1);
-    width: 100%;
-    height: 100%;
-    max-height: 300px;
     display: flex;
+    flex: 2;
     flex-direction: column;
     align-items: center;
-    flex: 2;
+
+    max-height: 300px;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+
+    background-color: rgba(0, 0, 0, 0.1);
 }
 .message_bubble
 {
     width: 80%;
     margin: 4px;
+
     word-wrap: break-word;
 }
 .message_positive

templates/bookmarks.html

@@ -16,15 +16,18 @@
 }
 .bookmark_card
 {
-    background-color: #ffffd4;
     display: inline-flex;
     flex: 0 0 auto;
     flex-direction: column;
+    align-items: baseline;
+
     padding: 8px;
     margin: 8px;
-    align-items: baseline;
+
     border-radius: 8px;
     box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
+
+    background-color: #ffffd4;
 }
 .bookmark_card .bookmark_url
 {

templates/login.html

@@ -20,10 +20,11 @@ button
 #content_body
 {
     display: flex;
+    flex: 1;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    flex: 1;
+
     max-width: 900px;
     margin-left: auto;
     margin-right: auto;
@@ -38,12 +39,14 @@ button
 #login_form,
 #register_form
 {
-    padding: 10px;
-    border-radius: 5px;
     display: flex;
     flex-direction: column;
-    border: 1px solid black;
+
+    padding: 10px;
     margin: 10px;
+
+    border-radius: 5px;
+    border: 1px solid black;
 }
 #login_form > *,
 #register_form > *

templates/photo.html

@@ -13,8 +13,8 @@
 #content_body
 {
     /* Override common.css */
-    flex-direction: row;
     flex: 1;
+    flex-direction: row;
 }
 #left
 {
@@ -23,14 +23,16 @@
 }
 #right
 {
-    flex: 1;
     display: flex;
+    flex: 1;
 }
 #editor_holder
 {
+    flex-direction: column;
+
     max-width: 300px;
     padding: 8px;
-    flex-direction: column;
+
     background-color: rgba(0, 0, 0, 0.1);
 }
 #editor_area
@@ -58,11 +60,13 @@
 }
 #photo_img_holder
 {
-    height: 100%;
-    width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
+
+    height: 100%;
+    width: 100%;
+
     background-repeat: no-repeat;
 }
 #photo_img_holder img

templates/root.html

@@ -15,8 +15,8 @@ body, .nice_link
 }
 .nice_link, .plain_link
 {
-    margin: 8px;
     height: 40px;
+    margin: 8px;
 }
 .nice_link
 {

templates/search.html

@@ -11,10 +11,11 @@
 <style>
 form
 {
-    width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
+
+    width: 100%;
 }
 #error_message_area
 {
@@ -26,9 +27,12 @@ form
 .search_warning
 {
     align-self: center;
-    color: #fff;
+
-    background-color: #f00;
     padding: 2px;
+
+    background-color: #f00;
+
+    color: #fff;
 }
 #left, #right
 {
@@ -37,18 +41,23 @@ form
 }
 #left
 {
-    background-color: rgba(0, 0, 0, 0.1);
+    flex: 1;
-    width: 300px;
+
+    padding: 8px;
     max-width: 300px;
     min-width: 300px;
-    padding: 8px;
+    width: 300px;
-    flex: 1;
+
+    background-color: rgba(0, 0, 0, 0.1);
+
     word-wrap: break-word;
 }
 #right
 {
     flex: 1;
+
     padding: 8px;
+
     width: auto;
 }
 @media screen and (max-width: 800px) {
@@ -77,12 +86,15 @@ form
 }
 .prev_page, .next_page
 {
-    flex: 1;
     display: flex;
+    flex: 1;
     justify-content: center;
-    background-color: #ffffd4;
+
-    font-size: 20;
     border: 1px solid black;
+
+    background-color: #ffffd4;
+
+    font-size: 20;
 }
 
 .search_builder_tagger,

templates/tags.html

@@ -23,37 +23,41 @@ body
 }
 #right
 {
-    background-color: rgba(0, 0, 0, 0.1);
-    width: 300px;
-    position: fixed;
-    right: 8px;
-    bottom: 8px;
-    top: 30px;
-    padding: 8px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    position: fixed;
+    right: 8px;
+    bottom: 8px;
+    top: 30px;
+
+    width: 300px;
+    padding: 8px;
+
+    background-color: rgba(0, 0, 0, 0.1);
 }
 #editor_area
 {
-    flex: 1;
     display: flex;
+    flex: 1;
     flex-direction: row;
     justify-content center;
     align-items: center;
 }
 #message_area
 {
-    overflow-y: auto;
-    background-color: rgba(0, 0, 0, 0.1);
-    width: 100%;
-    height: 100%;
-    flex: 2;
     display: flex;
+    flex: 2;
     flex-direction: column;
     justify-content center;
     align-items: center;
+
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+
+    background-color: rgba(0, 0, 0, 0.1);
 }
 </style>
 </head>