Order and grouping of classes within the Markup

[terryupton]

Not necessarily TW specific, but does anyone have specific rules as to the order you write your TW classes within the markup? Or any preferences on this? to make easier to digest? e.g alphabetically, mobile first, group - layout or visual classes or all rw:classes

i.e

class="sm:w-full // md:w-1/2 // lg:w-auto //// mb-4 // mr-4 // pr-4 //// text-grey // text-lg" 

It’s hard to be consistent when you are pro-trying/playing so it might be one that needs to be refactored, once blocks are completed.

I tend to group certain classes into spacing (margin/padding), typography, mobile first for structure. I know it is down to personal preference to some degree. Personally I find adding in the // helps, it is something I have done for a while now and it does make the classes more readable. Using TW I have thought to have the //// to split the different groupings.

edit: a link regarding this grouping from Harry Roberts. https://csswizardry.com/2014/05/grouping-related-classes-in-your-markup/

An example based on the article above.

class="[sm:w-full // md:w-1/2 // lg:w-auto]  [mb-4 // mr-4 // pr-4]  [text-grey // text-lg]" 

[taylorbryant]

I normally group them alphabetically (prefixes not included).

<!-- Example -->
<div class="max-w-md mx-auto px-4 md:px-8 py-8 md:py-16 text-center"></div>

I write my CSS alphabetically, so it just felt natural. However, it can quickly look like spaghetti after a few days of not touching the files. I'm curious to see how others do this too 🤔.

[hacknug]

I personally do it in a similar way to the one described in this site: http://codeguide.co/#css-declaration-order

Here's an example with some of the differences. Special classes refers to classes you'd abstract with @apply or the one's you'd use to target elements via js.

.declaration-order {
  /* Special Classes */

  /* Clearfixes and Floats */
  float: right;

  /* Positioning */
  z-index: 100;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* Box-model */
  display: block;
  justify-content: center;
  align-items: center;
  flex-basis: 100px;
  width: 100px;
  height: 100px;

  margin: 0;
  padding: 1rem;

  /* Color */
  color: #333;
  background-color: #f5f5f5;

  /* Typography */
  font-family: "Helvetica Neue", sans-serif;
  font-size: 13px; 
  line-height: 1.5;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;

  /* Visual */
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

[ccapndave]

This is very nice - what would be even nicer is if the Tailwind compiler could export a file that listed all available utility classes along with their "tags". This can be used for whatever (and would be defined by the plugin), but one potential use would be categorising utility classes into "positioning", "color", "typography", etc. Then a simple formatter in an IDE (or whatever) could read this file and use it to automatically order the classes into some order.

On the other hand, it might not be worth the hassle. Just a thought :)

[hacknug]

@ccapndave if you're using VSCode, check this extension. It might end up getting linting capabilites at some point in the near(ish?) future as teased in this tweet.

[ccapndave]

I'm using it already and its great :) Although the video in the tweet doesn't have any ordering I guess in order to get this kind of linting they will have to parse the tags and figure out what category they are in so ordering could be built on top of that.

[dakshshah96]

I've been using Headwind for some time and love it!

Headwind is an opinionated Tailwind CSS class sorter for Visual Studio Code. It enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.

https://github.com/heybourn/headwind