Blog: Reverse engineer a CSS Stack – #2 (More Posts)
In this blog, I’ll talk about more changes to the code behind the scenes to reduce code bloat and how I made the HTML more semantic and maintained the website’s visual look.
When I doing my forensic look at https://photography.jonniegrieve.co.uk, I began to notice a few issues with the semantic meaning in the markup. Specifically with the heading structure. For example, on the pages that contain the photo categories, there’s an element that goes below the thumbnails the purpose of which is to identify the photo category and the number of photos in that category. The class used a level 2 heading (<h2>).
<h2 class="category-title new">
Animals (<span id="animals_18_200_count">5</span>)
</h2>These photo groups should be center aligned below the thumbnails and the change their colour from gray to black on mouse hover over the category photo. But this was not the case in all instances. e.g. 2023/canon_18_200/index.php.
To make sure the containing element for the categories is given a central alignment, I gave it a text-align value of center.
.category_panel_2023 {
text-align: center;
}Making the above elements level 2 heading elements was semantically invalid because the photos_by_category class, which is further up the document tree and now styled in its own dedicated SASS partial, uses <h2> and <h3>. Heading level 2 elements should not be used again in this context.
<div class="photos_by_category">
<h2>Photos by Category: Canon EOS 4000D DSLR</h2>
<h3> <em>(Lens EF-S 75-300<span>mm</span>) </em> </h3></div>After a good look through all the pages, I identified that I should change the category ID elements by making them level 4 <h4> headings. I did this by first adding h4 selectors to the _category_id’s SASS partial.
/* _category_ids.scss */
+ h2.new::after,
+ h4.new::after {
//
}But all this achieved was an increase in the code bloat and therefore the page load.
So it’s better for me to find a way to change the markup to use a more rigid hierarchical structure for my heading elements.
The markup for the photos pages is largely the same with one or 2 subtle differences.
<main class="container">
<div class="photos_by_category" id="top">
<h2> Photos by Category: Canon EOS 250D DSLR (2023) </h2>
<h3> <em>(with SigmaDC 18-200mm 1:3.5-6.3 II HSM)</em> </h3>
<?php require "../../template-parts/social.php"; ?>
<section class="category_panel_2023">
<div class="photo_set_2023">
<h2 id="set1" class="category-title new" ... >
</div>
</section>
</main>The above example is the simplest markup for setting a meaningful hierarchical structure. The photos_by_category container class remains constant which means the next time I use a heading element in the document.
That’s how I knew I could simply use an <h4> instead of a <h2> for the element with class attribute of “category-title”.
I’ll go back to the photo pages and make this change, and then make sure this change is added to the CSS.
<h4 class="category-title new">Animals ( ) </h4>/* _category_ids.scss */
+ h4.new::after {
//
}Not all of the markup in the photo pages is exactly the same. Some contain markup that introduces some collapsible content using the “collapse-group” class.
Because the <h2> is adjacent to <h3> in the .photos_by_category element in terms of their positions in the document tree, I can make the case to myself to keep using h3 for .collapse-group and then change <h2> category title to <h4>. This is in my opinion a more meaningful and semantic use of the DOM.
<div class="photos_by_category" id="top">
<snip> h2 and h3</snip>
<?php require "../../template-parts/social.php"; ?>
</div>
<section class="category_panel_2022">
<h3 class="collapse-group">January
<span class="open_close" id="click-jan">(Open/Close) </span>
</h3>
</section>Since the .collapse-group class is a sibling element of the child h3 element of photos_by_category I feel comfortable that I can use the h3 class, allowing the consistency of using h4 .category-title classes; like every other photo page.
Having worked this out, I can safely remove h2 selectors from the _category_id’s.scss partial file and replace them with h4.
%category_ids {
+ h4 {
...
}
+ h4.new::after {
...
}
&:hover + h4 {
...
}Can I do the same, without using extends? Thereby reducing more lines of code.
I found another way to reduce the CSS lines of CSS used in this website.
Another issue I found was with the classes on the first <section> element in photo pages,
<section class="category_panel_2022">It was the wrong class for 2023 pages. This was a simple issue to put right but got me wondering if I should make this agnostic of years or carry on using 2023 in the class. Then I looked into this a little further I realised I was using the same CSS code across multiple SASS partial files. There’s no point in including each of these in 4 separate partials and there’s a ripe opportunity here to reduce page load and a lot of code bloat.
Let’s try and put this right by creating a new catch-all sass partial for the photo category panels.
_category_panels.scssI copied each of the selectors related to category panels over to this new partial and made sure the root sass.scss partial was updated to import the new one.
@import "sass/pages/_category_panels";
I opted to write a new class into the new partial.
.category_panels {
}Most of the selectors and styles were exactly the same and could be truncated. So I also copied each of the styles related to the display of the photos over to this file.
in the markup, I’ve sorted through the category panel classes. They’re corresponded by years
- .category_panel_2023,
- .category_panel_2022,
- .category_panel_2021,
- .category_panel_2020
changed the classes to category-panels in those templates.
<section class="category_panels">
</section>I created a separate style rule that combined the selectors that share the same styles, like this
h3,
h3.collapse-group {
}And I moved the styles from each of the 4 partials into that selector.
h3,
h3.collapse-group {
border-bottom: 3px red solid;
font-size: 20pt;
font-weight: bold;
margin-bottom: 15px;
width: 480px;
margin-top: 22pt;
cursor: pointer;
@media (max-width: $lg) { }
@media (max-width: $md) { {
@media (max-width: $sm) { }
~ span {
}
a {
}
}There was only one major difference which was a single style rule that should appear in a separate selector for a level 3 heading with a class of “collapse-group”,
h3.collapse {
.open_close {
color: red;
font-size: 8pt;
/* font-weight: bold; */
font-style: italic;
padding: 14px;
margin-left: 10px;
}
}Doing this means the website is now much easier to customise and maintain. For example, the alignment of the photo thumbnails and their titles can now be changed in a single location.
@media(max-width: $xl) {
text-align: center;
}The result of all of this is that the stylesheet is now reduced to just under 5100 lines of code. So while the website still has a stylesheet of considerable size it’s also a sizeable reduction from where we started with.