Request : CSS alphabetical order sorting

A time saver feature would be to have an alphabetical ordering button (and why not by Date also - for recent in top list).
Would be so great with tremendous .classes to order them in one click (especially for those who name .classes “semantically”
Eg :

  • head-h1
  • head-p-1
  • head-p-2
  • bloc1-abc
  • bloc2-efg
  • bloc3-etc
    or
  • h1-abc
  • h1-def
  • h2-abc
  • h3-etc

Rather than havin to dragging them one by one :sleepy:

2 Likes

I agree. I would also like this applied to the class library manager in Blocs Plus.

3 Likes

I’m not sure how blocs handles the classes in the class manager when it comes to exporting. But keep in mind that it’s called “CASCADING Style Sheet” for a reason. While it might be appealing to have them sorted alphabetically, when exported, that might not necessarily be the best option :wink:

2 Likes

I agree with @pumpkin, arranging the order alphabetically could cause you override issues. CSS is not alphabetical it uses order of importance and specificity.

Many people in the trade stick with a naming system like BEM.

I have a somewhat similar system when using blocs (usually, sometimes I get lazy). And then apply search in the class manager is easy.

Basic eg.

.feature .card
.feature .card-body
.feature .card-footer

Then I can search just “feature” to find related classes no matter when I add them, and also I then only have to add one class to a card to style the whole thing with the adjustments I want for a feature card. Easy. IMO.

But many ways to do it. I find this works easiest in Blocs for me, and I bring it also into the css input zone. I do have other methods for other build processes I’ll use underscores and prefixes.

Good naming conventions can resolve override issues naturally and are useful if you’re in a team environment or you come back to a project months or years later. Not to mention apply site wide changes being easier.

NOTE: I found after helping many blocs users, that sometimes an unexplained issue is a rogue class and style because they haven’t renamed freehand classes or have used a lot of unnecessary classes. There is a logic to apply here to make it easier on yourselves.

2 Likes

I think Norm tweaked the class library manager so that all the classes were in alphabetical order, but that seems to be broken since adding new classes lately. All of mine are in alphabetical order apart from one added last week that has appeared right at the end, where it would otherwise have been in the middle.

1 Like

Yeah you’re right about exporting (even not sure it must be in a defined order after exporting) ; btw that doesn’t not stop to get alphabetical (+ date ?) ordered in the app before publishing/compiling…

Thought : ok there is the searcvh by words, but so great to get a clear view for a net .classes structuration, as time saver (personnaly…)

If there is the possibility to sort them by drag and drop, not sure you’re right ; and for sure why not also bay date or alpha ?

.classes presentation in the app viewport and .css compilation are two different things…

This said, if those function arn’t already exisiting, may I’m wrong, and this is indeed very complicated with compilation (especially with tremendous .classes and re-nomination etc.

Maybe read the manual. Reordering is an option to resolve order of class importance preventing unwanted style overrides.

Which is why you can also do it by breakpoint, for the media queries.

https://help.blocsapp.com/knowledge-base/class-manager/#reorder-classes

Pete,
Maybe I didn’t wrote well (sorry no fluent), but you stay on the idea that .classes would be sorted AFTER publication (compilation) ;
My purpose was that it can be sorted as we want using the app, without modifying anything after publication/compilation (thus keeping the good/seo/standard/etc).
Btw nothing very important. :slight_smile:

Doesn’t change your misunderstanding in your original post regarding reordering by alphabet. That’s not what that tool is for. I would suggest if you are making commercial websites to study up on CSS and how it works, the order is important.

Maybe a toggle to show a sorted list has merit :+1:. But you still need to see them in the order they will be listed in the css file.

The search box is really handy. Especially if you use a good method in class creation. I use this all the time, much quicker than scrolling an alphabetical list.

I do wish the search filter was persistent though :grin:

I disagree with you with absolutely all point :slight_smile:

I also miss the alphabetical order to keep track of what I have and edit their values. But this would cause problems and errors in the cascading structure.

The ideal solution would be to present the classes in alphabetical order in the main tab (Edit value of the classes), with no effect in the actual order. And to write the classes accordingly with the order set in each of the screen size tabs (Edit order of the classes).