Comments (29)
I myself do something quite similar to #64 however I do not like that there is no standard rule for this. Alphabetizing at least makes it clear what should be done. I'll consider it.
from sass-guidelines.
I am bit apprehensive about Alphabetic ordering since in some cases the similar properties might get placed far away. Eg: 'top' & 'bottom" which are both used for positioning might come at the end & start of the rulesets.
Hence I group them based on functional similarity :)
from sass-guidelines.
Valid point.
from sass-guidelines.
By group type is still the most common use: http://css-tricks.com/poll-results-how-do-you-order-your-css-properties/.
from sass-guidelines.
Oh, I commented: http://css-tricks.com/poll-results-how-do-you-order-your-css-properties/#comment-185024. Didn't remember that, haha.
from sass-guidelines.
I agree with @jigarjain. Alphabetically might look nice and tidy, but in practice it's not the best way to order properties to me personally.
from sass-guidelines.
I would rather group them by type if there was a standard typing and ordering convetion (that is, which properties belongs to which type, and in which order).
from sass-guidelines.
Nicolas Gallager's Idiomatic CSS rules makes a lot of sense to me.
One think I'd highlight is the position order, which should follow the shorthands one imho - ie. clockwise starting from [-]top
eg.
top: 0;
right: 0;
bottom: 0;
left: 0;
// or
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
Finally I'd suggest to put transition
, animation
and other CSS3 stuff at the bottom of the ruleset.
from sass-guidelines.
+1. Even I put transitions, animations, z-index etc at the bottom of the ruleset :)
from sass-guidelines.
I do it alphabetically because it seems (to me) faster to look for properties, because I know exactly where to look for. And also the code it's "cleaner" as well.
Also, most code editors can sort properties alphabetically with just one click (e.g. Sublime Text - F9) so you can write them randomly as you type them and then just sort them.
from sass-guidelines.
I stick with box model with a little modification.
- Position
- Box
- Inside of box
- Animated Behaviours of box
from sass-guidelines.
If prefer alphabetically for a few reasons:
- It is not ambiguous; there is no argument that B comes before C.
- It can be checked and ordered by tools with little effort.
- It saves me from thinking. ("Hm, what type is font-size again?", "Where does "white-space go?")
- Lookups are simpler.
- The risk of accidentally adding the same rule twice is reduced drastically, as they'd be placed right next to each other by definition.
Aesthetically I prefer grouping by type, but in every day use alphabetically just makes my life simpler.
from sass-guidelines.
👍 +1 @koppen
I couldn't have done it better ;)
from sass-guidelines.
@koppen I agree with points 1-3 there. But I think both alphabetical & type ordering solves the problem of lookups & accidental repetitions of properties. No?
from sass-guidelines.
Might want to read into Concentric CSS and use Scss-Lint to check the applied rules. That last one is useful for any order you choose.
from sass-guidelines.
Using CSS Combs sort order actually reduces file size due to gzipping. Because common properties are more often found together, it allows gzip to more easily minify them.
I tested several different sort orders and found CSS Combs is the best:
http://peteschuster.com/2014/12/reduce-file-size-css-sorting/
CSS Combs Sort Order is documented here:
https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json
from sass-guidelines.
I agree with points 1-3 there. But I think both alphabetical & type ordering solves the problem of lookups & accidental repetitions of properties. No?
@jigarjain Looking up in an alphabetical list means I only have to look at the property to see how it's spelled to know where it should be placed. Type-ordering means I have to memorize what type/group/block does the property belong to, and what is the individual ordering of the available types. And then there's the question of what order does the properties go in in their respective groups.
from sass-guidelines.
Thank you all for your contributions. :)
from sass-guidelines.
I don't know.
from sass-guidelines.
I prefer alphabetically as it leaves little opportunity for duplication and allows for easier error checking as you're looking for the declaration from A-Z rather than what 'section' it is in. Pure and simple.
Personally I do this for all CSS now, I used to put CSS3 at the bottom but as it's best (imho) to use autoprefixer there's no need to write all those vendor prefixes.
I do however write my directions as per example from Idiomatic CSS above: top, right, bottom, left.
You'd get something like this:
.element {
background: red;
color: green;
height: 45px;
height: 47px;
margin-top: 20px;
margin-left: 5px;
transition: color 1s linear;
}
from sass-guidelines.
I've not found an issue in working alphabetically since deciding to do so in 2012 and documenting it
https://github.com/sturobson/a-slightly-bizarre-starting-point#write-all-css-rules-alphabetically
from sass-guidelines.
It's recomforting seeing lots of you guys using the alphabetical order. I thought I was alone in this one :)
from sass-guidelines.
I strictly use alphabetical order but I admit in some cases it could be better :
.ordering {
background: black;
color: white;
position: absolute;
bottom: 0;
left: 12;
right: 0;
top: 100%;
text-align: right;
}
In this case for exemple, the indented properties are related to the previous one, defacto. It's not a relation specific to a design, a trick,… these are related by nature.
In fact it's the only case I see where alphabetical order could be a pain in the ass.
from sass-guidelines.
Hmmm.. Never thought of it @cahnory and I must say, it looks interesting. I might give it a try...
from sass-guidelines.
I usually don't do that but it came to me while reading the question :)
from sass-guidelines.
@cahnory That looks quite interesting. It's similar to grouping related properties, but even a bit more clear. Nice.
from sass-guidelines.
To me, sorting alphabetically is akin to sorting this sentence alphabetically; it doesn't make sense.
, ; . akin alphabetically doesn't is it make me sense sentence sorting this to
To me, you should be able to read through your CSS and build the DOM object in your head.
Edit: I really like the idea of indenting related properties that @cahnory uses.
from sass-guidelines.
Its not an issue of it making semantic sense as an order, its about the
most predictable way for others working on the same codebase to locate
declarations with as little explanation as possible. Most sensible, most
time saving? Yes.
On Jan 8, 2015 9:47 AM, "Ryan Canfield" [email protected] wrote:
To me, sorting alphabetically is akin to sorting this sentence
alphabetically; it doesn't make sense., ; . akin alphabetically doesn't is it make me sense sentence sorting
this toTo me, you should be able to read through your CSS and build the DOM
object in your head.—
Reply to this email directly or view it on GitHub
#62 (comment)
.
from sass-guidelines.
Apologies. That should read most sensible, no, which a semantic ordering
would achieve (as you point out). But it IS a time saver when multiple
people are editing the file.
On Jan 8, 2015 9:49 AM, "Jake Ford" [email protected] wrote:
Its not an issue of it making semantic sense as an order, its about the
most predictable way for others working on the same codebase to locate
declarations with as little explanation as possible. Most sensible, most
time saving? Yes.
On Jan 8, 2015 9:47 AM, "Ryan Canfield" [email protected] wrote:To me, sorting alphabetically is akin to sorting this sentence
alphabetically; it doesn't make sense., ; . akin alphabetically doesn't is it make me sense sentence sorting
this toTo me, you should be able to read through your CSS and build the DOM
object in your head.—
Reply to this email directly or view it on GitHub
#62 (comment)
.
from sass-guidelines.
Related Issues (20)
- Reference stylelint-config-sass-guidelines HOT 6
- Brazilian language HOT 1
- Can't find gh-pages branch HOT 1
- An in-range update of nps is breaking the build 🚨 HOT 5
- An in-range update of standard is breaking the build 🚨 HOT 1
- An in-range update of uglify-js is breaking the build 🚨 HOT 1
- Broken link in Media Queries Usage sub section HOT 1
- An in-range update of uglify-js is breaking the build 🚨 HOT 5
- An in-range update of standard is breaking the build 🚨 HOT 1
- Replace `@import` by `@use`? HOT 12
- Dead link HOT 4
- Can I PR some changes to enhance Portuguese translation? HOT 1
- Move from Travis to Github Actions HOT 1
- Default namespace? HOT 7
- Guidelines are not appearing correctly in OSX dark-mode when using Edge HOT 2
- "Undefined variable" HOT 3
- Remove references to obsolete tools (Singularity, Susy…) HOT 5
- Remove Encoding part
- Grammatical error with the end of the word in Russian language. HOT 1
- Grammatical change at #numbers-1 HOT 2
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 sass-guidelines.