Öncelikle kodun çok karışık, refaktör etmeni tavsiye ederim. Fakat bu kod ile devam edeceksen aşağıdakine yakın bir yöntem deneyebilirsin.

result += '<div class="checkbox category"><label><input type="checkbox" class="mr-2" name="kategori[]" value="'+value.kategori_id+'">'+value.kategori_adi+'</label></div>';

Yukarıdaki satırdaki en dıştaki dive, ilgili kategorinin sınıfının adını ekle. (tabi gelen kategori verisinde 'kategori_id' ve 'kategori_adi' sütunlarının yanında bir de 'sinif_adi' şeklinde bir sütun bulunmalı)

result += '<div class="checkbox category '+value.sinif_adi+'"><label><input type="checkbox" class="mr-2" name="kategori[]" value="'+value.kategori_id+'">'+value.kategori_adi+'</label></div>';

Yukarıdaki gibi yaptıktan sonra.

if(this.checked) {
    //..
    //.. AJAX kodların
    //..
}else {
    $("#categoryList div."+this.value).remove();
}

Else bloğu yardımıyla uncheck olan sınıfa ait kategorileri silebilirsin.

Bence taglar için ayrı bir tablo yapma, yazıları tuttuğun tabloda yazılara ait bilgileri tuttuğun sütunların yanına bir de tags diye bir varchar dizgi sütunu ekle. siteadi.com/tags/deneme-tag şeklinde dinamik bir adrese istekte bulunulduğunda da SELECT * FROM yazilar WHERE FIND_IN_SET('deneme-tag', tags) şeklinde sorgu yap ve postları listele.

İkinci soruna gelecek olursak, kullanıcının tag belirlemesine sınırlamalar koyabilirsin, örneğin Prototürk'teki gibi kullanıcını bir listeden belli tagları seçmelerini sağlayabilirsin, ya da girdiği tagı URL friendly bir biçime çevirip öyle sütuna eklersin. Örneğin girilen taglardan bir tanesi Deneme Tag olsun önce bunu kebab-case e çevirelim(bir fonksiyon yardımıyla) deneme-tag şekline dönüştü. Tabloya bu şekilde eklersen URL sıkıntısı da ortadan kalkmış olur.

Kebab-case fonksiyonunu da şu şekilde yapabilirsin. Fonksiyona gelen değere şu işlemleri uygula küçük harflere çevir, Türkçe karakterleri İngilizce karakterlerle değiştir, boşluk yerlerine "-" ekle ve çağrıldığı yere döndür.
Örneğin: "Öğretmenler Günü" > "öğretmenler günü" > "ogretmenler gunu" > "ogretmenler-gunu" şeklinde. Tabi bu çok basit bir fonksiyon. Internette bulacağın fonkisyonlar farklı durumlar için farklı çıktılar verebilir, bu durumları göz önünde bulundurarak daha farklı tablolama işlemleri de yapabilrsin.

Örneğin fonksiyonumuz Test123 > test-123 şekline çevirdi. Fakat aynı fonksiyon test 123 değerini de test-123 e çeviriyor. Burada bu iki tagı da istiyorsak şöyle bir yol izleyebilirsin, kebab-case olarak tutulacakları tagSlugs diye bir sütuna ekle, normal yazıldıkları gibi tutulacakları da tagSlugs sütununa ekle. Sorgu işlemlerinde tags sütununu kullanırsın ama herhangi bir tagı kullanıcıya gösterirken tags sütunundaki aynı index numarasındaki veriyi gösterirsin.

Anlaşılacak üzere, farklı senaryolar için farklı çözümler geliştirmek gerekiyor. Sana en uygun çözüm ve senaryo hangisiyse ona göre geliştirmeye devam etmelisin.

İyi günler, iyi çalışmalar dilerim.

Bilgisayarına bağlandığımda ne görmem gerekiyorsa onun resmini buraya atabilirsin güzel kardeşim. Hem bu problem benim bilmediğim bir konuyla ilgili de olabilir, bir fotoğraf ya da hata metni atarsan, daha fazla insanın sorunun çözümüne katkısı olacaktır.

Öncelikle HTML iskeletini doğru bir şekilde çıkarmanı tavsiye ederim. Tasarım bir yerde çiziliyse zaten kolay, ne nereye gelecek görüyorsun. Ama ortada çizilmiş bir tasarım yoksa (pdf, sketch, figma vs.), tasarımı da kendin yapıyorsan önce bir gözünü kapa ve ne nereye gelecek kararlaştır, daha sonra divler ile veya Semantic Elementler yardımıyla bir iskelet oluştur.

Örneğin Prototürk'ü ele alalım (web için). Üst tarafta bir header var, solda bir sidebar var ve geri kalan alan da içerik kısmı. Bunu nasıl bölümlere ayırmalıyız diye kendimize sormalıyız. Öncelikle header'ı bir header etiketi içerisinde ekleyelim içerisine de logo için, arama kutusu için ve profil seçenekleri için divler yerleştirelim. Şimdi sırada sidebar ve içerik kısmı var. Bu ikisini beraber bir element içerisine almak daha mantıklı olacaktır. Örneğin Prototürk'te main etiketi içerisine alınmış, sidebar da aside etiketi içerine alınmış, geriye kalan içerik kısmı ise div.content etiketi içerisine alınmış ve main etiketine display: flex verilerek bu iki element yan yana getirilmiş, ayrıca main yüksekliği de calc yardımıyla 100vh - 60px (header'in yüksekliği) olarak atanmış. Sen de kendi tasarımına göre böyle basit bir iskelet oluşturduktan sonra geri kalan kısımları tamamlaman hem daha kolay olur hem de varsa takım arkadaşların tarafından kodun ortak bir paydada okunabilirliğini artırır, hata çözümlerini kolaylaştırır.

Bunları anlatıyorum çünkü her şey CSS değil. Biliyorum sen CSS için soru sormuşsun fakat bu tarz küçük detayları da atlamadan geliştirmeye devam edersen, CSS yazman da kolaylaşacaktır.

Biz de münecciniz kardeşim, bi ekran resmi falan atsan da yardımcı olsak ha?

Hammer.js'e bakmanı tavsiye ederim. Sanırım istediğine yakın örnekleri mevcut.

Resmi görüntüleyemiyorum maalesef, sorunu hala çözemediyseniz yeni bir konu açmanızı tavsiye ederim.

.div {
  width: 100px;
  height: 100px;
  transition: 500ms border-color;
  text-align: center;
  line-height: 100px;
  margin: 50px;
  color: white;
  border-bottom: 2px solid;
  border-color: transparent;
  background: gray;
}

.div:hover {
  border-color: red;
}

Şöyle bir trick deneyebilirsin.