Issue
When using TailwindCSS, the className field easily stretches on the right, making it hard to read and edit.
Here is an example:
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
A part of this most likely won't be visible if you have two windows on your editor.
Is there a VSCode or a CLI tool to indent this and improve readability?
Thanks!
Solution
- First thing is to keep classes in order from more external to internal. Like Margin > Width / Height > Border > Padding etc...
- Next step is to keep actions like :hover :visited after all from default state of element
- Third step is to keep custom classes that are out of framework / core after all previous
- And at end of class snake people keep classes which only purpose is to be js anchor (its not like i recommed it but see it quite often)
Many people don't like next step but from time to time you can see people keep long class / style list in vertical layout
In my opinion its way better for long elements to read classes but also cost a few bytes, and it make you see less of code at same time.
<html>
<body>
<div className="
group
rounded-lg
border
border-transparent
px-5
py-4
transition-colors
hover:border-gray-300
hover:bg-gray-100
hover:dark:border-neutral-700
hover:dark:bg-neutral-800/30
"
>
Content
</div>
</body>
</html>
Worst way would be mix it like:
<html>
<body>
<div className="
group
rounded-lg border border-transparent
px-5 py-4
transition-colors
hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30
"
>
Content
</div>
</body>
</html>
Imo. its worst cause some lines can get wraped if they are too long and it would mess hierarchy.
Answered By - Damian ChudobiĆski
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.