Comments (11)
Personally, I think just sorting the properties alphabetically would be the best option if you really want to spend the time putting an ordering system in place. It's the simplest option to update the existing source code to and will be the most universally understood ordering.
But at the end of the day, I don't think people should be editing the CSS provided from Shoelace anyway, it's meant to be a reset/normalise framework and if you need/want to make adjustments you should do so outside of the core CSS so it doesn't really matter how you order the properties, not to mention that all of the projects CSS should be minified anyway so what benefit is it really giving the user?
This is certainly one of those 'Nice to haves' rather than being a 'Should have'.
from shoelace.
Found a better resource for orders : https://github.com/csscomb/csscomb.js/tree/master/config
from shoelace.
Yes, this bothers me too. I was just having a conversation with @orokusaki about this the other day. I have my own "method" but it's often inconsistent.
What's the preferred sort order using CSS comb? Is there a default? The website doesn't seem to describe one and the example above seems a bit arbitrary at a glance.
Also, the minified stylesheet is obviously irrelevant, so this will only apply to the source files. I can't see how it would be part of the build process, so are we supposed to use .csscomb.json
+ an editor plugin such as this one?
from shoelace.
CSS Combs default order is ZenCoding (Found it in this CSS tricks article.)
this will only apply to the source files.
Of course, but a clean source code (with editorconfig, beautify and CSS comb) is a pleasure to deal with :)
from shoelace.
I think the reason they don't recommend an Atom plugin on the CSScomb website is because none of them work very well. I've tried four different ones. Most don't respect my .csscomb.json
file despite it being in the prefs. The only one that does throws errors for valid CSS. Here's an example:
.button {
padding: calc(var(--component-spacing) * .5) calc(var(--component-spacing) * .75);
}
Strangely enough, the "erroneous" line works fine in the CSScomb demo.
So I'm not sure if this is an issue with CSScomb itself or the Atom plugin. 4.2.0 is the latest release of CSScomb, so it's not a version issue at least.
End of day: I like the idea but I'm not going to switch my editor just to sort some CSS props. If I can find an Atom plugin that honors .csscomb.json
properly, I'm happy to use it. Until then: 🤷🏻♂️
Here's my generated config for future reference:
{
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "lower",
"block-indent": " ",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": true,
"leading-zero": false,
"quotes": "single",
"sort-order-fallback": "abc",
"space-before-colon": "",
"space-after-colon": " ",
"space-before-combinator": " ",
"space-after-combinator": " ",
"space-between-declarations": "\n",
"space-before-opening-brace": " ",
"space-after-opening-brace": "\n",
"space-after-selector-delimiter": "\n",
"space-before-selector-delimiter": "",
"space-before-closing-brace": "\n",
"strip-spaces": true,
"tab-size": true,
"unitless-zero": true
}
from shoelace.
Maybe you could run https://github.com/csscomb/csscomb.js in a git pre-commit hook or something like that.
from shoelace.
Sorting alphabetically makes it easier to add/remove/order properties when you're developing, but I tend to group things (e.g. font/text styles, positioning styles, etc.) so I don't have to bounce around a lot. CSScomb's default order seems logical enough — I just with I could get it to work properly with a plugin.
Agree that this is a "nice to have" and I'll hold off and maybe try to troubleshoot one of those plugins again later.
from shoelace.
I beg to differ on the matter of it being a "nice to have." If this is going to be an open source project which many people are going to use, enjoy, and contribute to, then the core code should be the easiest to understand; whether it's for debugging purposes, or just someone trying to add something new and wants to understand the other parts of the code.
Also, if different people are going to contribute to this project, a considered standard for this and similar matters would make the contribution easier, and prettier.
I truly believe this actually is a "should have."
from shoelace.
Also tried postcss-sorting
for Atom. This mostly worked, but there are some annoying bugs that cause it to use the wrong config for files opened outside the current project.
I'll keep looking for in-editor solutions. Hoping for one that:
- Uses a config file such as
.csscomb.json
or.postcss-sorting.json
- Has the ability to sort manually
- Has the ability to auto-sort on save
- Doesn't expand one-liners such as these
from shoelace.
I added stylelint to the project. This catches a lot of convention issues, but it doesn't handle sorting. Still haven't found anything that works properly in Atom.
from shoelace.
In the years since this issue was created, I've still not managed to find a CSS "comb" that works the way I like. I'm closing this as a wontfix in prep for the 2.0 release, but if I come across something that works well I may add it later on.
from shoelace.
Related Issues (20)
- refactor stopAnimations function
- Input prefix and suffix not displaying in react.
- SlButton Clicks Not Suppressed when in Loading State HOT 3
- Switch doesn't allow setting `aria-describedby` HOT 1
- Update "Form Controls" documentation to be more explicit
- Tooltip has some accessibility/screenreader issues around reading content HOT 2
- Empty radio-group leads to exception HOT 3
- <sl-select> with "muiltiple" only sends a single item to FormData, when more than one is selected. HOT 1
- Close Event force closing other element [ Dialog, dropdown, drawer] HOT 5
- `<sl-rating precision>` sometimes doesn't reset when leaving with the mouse
- `scrollbar-gutter: stable` conflicting with overlayed UI components (e.g. dialog, drawer) HOT 2
- <sl-button type="submit" form="formId"> throws exception when it's unmounted
- sl-remove event cannot be prevented from triggering dropdown HOT 2
- Focus trapping in Firefox + `<sl-select>` do not behave as expected
- Radio Group's `getAllRadios` doesn't support slots HOT 1
- 'sl-select multiple' shrinks and doesn't show full options HOT 6
- When wrapping a `<sl-menu-item>` default slot with HTML, the submenu controller can render inconsistently.
- Form controls submit even when disconnected HOT 8
- Checkboxes won't change checked/unchecked from keyboard HOT 6
- hoist doesn't work with 'contain: paint' HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from shoelace.