[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"header-categories":3,"post-modern-css-features-using-today":73,"parsed-post-ed43ab5f-e3b3-45ce-8d45-9c984dc894a2":142},{"success":4,"data":5},true,{"items":6,"pagination":70},[7,16,24,32,40,48,56,63],{"id":8,"name":9,"description":10,"parentId":11,"createdAt":12,"updatedAt":12,"parent":11,"children":13,"_count":14},"ai-future","AI & The Future","Artificial intelligence and emerging technology",null,"2026-07-24T06:02:45.990Z",[],{"posts":15},1,{"id":17,"name":18,"description":19,"parentId":11,"createdAt":20,"updatedAt":20,"parent":11,"children":21,"_count":22},"tools-productivity","Tools & Productivity","Developer tools and workflow optimization","2026-07-24T06:02:45.712Z",[],{"posts":23},7,{"id":25,"name":26,"description":27,"parentId":11,"createdAt":28,"updatedAt":28,"parent":11,"children":29,"_count":30},"career","Career & Growth","Professional development for developers","2026-07-24T06:02:45.486Z",[],{"posts":31},3,{"id":33,"name":34,"description":35,"parentId":11,"createdAt":36,"updatedAt":36,"parent":11,"children":37,"_count":38},"opinion","Opinion & Analysis","Industry analysis and technical opinions","2026-07-24T06:02:45.272Z",[],{"posts":39},6,{"id":41,"name":42,"description":43,"parentId":11,"createdAt":44,"updatedAt":44,"parent":11,"children":45,"_count":46},"tutorials","Tutorials","Step-by-step learning guides","2026-07-24T06:02:44.965Z",[],{"posts":47},21,{"id":49,"name":50,"description":51,"parentId":11,"createdAt":52,"updatedAt":52,"parent":11,"children":53,"_count":54},"software-engineering","Software Engineering","Best practices, patterns, and principles","2026-07-24T06:02:44.689Z",[],{"posts":55},24,{"id":57,"name":58,"description":59,"parentId":11,"createdAt":60,"updatedAt":60,"parent":11,"children":61,"_count":62},"devops-cloud","DevOps & Cloud","Infrastructure, deployment, and cloud computing","2026-07-24T06:02:44.453Z",[],{"posts":39},{"id":64,"name":65,"description":66,"parentId":11,"createdAt":67,"updatedAt":67,"parent":11,"children":68,"_count":69},"web-development","Web Development","Frontend and backend web development tutorials and guides","2026-07-24T06:02:44.169Z",[],{"posts":55},{"page":15,"limit":71,"total":71,"totalPages":15,"hasNext":72,"hasPrev":72},8,false,{"success":4,"data":74},{"id":75,"slug":76,"title":77,"excerpt":78,"content":79,"status":80,"visibility":81,"featuredImage":82,"canonicalUrl":11,"readingTime":71,"viewCount":83,"commentEnabled":4,"publishedAt":84,"scheduledAt":11,"createdAt":85,"updatedAt":86,"seoTitle":87,"seoDescription":78,"seoKeywords":11,"authorId":88,"author":89,"coAuthors":94,"tags":95,"categories":106,"comments":109,"_count":110,"relatedPosts":112},"ed43ab5f-e3b3-45ce-8d45-9c984dc894a2","modern-css-features-using-today","Modern CSS: Features You Should Be Using Today","CSS has evolved dramatically. Explore nesting, :has(), container queries, cascade layers, and other modern features with excellent browser support.","## CSS Is No Longer \"Just Styling\"\n\nModern CSS is a powerful, declarative programming language. Many patterns that once required JavaScript or preprocessors are now native.\n\n## Native Nesting\n\nNo more Sass just for nesting:\n\n```css\n.card {\n  padding: 1rem;\n  border-radius: 0.5rem;\n\n  & .title {\n    font-size: 1.25rem;\n    font-weight: bold;\n  }\n\n  &:hover {\n    box-shadow: 0 4px 12px rgb(0 0 0 \u002F 0.1);\n  }\n\n  @media (width >= 768px) {\n    padding: 2rem;\n  }\n}\n```\n\n## The :has() Selector (Parent Selector!)\n\nCSS can now select parents based on children:\n\n```css\n\u002F* Style a form group that contains an invalid input *\u002F\n.form-group:has(input:invalid) {\n  border-color: red;\n}\n\n\u002F* Style a card differently if it has an image *\u002F\n.card:has(img) {\n  grid-template-rows: 200px 1fr;\n}\n\n\u002F* Change nav style when a dropdown is open *\u002F\nnav:has(.dropdown[open]) {\n  background: var(--nav-active-bg);\n}\n```\n\n::callout{icon=\"i-lucide-sparkles\" color=\"success\"}\n`:has()` is the most powerful CSS selector ever added. It eliminates the need for JavaScript-based \"parent has class\" patterns entirely.\n::\n\n## Cascade Layers\n\nControl specificity without fighting it:\n\n```css\n@layer base, components, utilities;\n\n@layer base {\n  a { color: blue; }\n}\n\n@layer components {\n  .nav a { color: white; }  \u002F* Wins over base regardless of specificity *\u002F\n}\n\n@layer utilities {\n  .text-red { color: red !important; }  \u002F* Wins over everything *\u002F\n}\n```\n\n## Logical Properties\n\nWrite direction-agnostic CSS:\n\n```css\n\u002F* ❌ Physical — breaks in RTL languages *\u002F\n.element {\n  margin-left: 1rem;\n  padding-right: 2rem;\n  border-top: 1px solid;\n}\n\n\u002F* ✅ Logical — works in any writing direction *\u002F\n.element {\n  margin-inline-start: 1rem;\n  padding-inline-end: 2rem;\n  border-block-start: 1px solid;\n}\n```\n\n## View Transitions\n\nPage transitions without JavaScript frameworks:\n\n```css\n@view-transition {\n  navigation: auto;\n}\n\n.hero-image {\n  view-transition-name: hero;\n}\n\n::view-transition-old(hero) {\n  animation: fade-out 0.3s ease;\n}\n\n::view-transition-new(hero) {\n  animation: fade-in 0.3s ease;\n}\n```\n\n## Subgrid\n\nChildren align to parent grid tracks:\n\n```css\n.grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 1rem;\n}\n\n.card {\n  display: grid;\n  grid-template-rows: subgrid;\n  grid-row: span 3; \u002F* Participate in 3 parent rows *\u002F\n}\n```\n\n## Check Support\n\n```css\n@supports (selector(:has(*))) {\n  \u002F* Use :has() *\u002F\n}\n\n@supports not (selector(:has(*))) {\n  \u002F* Fallback *\u002F\n}\n```\n\nCSS is more powerful than ever. Check caniuse.com and start using these features — most have 90%+ browser support.\n","published","public","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1587620962725-abab7fe55159?w=1200&q=80",1446,"2026-05-12T06:04:12.139Z","2026-07-24T06:04:12.142Z","2026-07-28T17:10:07.409Z","Modern CSS: Features You Should Be Using Today | BitBlog","fddb5d93-7a2c-4d86-a06a-fa32e73a01c6",{"email":90,"bio":91,"id":88,"name":92,"avatarUrl":93},"mbeahessilfieprince@gmail.com","Fullstack Software Developer ","Mbeah Essilfie","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F93322394?v=4",[],[96,101],{"id":97,"name":98,"color":99,"description":100},"css","CSS","#1572b6","Cascading Style Sheets",{"id":102,"name":103,"color":104,"description":105},"tailwind","Tailwind CSS","#06b6d4","Utility-first CSS framework",[107,108],{"id":64,"name":65,"description":66},{"id":41,"name":42,"description":43},[],{"comments":111},0,[113,122,132],{"id":114,"slug":115,"title":116,"excerpt":117,"featuredImage":118,"viewCount":119,"readingTime":71,"publishedAt":120,"author":121},"2997028f-4d22-4eb7-9d86-894a54cb559a","building-type-safe-apis-nuxt3-prisma","Building Type-Safe APIs with Nuxt 3 and Prisma","Learn how to build end-to-end type-safe APIs using Nuxt 3 server routes and Prisma ORM for a seamless developer experience.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1498050108023-c5249f4df085?w=1200&q=80",1922,"2026-07-23T06:02:46.910Z",{"id":88,"name":92,"avatarUrl":93},{"id":123,"slug":124,"title":125,"excerpt":126,"featuredImage":127,"viewCount":128,"readingTime":129,"publishedAt":130,"author":131},"da9e4553-8b0d-411e-b4ec-f9684017e163","mastering-tailwind-css-design-systems","Mastering Tailwind CSS: From Utility Classes to Design Systems","Go beyond basic utility classes and learn how to build cohesive, maintainable design systems with Tailwind CSS.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1555066931-4365d14bab8c?w=1200&q=80",257,10,"2026-07-21T06:02:49.268Z",{"id":88,"name":92,"avatarUrl":93},{"id":133,"slug":134,"title":135,"excerpt":136,"featuredImage":137,"viewCount":138,"readingTime":139,"publishedAt":140,"author":141},"50add5fc-4026-4267-b917-7f71ea9e35b0","complete-guide-vue3-composables","The Complete Guide to Vue 3 Composables","Understand the power of Vue 3's Composition API through practical, real-world composable patterns that you can use today.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1517694712202-14dd9538aa97?w=1200&q=80",990,12,"2026-07-19T06:02:51.753Z",{"id":88,"name":92,"avatarUrl":93},{"data":143,"body":145,"toc":328},{"title":144,"description":144},"",{"type":146,"children":147},"root",[148,157,163,169,174,186,198,203,211,228,234,239,247,253,258,266,272,277,285,291,296,304,310,318,323],{"type":149,"tag":150,"props":151,"children":153},"element","h2",{"id":152},"css-is-no-longer-just-styling",[154],{"type":155,"value":156},"text","CSS Is No Longer \"Just Styling\"",{"type":149,"tag":158,"props":159,"children":160},"p",{},[161],{"type":155,"value":162},"Modern CSS is a powerful, declarative programming language. Many patterns that once required JavaScript or preprocessors are now native.",{"type":149,"tag":150,"props":164,"children":166},{"id":165},"native-nesting",[167],{"type":155,"value":168},"Native Nesting",{"type":149,"tag":158,"props":170,"children":171},{},[172],{"type":155,"value":173},"No more Sass just for nesting:",{"type":149,"tag":175,"props":176,"children":180},"pre",{"className":177,"code":178,"language":97,"meta":144,"style":179},"language-css",".card {\n  padding: 1rem;\n  border-radius: 0.5rem;\n\n  & .title {\n    font-size: 1.25rem;\n    font-weight: bold;\n  }\n\n  &:hover {\n    box-shadow: 0 4px 12px rgb(0 0 0 \u002F 0.1);\n  }\n\n  @media (width >= 768px) {\n    padding: 2rem;\n  }\n}\n","undefined",[181],{"type":149,"tag":182,"props":183,"children":184},"code",{"__ignoreMap":144},[185],{"type":155,"value":178},{"type":149,"tag":150,"props":187,"children":189},{"id":188},"the-selector-parent-selector",[190,192,196],{"type":155,"value":191},"The ",{"type":149,"tag":193,"props":194,"children":195},"has",{},[],{"type":155,"value":197},"() Selector (Parent Selector!)",{"type":149,"tag":158,"props":199,"children":200},{},[201],{"type":155,"value":202},"CSS can now select parents based on children:",{"type":149,"tag":175,"props":204,"children":206},{"className":177,"code":205,"language":97,"meta":144,"style":179},"\u002F* Style a form group that contains an invalid input *\u002F\n.form-group:has(input:invalid) {\n  border-color: red;\n}\n\n\u002F* Style a card differently if it has an image *\u002F\n.card:has(img) {\n  grid-template-rows: 200px 1fr;\n}\n\n\u002F* Change nav style when a dropdown is open *\u002F\nnav:has(.dropdown[open]) {\n  background: var(--nav-active-bg);\n}\n",[207],{"type":149,"tag":182,"props":208,"children":209},{"__ignoreMap":144},[210],{"type":155,"value":205},{"type":149,"tag":212,"props":213,"children":216},"callout",{"color":214,"icon":215},"success","i-lucide-sparkles",[217],{"type":149,"tag":158,"props":218,"children":219},{},[220,226],{"type":149,"tag":182,"props":221,"children":223},{"className":222},[],[224],{"type":155,"value":225},":has()",{"type":155,"value":227}," is the most powerful CSS selector ever added. It eliminates the need for JavaScript-based \"parent has class\" patterns entirely.",{"type":149,"tag":150,"props":229,"children":231},{"id":230},"cascade-layers",[232],{"type":155,"value":233},"Cascade Layers",{"type":149,"tag":158,"props":235,"children":236},{},[237],{"type":155,"value":238},"Control specificity without fighting it:",{"type":149,"tag":175,"props":240,"children":242},{"className":177,"code":241,"language":97,"meta":144,"style":179},"@layer base, components, utilities;\n\n@layer base {\n  a { color: blue; }\n}\n\n@layer components {\n  .nav a { color: white; }  \u002F* Wins over base regardless of specificity *\u002F\n}\n\n@layer utilities {\n  .text-red { color: red !important; }  \u002F* Wins over everything *\u002F\n}\n",[243],{"type":149,"tag":182,"props":244,"children":245},{"__ignoreMap":144},[246],{"type":155,"value":241},{"type":149,"tag":150,"props":248,"children":250},{"id":249},"logical-properties",[251],{"type":155,"value":252},"Logical Properties",{"type":149,"tag":158,"props":254,"children":255},{},[256],{"type":155,"value":257},"Write direction-agnostic CSS:",{"type":149,"tag":175,"props":259,"children":261},{"className":177,"code":260,"language":97,"meta":144,"style":179},"\u002F* ❌ Physical — breaks in RTL languages *\u002F\n.element {\n  margin-left: 1rem;\n  padding-right: 2rem;\n  border-top: 1px solid;\n}\n\n\u002F* ✅ Logical — works in any writing direction *\u002F\n.element {\n  margin-inline-start: 1rem;\n  padding-inline-end: 2rem;\n  border-block-start: 1px solid;\n}\n",[262],{"type":149,"tag":182,"props":263,"children":264},{"__ignoreMap":144},[265],{"type":155,"value":260},{"type":149,"tag":150,"props":267,"children":269},{"id":268},"view-transitions",[270],{"type":155,"value":271},"View Transitions",{"type":149,"tag":158,"props":273,"children":274},{},[275],{"type":155,"value":276},"Page transitions without JavaScript frameworks:",{"type":149,"tag":175,"props":278,"children":280},{"className":177,"code":279,"language":97,"meta":144,"style":179},"@view-transition {\n  navigation: auto;\n}\n\n.hero-image {\n  view-transition-name: hero;\n}\n\n::view-transition-old(hero) {\n  animation: fade-out 0.3s ease;\n}\n\n::view-transition-new(hero) {\n  animation: fade-in 0.3s ease;\n}\n",[281],{"type":149,"tag":182,"props":282,"children":283},{"__ignoreMap":144},[284],{"type":155,"value":279},{"type":149,"tag":150,"props":286,"children":288},{"id":287},"subgrid",[289],{"type":155,"value":290},"Subgrid",{"type":149,"tag":158,"props":292,"children":293},{},[294],{"type":155,"value":295},"Children align to parent grid tracks:",{"type":149,"tag":175,"props":297,"children":299},{"className":177,"code":298,"language":97,"meta":144,"style":179},".grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 1rem;\n}\n\n.card {\n  display: grid;\n  grid-template-rows: subgrid;\n  grid-row: span 3; \u002F* Participate in 3 parent rows *\u002F\n}\n",[300],{"type":149,"tag":182,"props":301,"children":302},{"__ignoreMap":144},[303],{"type":155,"value":298},{"type":149,"tag":150,"props":305,"children":307},{"id":306},"check-support",[308],{"type":155,"value":309},"Check Support",{"type":149,"tag":175,"props":311,"children":313},{"className":177,"code":312,"language":97,"meta":144,"style":179},"@supports (selector(:has(*))) {\n  \u002F* Use :has() *\u002F\n}\n\n@supports not (selector(:has(*))) {\n  \u002F* Fallback *\u002F\n}\n",[314],{"type":149,"tag":182,"props":315,"children":316},{"__ignoreMap":144},[317],{"type":155,"value":312},{"type":149,"tag":158,"props":319,"children":320},{},[321],{"type":155,"value":322},"CSS is more powerful than ever. Check caniuse.com and start using these features — most have 90%+ browser support.",{"type":149,"tag":324,"props":325,"children":326},"style",{},[327],{"type":155,"value":144},{"title":144,"searchDepth":329,"depth":329,"links":330},2,[331,332,333,335,336,337,338,339],{"id":152,"depth":329,"text":156},{"id":165,"depth":329,"text":168},{"id":188,"depth":329,"text":334},"The () Selector (Parent Selector!)",{"id":230,"depth":329,"text":233},{"id":249,"depth":329,"text":252},{"id":268,"depth":329,"text":271},{"id":287,"depth":329,"text":290},{"id":306,"depth":329,"text":309}]