![]() ![]() ![]() Note that this is written from someone working on a large codebase, with 15+ developers contributing continuously to said code.ĭemocratic: Picking alphabetical order means that someones arbitrary preferences doesn’t get picked (See also the last point below).Ĭonsistency: Using the same order across the entire codebase makes the code predictable, and makes it easy to find specific values once you learn where to look.Įasily automated: If you are using Stylelint you can enforce the ordering with the help of the stylelint-order plugin. At least imo.Īs I have a blogpost in the drafts-folder about this very topic, here’s my little list of the benefits of using alphabetical order. Way out of alphabetical order, but much easier for the brain to understand in a more scaffolded way when reading back. “Oh, I need a flex container with space-between justification and a gap” -> display: flex justify-content: space-between gap: 1rem. I like your idea of just listing things as they kind of dump out of your brain, because I think the brain kind of naturally organizes by order of importance. And I’ll often even keep the properties that are changed by an animation or transition close by, such as transform or opacity. I also group things like animation and transition together, since they’re related yet separated quite far from each other in the alphabet. display: flex align-items: center, or position: sticky top: 0 (even though that one’s alphabetical lol). The convention I’ve landed on is to roughly list properties in order of dependence or relevance. So as I, or someone else on my team, look through a ruleset, I just feel like there’s more cognitive overhead keeping track of which properties act in tandem together to achieve a certain effect. Like, align-items is meaningless apart from a grid or flex, and with alphabetization, there are the other As as well as B and C properties between that and display. I tried to go with the alphabetization approach on a large project, and one big problem I’ve found with it is that it often leads to difficulty when reading the code again, because your eyes have to jump across the ruleset to try to figure out what the cumulative effect may be of a number of interrelated properties. ![]() Alphabetizing is a task for computers to do and the output can be verified as you are authoring. If you and your team agree this is a good idea, I’d find a way to get this into an on-save function in your code editor and make it a pre-commit hook. Worse, it might break stuff if done blindly, which is why Prettier punted on it. Not going to argue against that, but I would argue that hand-alphabetizing CSS on an existing project is very likely not a good use of time. This ask is usually enough, especially if it means cleaning up what’s come before.Īnd his (probably bigger) point is that the imparted structure helps legitimize CSS in a world where CSS skills are undervalued. it imposes a baseline sense of structure across a team. Eric recommends the alphabetical approach because: But that is strongly influenced by typically working on small teams or alone. I tend to group them by whatever dumps out of my brain as I’m writing them, which usually ends up with somewhat logical groups, like box model stuff grouped together and color stuff grouped together. The most common CSS declaration organization technique I come across is none whatsoever.Īlmost none, anyway. ![]() Eric, again not mincin’ no words with blog post titles. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |