How to Set Different Blog Designs by Category with CSS Specificity: Utilizing CSS Specificity
A guide on specific ways to utilize CSS specificity to set different blog designs for each category. It covers a CSS modularization strategy to apply unique styles (dark mode, image emphasis, etc.) tailored to the nature of each category on single-layout platforms like Tistory, thereby clarifying visual distinction and enhancing user experience. Includes JavaScript code for automatically assigning category-specific classes to the body tag and practical CSS design samples.
While operating a blog, some focus on a single topic, but most naturally cover several related subjects as content expands. Especially when running various categories based on a single layout, such as on Tistory, there are often times when you want to apply a different design that is appropriate for the nature of each category.
In such cases, appropriately utilizing CSS Specificity allows you to maintain the common layout while applying unique styles to each category. This clarifies visual distinction and improves user experience.
Blog Decoration Method Applying Different Themes Per Category: The Need and Principle of CSS Separation
In this article, I will casually explain the method I actually used to divide and apply the .post-item .text-box style by category on my Tistory blog, along with the design points I considered during the process.
1. Why is Category-Specific CSS Separation Necessary?
Most blog templates structure the basic layout with common styles. However, if the design tone or layout needs to differ according to the characteristics of each subject, such as categories, it is difficult to manage with a single CSS file, and styles are prone to conflict or entanglement.
For example,
- The Political category might require a weighty, dark gradient background and restrained text design,
- The IT category might require a clean, modern background and a more upbeat layout.
In this situation, it is much more convenient and easier to maintain if you assign unique category classes to the body tag and then use specificity in CSS to manage each category's style separately.
2. Basic Principle of Separating Styles with CSS Specificity
CSS specificity is the criterion that determines which style will be applied first. Specificity changes depending on the composition of the selector, and a style with higher specificity overrides a style with lower specificity.
- The specificity of the selector
.post-item .text-boxis low. - Including a specific class in the body, such as
body.category-political .post-item .text-box, increases the specificity and gives it priority.
Therefore, the desirable structure is to set the basic style in .post-item .text-box and write category-specific variations in body.category-categoryname .post-item .text-box.
3. Actual Code and Design Implementation (CSS Specificity Application Example)
Below is an example applying the style for a primary category (category-political). Through this code, you can see how CSS specificity redefines existing styles.
/* 1) Common Basic Style */
.post-item .text-box {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
height: 320px;
background: rgba(10, 10, 10, 0.9);
padding: 2.5rem;
margin-left: -50px;
margin-top: -30px;
position: relative;
border-right: 3px solid var(--pcs-text-description-secondary);
transform: translate3d(0, 0, 0);
}
/* 2) Separate Style Applied Only to the Political Category (Increased Specificity) */
body.category-political .post-item .text-box {
left: 0;
right: 0;
z-index: 2;
height: 100%;
position: absolute;
bottom: 0;
padding: 2.5rem; /* Same as common style */
width: 100%;
color: white;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), #0000004f);
/* Resetting parts changed from the common style */
margin-left: 0;
margin-top: 0;
border-right: none;
}Design Points
- Common Style: Secures readability with a basic flex layout, adequate padding, and a dark background.
- The Political category dedicated style positions the text box to overlap the image and applies a gradient to the background to add visual emphasis.
- The category dedicated style adjusts margins and borders to prevent conflicts with other styles.
- Common Style
.post-item .excerpt {
color: gray;
}- Style applied only in the Political category
body.category-political .post-item .excerpt {
color: white;
background: rgba(0,0,0,0.5);
}4. Automatically Assigning Category Classes (Utilizing JavaScript)
Since Tistory does not inherently include category information in the body tag, you can use the script below to automatically add category-specific classes based on the URL path. This is a core step that enables category-specific CSS settings.
JavaScript Code Explanation and Implementation
location.pathnamerefers to the current page's address path.- It checks if the path starts with a specific path, like
startsWith("/category/IT").
You can modify it to match your own category URLs. - If the condition is met, it automatically adds classes like
category-itorcategory-politicalto thebodytag.
script
document.addEventListener("DOMContentLoaded", function () {
if (location.pathname.startsWith("/category/Political")) {
document.body.classList.add("category-political");
} else if (location.pathname.startsWith("/category/IT")) {
document.body.classList.add("category-it");
}
});
/script5. Effects and Scalability from the Perspective of SEO and User Experience
5-1. Benefits of Design Separation (SEO and UX Improvement)
- Easy Code Management: Separating styles by category makes the CSS file clearer and easier to maintain.
- Consistent Design Maintenance: While highlighting category characteristics, it avoids conflict with the basic design, increasing content focus.
- Fast Rendering and Accurate Styling: Appropriately utilizing the specificity principle helps the browser clearly understand style priority, which aids rendering performance.
- User Experience Improvement: Design differentiation by topic positively influences visitors' immersion in the content.
5-2. Scalability and Modularization (Utilizing CSS Variables)
The above method can be applied identically to other categories besides Political and IT, and can be easily expanded to include separate layouts or color themes for each category if needed. Using it with CSS variables (e.g., --primary, --secondary) helps maintain a more consistent design system and is advantageous for CSS modularization.
If you want to make your blog a more unique and original content platform, it is important to clearly separate the basic style from category-dedicated styles using the CSS specificity principle and category-specific classes. This allows you to apply unique styles appropriate for each topic without design conflicts.
Especially on a Tistory blog, applying category-specific CSS style separation can be a differentiating factor. Maximize the strengths unique to Tistory to capture visitors' attention with your own distinctive design and increase the value of your content.
In the Tistory platform, which gathers content on diverse subjects, this style separation technique is even more essential.
6. Tip ! Dark Mode 3 Category Sample Designs (CSS Examples)
If you want to decorate your blog with a modern and sophisticated feel, we recommend the image gallery style. The code below is a simple yet stylish modern CSS example. Those who need it can download this code, modify it to fit their blog, and use it.
6-1. Style 1: Modern Black
The combination of a dark grey background (#2b2c2f) and white text reduces eye strain and increases readability.
The card provides natural interaction with rounded corners and a smooth movement and shadow effect upon mouse hover.
Key Design Points
- Dark Theme to Reduce Eye Strain
The combination of a dark grey background and white text increases readability and reduces strain during long reading sessions. - Smooth Interaction Effects
Provides rounded corners on the card and a natural response upon mouse hover. - Maintaining the Image's Original Colors
Images are displayed as they are, with slight enlargement upon hover. - Stable Text Alignment
Text is neatly aligned with generous padding and margins. - Mobile Responsive Structure
Automatically switches to vertical alignment on smaller screens.
6-2. Style 2: Category Design Emphasizing Images
Visual prominence is heightened by centering the image and setting a large height of 600px.
A dark translucent background is placed in the text area to improve readability, and the title and summary are positioned over the image to easily check key information.
Key Design Points
- Image-Centric Layout
Setting the image height to 600px increases the visual prominence of the content. - Dark Background + White Text
Translucent background increases readability and harmonizes well with the image. - Text Placement Over Image
The title and summary are displayed over the image. - Mouse Hover Effect
The image slightly enlarges, and the card softly lifts. - Mobile Adaptation
Switches to vertical orientation on small screens. - Base Color and Font
White text and a bold title give a stable impression.
6-3. Style 3: Modern Dark Gallery
The background is set to almost black (#0a0a0a), and the title attracts attention with a gradient text effect. Unique clip-path and filter effects are used on the images to create a sensory atmosphere.
Design Key Points
- Dark Background and High-Contrast Text
Black background and gradient title enhance visibility - Clip-Path and Filter Application to Images
Creates a unique shape and atmosphere - Three-Dimensional Card Effect
Provides a dynamic feel with 3D animation and shadows - Clear Layout Separation
Readability is enhanced with sufficient margins - Mobile Optimization
Simplified by removing clip-path and using vertical alignment
Frequently Asked Questions (FAQ) - Blog Category CSS Settings
Q1: Why is CSS specificity important when applying category-specific CSS?
CSS specificity is the principle that determines the priority of styles. To override the base template's CSS and apply a specific category style, it is important because you must use a selector with higher specificity than the base selector, such as body.category-name, to apply the desired design accurately without style conflicts.
Q2: How do I automatically assign category-specific classes to the body tag in Tistory?
Since Tistory does not inherently provide category classes, you must use JavaScript. By using location.pathname.startsWith("/category/categoryname"), as shown in the provided code, to check the current URL path, you can dynamically add a class to the body tag with the command document.body.classList.add("category-classname") when a match is found.
Q3: Does setting category-specific styles negatively affect the blog's rendering speed?
Modularizing styles using CSS specificity can actually have a positive impact on rendering performance because the browser can clearly determine style priority. However, using overly complex selectors or unnecessary JavaScript code can lead to performance degradation, so it is important to use concise selectors and optimized scripts.