Improve your CSS by organizing your properties

Подписаться 908 тыс.

Просмотров 54 тыс.

50% 1

Also, at the end of the day, the method you use to organize your properties doesn't really matter, but having a method will really help. I don't like alphabetical, but it's better than not having anything, and a lot of smarter people than me really seem to like it!
🔗 Links
✅ The Twitter discussion: / 1426257025663709190
✅ An argument for the alphabetical approach by Scott O'Hara: modernweb.com/ordering-css/
⚠ Someone shared a GitHub repo with me a while back that had a documented way to organize CSS properties within rules, and it's why I added this to my to-do list of videos. If you made that, or know the repo, please let me know so I can add the link here! (DM on Twitter or ping me on my Discord is best).
⌚ Timestamps
00:00 - Introduction
00:43 - A look at alphabetical ordering
02:41 - Why I don't like alphabetical
04:43 - How I like to organize my rules
06:33 - Comparing it to alphabetical
09:08 - The issue with my approach
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

19 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 184

@KevinPowell 2 года назад

Someone shared a GitHub repo with me a while back that had a documented way to organize CSS properties within rules, and it's why I added this to my to-do list of videos. If you made that, or know the repo, please let me know so I can add the link here! (DM on Twitter or ping me on my Discord is best).

@muslimsrememberapostacyday556 2 года назад

I tried the alphabetical long time ago and it was horrible. But then I instead just have some few rules, everything color first, everything text second and everything margin/padding last, unless there is animation then that will be last. So I could definitely work some more on that and get it more organized, but there are very good reasons why i am not. I usually do not jump between specific rules. I jump between specific parts of code for different areas. Which is why it is much more important for me to group several different blocks of code logically, than it is to group it within a specific code block. So, naming your areas of code in CSS remarks telling what it is for, that is absolutely important, because you can use it to find an area of code using CTRL+F

@commenzator 2 года назад

I group everything according to function as well. It’s way more logical than alpha order.

@georgewoodman839 2 года назад

@@muslimsrememberapostacyday556 Your approach is pretty much opposite to mine haha.. I'm doing margins, paddings, widths etc first, then my inset values, positioning, typography, then colours and background properties at the end.. anything property that I use rarely go at the end. I think at the end of the day it's all personal preference and you have to do what works for you. My OCD goes wild when I'm handed a stylesheet from a colleague and the properties are all over the place 😂

@pascalkonings1981 2 года назад

Nice! Your setup is basically the setup I always use myself to keep my properties sorted logically. What is your process when organizing nested items in your SASS files?

@zsoltoroszlany7172 2 года назад

I'd appraciate a video where you speak about organizing/structuring CSS something like formating nav element, inside nav element an ul, li etc. Thank you

@igorswies5913 2 года назад

if you want your properties organized in a logical way, you do not have to do this manually, just configure prettier and stylelint-config-property-sort-order-smacss and you will get automatic formatting that will order your properties in a logical way (display stuff, then margins etc). I haven't used this for a long time tho because property order hasn't been much of an issue for me

@FuzailShaikh 2 года назад

Wow i gotta try that

@joeldcanfield_spinhead 2 года назад

"automatic formatting that will order your properties in a logical way" Is it customizable, so it's logical to me?

@igorswies5913 2 года назад

@@joeldcanfield_spinhead I think you can install stylelint-order and write the order yourself also @Dhondup commented that you can install stylelint-config-rational-order but I haven't tried it

@georgewoodman839 2 года назад

Might have to try this out, I am always organising my style properties and have my own way of doing it.. but on occasion it can't get very time consuming when working on projects collaboratively

@uceraksu Год назад

There is a vs code extension called "css organizer" that does exactly this without any configuration. It even adds comments of Kevin's in this video. The moment i've watched this video i thought there should be a vs code extension for this and after a quick search i've found one. Grouping properties Kevin's way also helps learning css if you're a newbie.

@toonerjay 2 года назад

This is exactly how I've always liked to do it, with some minor differences - I group my box model stuff together as well, but I also order those properties working from the inside of the box out: I start with width/height, then padding, then border/border-radius, then margin, etc, helps me picture what's going on in the box at the same time

2 года назад

When I'm looking for the best practices of any approach, Kevin posts a video about the same topic. It's like magic :) I always organize my properties from positioning to display, alignment, spacing, and other styling rules like colors and borders, etc. I think it is easy to follow this pattern and also easy to understand to people who read my code. Thanks, Kevin!

@joeldcanfield_spinhead 2 года назад

I'm going to call the 'misc' section 'decoration' since it's about fancying things up.

@giocaonguyen 2 года назад

I usually try to organize my CSS with my experience, but your CSS organization rule is cleaner. Thank you so much for your sharing! It must be my CSS organization rule from now.

@pedroklepa 2 года назад

I haven't put much thought into how I separate my CSS but intuitively I have been using almost the same groups as you. The readability you get from such strategy is great and allows for much easier expansion work afterwards

@stevendu06 2 года назад

Glad I'm not the only one to sort my CSS properties like that! It almost gets me anxious if the display/position aren't at the top and the inset properties aren't grouped :D

@jennifermagpantay7933 2 года назад

Loved your way to organize the CSS. I have done something similar over the years but never felt 100% satisfied with that, always thinking that it could be better improved. Now, after your video, I have found all the answers and solutions I need!! Thanks again for that Kevin!

@svenrobert84 2 года назад

You make cool web-dev playlists. Kudos

@lucascyrne6301 2 года назад

I organize it so similarly! and I honest find it perfect since it suits me very well. Even when I was less experienced and made some spagetthi with the cascades and all of that, I still got a good mental map of the whole thing because of this simple css organization logic. Very good content!

@rajkiranchaudhary8769 2 года назад

Till now I was unaware of this technique. Thanks Kevin. Your video always teaches something new...

@MatthewWeiler1984 2 года назад

I've been doing it similar to your way for a while now... it just makes sense to me.

@pulserudeus7968 2 года назад

This is very helpful Kev🔥🔥🔥 Thank you for always giving valuable contents

@andrewt248 2 года назад

I organize very similarly-display stuff, z-index/positioning stuff, typography, background/manipulations, box model (ordered inside-out), scss nested media queries.

@stomperhk9107 2 года назад

Yeh me either. Nested rulesets I always put at the bottom of the declaration block.

@ClassyCoder 2 года назад

@@stomperhk9107 that makes sense. I want to give the alphabetical method a try, but then I also don’t want nested things sandwiched in between styles with no nesting.

@stomperhk9107 2 года назад

@@ClassyCoder Uhum, got it. I find the alphabetical method unreadable and a complete mess, haha, but it's just my opinion of course.

@astrit 2 года назад

I love the way you do it. Majority of times I also did alphabetical order, how ever props that I knew were going to be overwritten at some point I add them more on top. How ever there is a thing that I find here very useful and have done my self when I paid attention more to the order as display and positioning to be always on top. Nonetheless great video as always and keep this content coming, I guess things like this do not get discussed enough even tho it might not have huge impact on overall performance I think this has huge impact on productivity and just knowing where things are faster. 🙏

@user-sh5qp6uu1e 2 года назад

I use almost the same exact approach, super useful for everyday projects!

@GlennPhilp 2 года назад

Kevin, great topic. I too follow a very similar set of principles as you discussed. However, I keep it within the BEM theory. The basic idea is all box styles (display, height, width, margins, paddings), then elements (font-family, font-size, line-height), and finally modifiers or manipulation (background, borders, positioning, transitions, etc.). I also group similar selectors and that's when I alphabetize. So it would be something like: display: flex, align-items, justify-content. Practice becomes habits.

@-vis-2492 2 года назад

I definitely agree with you. I began learning CSS few weeks ago and I organized my code by common themes as you do. Quick Insight: Just read CSS books and documentation and you will also find that they follow a similar pattern (typography, box-model etc...). Once again it all comes down to patterns....

@singularity1130 2 года назад

I've literally been doing this, in a very crude way, before I knew!!! Thank you for the clearer categorization so I can clean up my CSS! I prefer this over alphabetical for the reasons you said but also because I don't have a linter and silly enough going through the alphabet to ensure it's actually in alphabetical order (before I learned that command palette hack just now) was too much.

@edwardholmes91 2 года назад

I wholeheartedly agree with you and Kevin. It's not like I don't know the alphabet, but starting from random letters take me forever! I have to go back to a known point and it drives me mad, so trying to find properties when sorted alphabetically would be a nightmare! I stumbled across this video and have been looking for a way to tidy my CSS up. Like I'm sure most people do, I work on something and shove it in, to make it work, with an intention of tidying it tomorrow... but like the old adage, tomorrow never comes! Does anyone have a good way of organising selectors? I try to group related selectors together, but mostly, they're all over the place. Also, any tips for when to split stylesheets? I have one for display, one for when JavaScript is disabled and one for fonts. I've not got around to it yet, but plan on making a print styles too. Adding to the HTML on each page isn't an issue, as I shove all links in a PHP include, so changing the include file will update all pages at once anyway.

@singularity1130 2 года назад

@@edwardholmes91 I use next/react so I split my style-sheets up according to components. For selector organization I don't have a schema since I rarely use more than 2 or 3 but in terms of placement it's always below the class I'm referencing.

@edwardholmes91 2 года назад

@@singularity1130 Thanks for the reply. When you say below the class, do you mean in terms of which is used first in the HTML? For example body first, followed by say headings, then paragraphs?

@singularity1130 2 года назад

@@edwardholmes91 CSS Structured likes so: 1.) Things that affect everything 2.) Things that affect more than 1 thing 3.) Things that only affect 1 thing 4.) Keyframes 5.) Query Selectors For numbers 1 - 3 I tend to follow this sub order: 1.) Class Declaration 2.) Standard CSS 3.) Class selectors This is all number top to bottom. I do this because I use comments as Control + F Key points with an index at the top of every CSS file and I can instantly jump to any point in the file where a class might be disrupting CSS flow. If it's a selector then I can drop to the bottom of that class section and find/fix it. It helps seeing the selector alone instead of inbetween rules for conceptualization.

@kirankandula2779 2 года назад

Thanks for the video, I have been looking for this for quite sometime. It would be great if you also make another video on how to use linters for the same.

@johnkeck 2 года назад

Very good! I've been doing something similar. I order properties by how essential/foundational they are and then what difference they make to the positioning of the element(s) starting from the outside in. What this means is that I start off with most important, foundational properties (e.g., display, content, flex), which is to say properties that affect other, later properties. And then I move on to other positional properties like position, left, right, etc., maybe transforms; then margin, border (and border radius), padding, width, font-size. The final section for me is more decorative like background color, shadows, and animations.

@mohan9285 2 года назад

Awesome. I do follow the similar. order: Position, Display, Typography, Box-model and Others.

@hajimeippo804 2 года назад

Learning from the King 😍 these tips will take me to next level 🔥thank you

@SkaidriusPrascienis 2 года назад

Thank you for introducing such a great approach. I am recently searching exactly how to sort CSS rules and I don't like an alphabetical approach. Maybe just color and background colors also could be separated into their own group. But of course, sometimes you can have to set smth like border=color and if you just add it to the misc group, it would be easier to find and replace (check).

@Akimb321 2 года назад

Thanks for making this video, Kavin :) My approach is similar to yours, but not so detailed. Basically, the display and dimension (width, height) stuff goes first and then the styling part - font-family, line-spacing etc. Or, simply put, - logic first, style last. The way I think about this subject is, if font-family is changed, the element will simply look a little bit different. But if something like display is changed from flex to block, the element will become a mess. So the most important things, such as display, width, height, position are the top - the most eye catching place.

@offroaders123 2 года назад

You way is great Kevin! Organizing them alphabetically drives me nuts too 🐿

@dhondup3876 2 года назад

I use a stylelint plugin called stylelint-order with stylelint-config-rational-order config to group the properties automatically. It's really handy.

@codehan 2 года назад

What exactly does the plugin? Sounds interesting..

@maddison0 2 года назад

@@codehan Here's the description of stylelint-config-rational-order: Stylelint config that sorts related property declarations by grouping together following the order: Positioning Box Model Typography Visual Animation Misc

@sten360 2 года назад

This seems perfect! I already do the ordering subconsciously since this is how I've always written CSS, but if I'm changing something in a rush or other people touch the code, things can get out of order. While I don't obsess over it, it would be nice keeping it tidy automatically. How exactly do you set this stuff up to work in VScode? I'm a bit of a noob when it comes to using extensions.

@dhondup3876 2 года назад

@@sten360 You need to install Stylelint VScode extension and add a Stylelint config file then you are good to go!

@WizNick7 2 года назад

oh, thanks so much for this. I had my css very similarly grouped but with this..it will be done automatically, so good!

@souryavarenya 2 года назад

My organization goes from outer-most properties to inner properties in the order - container outer positioning - container outer props - margin, border, sizing - container inner props - padding, background - container content inner positioning, typography - misc. like z-index One very specific drawback is that display can sometimes refer to inner positioning as well as outer positioning. To be consistent, I always to try to use display as inner positioning tool.

@YaroLord 2 года назад

this video made me wonder about the way i organize my css and up until now i thought i had my own "system", but i realized i follow the box model for it and it's what makes sense to me 1. grid / flex 2. position / display / z-index 3. width, height, margin, padding - now that the main box is taken care of... - 4. formatting 5. aesthetic enhancements (background, border radius, box shadow, etc.) 6. animations / transitions this helps me write clean code, because if i find myself constantly writing position, or margin/padding settings, then i need to make an adjustment to keep it dry aesthetic enhancementsand formatting are usually done at a specific level so i prefer to focus on that last

@AmodeusR 2 года назад

I do something similar, I try to separate properties in related groups, it's good for fast recognition and less mental fatigue (when you see a lot of things bundled together at once xD)

@JayJames 2 года назад

I have a similar type of flow but once I hit save it will format alphabetically. Nice to see how others structure their css

@karolinecruz3391 3 месяца назад

Thank you very much, this was really enlightening.😄

@sharakpl 2 года назад

I had been doing it manually years ago. Then I learned about stylelint and stylelint-order. Tried some configs and I think this is the best of them, also most up to date and actively maintained: stylelint-config-recess-order. For some reason YT keeps deleting my comments with links so just search it on Google or directly on GitHub.

@MaxWeir 2 года назад

I use stylelint as part of my build process and have a default order for all css properties, it’s much similar to yours by grouping similar things together. I run a grunt-lint process which checks all the css files for consistency and update as required.

@2Fast4Mellow 2 года назад

We have a system that is kind of a hybrid between the two methodologies shown here. In programming there is a single responsibility principle (SRP) that says that something should have only one task/job. We also apply this to css as they are compounding anyway. We usually split a large group like your .card class into 3 to 5 separate classifications. Because each class has fewer lines they usually are easier to understand, it also promotes reuse because more often than not, styling has to be applied to multiple elements...

@Morrile1 2 года назад

This does help me, as I have always wondered in what order things should be in rather than just typing haphazardly in the hope it works. That's what I did on my very first website, but didn't have the knowledge to know how to fix it. I eventually got it working but so many people emailed making valid comments about the crap coding.

@rockmonty 2 года назад

Great vid. Get organised, doesnt matter how you organise. Muscle memory saves alot of time and makes reading your code easier.

@bikinglikebecker 7 месяцев назад

I like that it acts as a table of contents.. but so does table(s) of contents.. thanx 4 sharing..

@dankierson 2 года назад

Agree generally with you on this natural ordering of CSS properties. Maybe a CSSPropLint plugin could be written for Sublime Text 4 (or VS Code) to do this for CSS files. The blank line separation is a good idea too to ease reading.

@tinpham6413 2 года назад

Love your content, alway give great tips

@Bhawk1990 2 года назад

Awesome, thanks for this video! This is a topic I was thinking about for a long time, I have my own rules to organize my CSS properties but I see some awesome plugins, tools in the comments I should give a try. Another topic I'm really interested in is how to balance between generic and more specific CSS classes. What I mean is do you tend to use things like .text-center (like in Bootstrap) or you just go specific for each of your elements? I know it depends on the project itself, I gave both a try in my customer projects, they have their advantages and disadvantages, but I'm curious about what you and others think about it.

@darklirahmaledicta8478 2 года назад

Hey Kevin, as a absolute beginner in CSs i apreciate tips to sort the code in a meaningful manner - your grouping semms useful for me, alphabetical orders do not makes sense to me. So thy for sharing this ideas, I always enjoy your videos even if I do not understand everything thats going on in there :-D

@zsoltoroszlany7172 2 года назад

I really like your approach of organizing CSS properties. I myself do almost the same way.

@ClassyCoder 2 года назад

This is another level of organization I didn’t know I needed Lmaoo! I like the alphabetical idea.

@tim_t 2 года назад

Same approach as you but with a slight difference -- I add position properties before display properties! 😆

@bobrobertsNotUrBob 2 года назад

I always have my positioning at the top, styling next with shadows at the bottom of the styling, type then z-index / transforms / transitions at the bottom. I never have to wonder what I was doing when jumping around. Just get used to the structure and it's easy.

@erfelipe 2 года назад

Great class. Thanks.

@crooker2 2 года назад

Sadly... I don't organize my css in any way. It's never hurt me and I'm the only one who has to work with my code. So it's a mess. But so is my desk. It works. Meh. :)

@ChandarSunderraj 2 года назад

Nice video, I was hoping you will add PostCSS sorting plug in to automate this reordering.. Would love to see an video on that if you try it and like it

@rezarahman1782 2 года назад

Generally I like to follow this. 1)Box model. 2)Typography. 3)Display. 4)Position.

@EricBishard 2 года назад

My CSS is in a similar order, but I separate my CSS into two areas outside of that. First anything that does not effect the color, or that is something that changes due to theming. Second is everything that does change if for instance I have a light or dark mode. So although each is organized, the first section deals with layout, size, position, padding, margin and the second, them able properties. Even if my site contains no theming at the time.

@lazygamer6249 2 года назад

That was absolutely awesome.

@rebelshadowrm 2 года назад

On my personal projects I like to table of contents my work. Often having layout related css in it's own section and continuing declarations for other class properties in a different section. So, in a way, similar to your style but not split under one class selector, but instead in one section. Usually having a specific class name or comment to describe the section of the layout they are responsible to. I guess once custom properties became normal, I felt like layout related properties were better in their own section. (I.e. grid layout related items) I just felt like when it came to adding complexity, like different themes, font sizes, layout complexities. Custom properties allowed me to section properties related to those specific values, and I wanted my grid layouts in a similar fashion so that I could add complexity at higher resolutions. Just my own weird way to keep things organized I guess.

@ARTICFR0ST 2 года назад

If you use vscode, you can organize your css file with 'CSS Sorter'. It trims spaces, changes spaces to tabs and vice versa, alphabetizes, and much more.

@Stoney_Eagle 2 года назад

I like alfabetical order but I don't use it for css. The fist thing you specify is display and positioning with TRBL, PM so it makes way more sense to keep the order that you think of when you create a new element.

@AndrewHouser 2 года назад

I describe it like this: typically I am trying to update a single property at a time and see the change. To do it your way I have to: - locate the memory address for the taxonomy of what group a property belongs in - then I need to scan the file to find the group (because not every selector is going to contain the full taxonomy tree - then I need to scan again, because if we are not alpha, we are likely not alpha within our groups - finally I find my prop and make my change Feels very sloppy and requires a lot of mental overhead. Alpha? That’s a low-level subroutine baked into the kernel. I get that for little or no cost. And best yet, there’s no having to remember different taxonomies between different teams. Learned that one in kindergarten and I don’t have to re-learn it each time.

@damianpalacios8185 2 года назад

I've tried different approaches and I find Stylelint the best solution to get the same order on each file. My order is: Position, display, size, box-model, font, text, misc using stylelint-order plug-in. As long with other configurations, it is my best way to "type" CSS

@damianpalacios8185 2 года назад

Here is my order: 'order/properties-order': [ 'content', 'position', 'z-index', 'top', 'left', 'bottom', 'right', 'box-sizing', 'display', 'align-items', 'justify-content', 'flex', 'flex-direction', 'flex-flow', 'flex-wrap', 'flex-grow', 'flex-shrink', 'align-self', 'vertical-align', 'object-fit', 'opacity', 'transform', 'transition', 'width', 'min-width', 'max-width', 'height', 'min-height', 'max-height', 'background', 'background-color', 'background-size', 'cursor', 'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'border', 'border-style', 'border-color', 'border-top', 'border-right', 'border-bottom', 'border-left', 'border-radius', 'outline', 'box-shadow', 'list-style', 'font-family', 'font-size', 'font-weight', 'text-align', 'text-decoration', 'text-transform', 'line-height', 'color', ]

@aCitizenJOSerased 2 года назад

First time I hear about this alphabetical order approach. Sure it would make much more sense in very large teams. My approach is much closer to yours. First "create" and "place" the element, thus display and position properties. Then "draw" it with the box model properties, and the logic goes along.

@tonyr.6637 2 года назад

A few minor details aside, this is *exactly* the way my brain works, and how I have organized CSS for decades. I also find alphabetized properties crazy-making for the same reasons you do. I have always wondered if there is a linter with the right customizations available to automatically reformat properties like this. Anyone know if this is possible?

@stephanechataignie 2 года назад

Interesting video. By the way, to use your method in an efficient way, the use of CSSComb seems essential to me . With a simple shortcut, it reorganizes your entire CSS with pattern you setup. You can now write your CSS in anyway you want without losing time to move your CSS code. It can also reorganize your CSS when you save your file without any shortcut. CSSComb is a dream ;)

@philippealexandredeleye4608 2 года назад

Intelij detect duplicate property it’s very useful 👍 It also merge padding / margin in one property (useful for automatic logical property) !

@boheeatelier6681 4 месяца назад

I like your method a lot, it makes much more sense than the alphabetical one

@DenisovichDev 2 года назад

Great video, as usual

@hansmaulwurf9051 2 года назад

Grouping FTW! A linter for this would be super straight forward. All the properties follow a specific order after all. You would just need a template with all the properties in the right order....

@brandoncroberts 2 года назад

Was going to say the same, just need to make a list of all the properties that should go in any of those sections

@1Joren 2 года назад

Better if it's a formatter, so I don't have to think about it. Maybe a prettier plugin for CSS

@brandoncroberts 2 года назад

Yes lint with auto fix on save

@SLNCWNS 2 года назад

The answer is stylelint-config-rational-order

@diegomarzo4001 2 года назад

I prefer the same way you do also. I like to group the things logically by functionality. If you think about it it is the same way I like to have sort out my variables in code by what they do, the alphabetical orders is arbitrary.

@conphynement2228 2 года назад

If I were able to write VS Code extensions (which I'm not !), I would definitely try and write a kind of linter to do this stuff automatically. As some users pointed out, it seem it wouldn't be that complicated to make. The extension configuration could allow the user to switch between "alphabetic-ordering", "Kevin-Powell-ordering" and "custom-ordering" ... or something like that.

@dhondup3876 2 года назад

Have you tried stylelint plugin stylelint-order? I think it exactly does what you are saying.

@MitoFace 2 года назад

I used to do something like this. Nowadays I tend to do mostly-alphabetical, with namespacing comments for any exceptions. (Just make sure to set the comment color in the editor to something inoffensive.) For example: .floating-bar { position: fixed; /*position*/ right: 0px; /*position*/ top: 0px; }

@8bitlikadam920 2 года назад

I usually order them by relevance and similarity. For example: #example { display: flex; justify-content: center; align-items: center; position: absolute; inset: 0 0 0 100px; margin: 0; padding: 0; }

@flaviomauri 2 года назад

CSS properties order I prefer: positioning stuff first (box model attributes), then colour, then typography (text, font, line, letter - in this order). I put temporary properties first, so they stand out to me and I remember to remove them (say a background colour for debugging). I find order particularly important in my line of work -emails- because the CSS is inline, so even harder to read... so I can't deal with other sortings, I keep thinking properties are missing when picking up code from colleagues. Since the beginning of time (early 2000s) I've been dreaming and then thinking of making an editor that would allow to sort properties, have colour pickers and other helpers... have you ever felt the same, think a tool like that could get traction?

@clintwinter4802 2 года назад

A helpful way to implement this is with a simple code snippet that puts the commented sections in the rule with an input on the rule and the rest at each section.

@rickyspanish24 7 месяцев назад

I do somewhat the same thing you do, except I prefer my positioning first, display properties, background properties, width-height-etc, typography, the miscellaneous and for some reason, I like my z-index’s to always be last (I separate them from the positioning properties). I feel like they are easier to find that way if something goes wrong because of the stacking context rules.

@markusbeyer9524 2 года назад

I use vaguely the same grouping that Chrome's Developer tools use. Position / Grid / Text / Appearance / Misc. Inside the groups I use the same order for all properties.

@w3debugger 2 года назад

mine a: structural 1. content 2. box-sizing 3. display 4. width / height b: elements colors / font styles 5. background 6. attributes alphabetically related to text. (i.e. font-size, text-align, etc) 7. color c: spaces 8. padding 9. border 10. border-radius 11. margin d: placement 12. position 13. top | right | bottom | left d: miscellaneous 14. transform 15. translate 16. overflow ...

@LeeSmith-cf1vo 2 года назад

I much prefer your approach over alphabetical (although personally I would use different groupings, e.g. Width/height clearly belong with top/bottom/left/right) But honestly it's not a problem that I run into often enough to bother with. I think for the most part the natural order that properties get added is already kinda like this a lot of the time, at least for the initial dev, later tweaks can mess it up. So roughly grouped, but with the groups themselves in no particular order. But that just me

@Rocadamis 2 года назад

I do like your system better than alphabetizing. I did something like this naturally, but perhaps in a little different order. As a personal preference, I think box-shadow and border-radius should go with the Box Model section. I'm undecided about margin as it seems more appropriate in the Positioning section as it is actually about positioning an object or text on a page.

@bobobo1673 2 года назад

Thanks!

@Victor_Marius 2 года назад

Best way for me is logical and by importance (any after and before pseudo elements needs a content property)

@richardwolff3066 2 года назад

I'm torn atm. In regard to your first example, I prefer the inset shorthand property over top,right,bottom,left.

@somnvm37 2 года назад

For me, it's done like that: selector { width: 100%; /Width's here, because this is the part I had most problems wiht, and it's a basic property max-width: 500px; /Obviously, sub-properties should come after the main ones, which is a problem of alphabetical order (one more reason not to use it) height: 50px; /height always comes after width, padding: 0; margin: 0; margin and padding are in this catigory, because width, height, margin and padding are like 4 basic visual properties, everything must have display: flexbox: /It's self explanatory: flexbox catigory justify-content: center; flex-direction: column; /btw, I think here I can leave everything in any order, just that display flexbox is on the top font-family: 'roboto'; /Font family is the first, because usually this is the most noticible, and it also leads all the other font properties font-size: 12px; box-sizing: border-box; /things I don't know where to fit, go to the end. background: #333; } I don't get how people could like the alphabetical way I usually separate everything by catigories, and then leave space between those Catigories might not be obvious, such as "basic properties" or "flexbox" instead of positioning.

@AbhishekVerma-fe3wo 2 года назад

please make a video on using shorthands too

@fergsworld7 2 года назад

As a beginner, I would type out the comments to help keep me organized. There wouldn't be a need to once the mental muscle memory has been established.

@parvathivarma7108 2 года назад

Agree with you

@antipusrises 2 года назад

How would you organize the style sheet itself in terms of classes, sub-classes, etc?

@tedfitzpatrickyt 2 года назад

yeah a while ago i started alphabetizing my declarations but i don’t do it much now when i’m naturally writing css - logically i put display at the top, position near top, transforms near bottom

@dasten123 2 года назад

I was pretty much always doing it your way without thinking about it

@BobDschingisKhan Год назад

Awesome 😊

@abdulrachman3313 2 года назад

I Have a question? Is CSS or SASS can do input parameter like this into class directly, example : If can do, please make a video tutorial about this.. Thanks a lot.

@kaosce 2 года назад

I'm pretty sure your approach can be used with a linter since it is basically what we are doing with imports in Python

@danielborges. 2 года назад

Nice way to organizing. I do it in the same way. And don't ever bother to excuse yourself because other people behave as a child and could "get hurt" because someone think different.

@azmarifmain 2 года назад

love from bangladesh ..... all the best...

@chris.p-dev 2 года назад

It’s almost good but I think that background shouldn’t go to box-model section since it’s something about color and how it looks like and by the way you should use for border-radius and border itself in the box model section because it’s affecting the size of the element.

@Abhishek-il2bl 2 года назад

Amazing

@k-yo 2 года назад

Whatever happened to CSSComb? It was a tool that did exactly that, order CSS properties based on groups you can configure. Can't linting do that today?

@ropoxdev 2 года назад

Great vid

@huhu6648 2 года назад

Template: /* display stuff */ /* positioning stuff */ /* box-model stuff */ /* typography */ /* manipulation stuff */ /* misc */

@colindante5164 2 года назад

thankyou ))

@muhammadsiddiqui2244 2 года назад

So how to lint so that the moment I add a rule, all categories are there ?

@wolframzell6162 2 года назад

I like alphabetical, thats why im so happy inset exists. (which i know because of you, big thanks ^.^)

@srijitmondal4190 2 года назад

What is vs code theme you are using???????

@v0xl 2 года назад

i just group similar properties display/position first then position then left/right/top/left then display transforms and filters sre the last

@peterloader974 2 года назад

Too structured for me either way. In the end, I use Pure CSS to combine my CSS files into one file that's optimized for speed. But, I do group everything under appropriate headings. BBedit makes searching for stuff a breeze.