# Embracing a CSS Defense Strategy
Hey there, CSS enthusiasts! But before we get all serious with the blog, let's take a moment for a CSS meme break. 🎉
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701318054356/2617ee3a-601e-4f7c-b0fd-654fb0b0405b.png align="center")
In today's blog, we're going to chat about something we've all encountered in our coding adventures: defending ourselves against those tricky CSS issues and gearing up for the future. Also, we explore ways to tackle CSS challenges with tips and tricks 🍕💻
## **CSS Logical Properties**
Provide the ability to control layout through logical, rather than physical, direction, and dimension mappings.
**Normal Approach**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701318139094/b1740161-7cc6-43ff-846b-6797ed3f5580.png align="center")
**With Logical Approach - How it works**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701318211013/900dd06f-438e-4c6b-99c4-be942142554f.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701318265851/cb98e6fa-c44a-4809-ba4d-7c1eb2c4258e.png align="center")
## **CSS Parent Selector (:has)**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701318381377/5ec9f158-8775-4206-b49b-8ace75873a7e.png align="center")
```xml
```
```css
.section-header {
display: flex;
justify-content: space-between;
}
.section-header:has(> a) {
align-items: center;
border-bottom: 1px solid;
padding-bottom: 1rem;
}
```
## **CSS pseudo-class - :is() and :where()**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701320417937/b33f5c52-3cb1-4263-9386-f3de36ac5df9.png align="center")
```css
ol {
list-style-type: upper-alpha;
color: darkblue;
}
/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
:is(ol, ul, menu:unsupported) :is(ol, ul) {
color: green;
}
:is(ol, ul) :is(ol, ul) ol {
list-style-type: lower-greek;
color: chocolate;
}
```
**Comparison between :is() & :where()**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701320588276/22c25fd2-250f-4ed3-9ba1-cb203f6817ba.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701320599100/d55fd96b-98a8-45c3-a299-e7b047be2bfa.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701320612752/979ad7b2-5668-46de-90c7-7c607615cc4f.png align="center")
The difference between `:where() and :is()` is that :where() always has 0 specificity
## **Intrinsic Sizing**
One way of sizing an element depends on its **content size** and using **fixed values** for the width or height of an element.
**Min Content**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701320714208/ff52fc99-c13d-4538-87b7-064d7b4d93c8.png align="center")
**Max Content**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701320759891/2e8b916c-f4f5-4104-bdb7-4e0815ff0e8f.png align="center")
**Fit Content**
%[https://codepen.io/nirazanbasnet/pen/poGxdoq]
```xml
A heading, block-element, with a fit content property
```
```css
h2 {
width: fit-content;
}
```
## **Adopting a Defensive Mindset**
Avoid a certain CSS issue or behavior from happening.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701352001286/1fd06155-8764-46a6-94de-9edc5c47a7eb.png align="center")
### **SPACING**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701352083456/42981181-993c-4af3-bac0-424ba31db1f6.png align="center")
To solve such problems use `text-overflow: ellipsis` property
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701352105719/e956a8c7-ebeb-4539-af0e-52df9e6e9efa.png align="center")
### **Lock Scrolling Chaining**
Ever experienced that moment when you open a modal, start scrolling, and suddenly find yourself scrolling the content underneath the modal (aka the body element) once you reach the end? That, my friend, is what we call scroll chaining.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701352326762/d240bf31-c236-46aa-aa40-592fb273469f.png align="center")
### **Using** `flex, flex-col & overflow` **for dynamic height**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701352459068/1bce4fa6-80c3-48e6-802d-c3cbde5f5aaf.png align="center")
### **Vertical Media Queries**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701352558363/a98ee366-8644-4078-9e16-d6257fac00e4.png align="center")
We can solve the issue by Use `position: sticky` property.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701352586086/6d261303-1450-4dba-9093-a2a9599dcd07.png align="center")
### **Parent relative** `position: fixed`
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701352625343/bcdbf6c4-ea23-4803-94ad-41dc690fafdd.png align="center")
A better approach using `max-width: inherit`
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701352652782/364f2404-288f-4898-ae66-d04ccc30d448.png align="center")
> Note - Just do not use `left` and `right` property
## **Some of the Conditional CSS**
Using `:empty` selector
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701352779144/dd0aa22e-36c9-41c1-89c6-be31cc9fe22c.png align="center")
Using `@media (hover: hover)`
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701352800876/bb85e34f-77c0-436d-8da8-5da4f29f5f47.png align="center")
the `hover style will only work` when the user is using a tool device like a mouse or a trackpad.
### **Flexbox Wrapping**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701352838292/068b17fa-be8c-4c14-82d2-390bd56d3d23.png align="center")
### **The** `:focus-within` **Pseudo-Class**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701352860247/c33bc879-6f52-4f47-aba2-02eeb031214c.png align="center")
### **The** `:not` **Selector**
This pseudo-class functions by excluding elements that don't match a specific selector. For instance, it proves handy when you want to verify if an item is the last one and, if so, remove the border.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701352883754/3880bac8-6c99-4062-a504-d4671cfbb3b5.png align="center")
### **Using** `Justify-Content: Space-Between`
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701352913857/7cf551f6-b01b-4e3c-922a-16a6a9955582.png align="center")
When the number of items is less than four, here is what will happen.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701352959442/6f56629c-bd7d-401d-b2f6-5c734a06a322.png align="center")
### **Scrollbar Gutter**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701353005718/4f80d2a2-fbf1-48a3-99a0-76ccb0d88e19.png align="center")
After using the `scrollbar-gutter` property.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701353021381/256cb027-7a80-450c-beca-9435df4b6b64.png align="center")
### **CSS Markers**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701353049810/7afa5139-c838-4cb9-931e-6e4512fc659f.png align="center")
---
### Summary
In a nutshell, coding like a pro in CSS is all about staying in the loop! Keep tabs on the latest features and specs, dive into articles on best practices, and make friends with MDN web docs for handy references. Don't shy away from peeking into others' code on platforms like Codepen and Awwwards for some cool insights.
Oh, and don't forget to embrace your inner explorer so, hop on the CSS adventure and let your coding journey shine! 🚀
Keep on Hacking, Cheers.