bevacqua / css Goto Github PK
View Code? Open in Web Editor NEW:art: CSS: The Good Parts
Home Page: https://ponyfoo.com
License: MIT License
:art: CSS: The Good Parts
Home Page: https://ponyfoo.com
License: MIT License
these 2 are the vital things in css and adding them will help
I like your style guide, it aligns closely to my personal preferences (except the two-space soft tabs, I prefer four space soft tabs). I do have one point I'd like to raise.
I strongly feel that font-size
should be in layout, because:
em
s to specify break points, font-size
s, padding
s, margin
s etc etc. The reason is that this solves a lot of issues with phablets and other devices in the Android Resolution Race (arr). See also: Gardner, 2012.ns-container
or even body
will affect sizing ánd positioning of elements)font-size
near color
, font-weight
and other stylistic properties, but I felt I needed to raise this point since you have made the distinction purely on layout vs. presentation.What are your thoughts on this?
Under the section entitled "Styles", I believe you were trying to point out how to avoid the use of !important, which is reasonable. however, I think using "btn-red" as a style name under a subheading of "Good" may also give the impression that the class name is a good one.
It is preferable to describe the semantic meaning of the button is red (warning? error?) rather than the color, so it can be later altered by the designer (can we make it orange?) without causing a semantic disconect
You state under Selectors and Nesting that styles, should be "selectors" actually, shouldn't need to be nested more than three times, four at worst. But then your "bad" examples consist of three selectors, which actually follows the stated suggestion.
In fact, I would even say that your bad examples are actually consisting of two levels of nested selectors as the first shouldn't be counted since it isn't technically nested.
To follow the the example given, the suggestion would be selectors shouldn't be nested more than one level deep. I would suggest making it no more than two levels deep and update the example accordingly. For example, showing up to three total selectors as okay and four total selectors going too far.
The subheadings need to be smaller than the parent heading so they display as subheadings. Actually, skip this, I now see it isn't necessary.
Under the "Not Stylus" subheading, "Use a single space after the colon" and "Put spaces after : in property declarations" are fundamentally the same thing. Also, the first example under "bad" has #foo instead of #f00;. Letters versus numbers in other words.
Under the "CSS" subheading, the examples in the list use .foo and .bar as classes. In the "Good" and "Bad" examples foo is used in a comment while classes are .bar and .baz. I would suggest using .foo and .bar as classes and display the comment using the word comment instead.
You state one should shy away from "these", meaning the examples below the statement. The examples consist of three items, two of which you state are okay in certain conditions. This contradicts the previous suggestion.
This should be restructured to say avoid frameworks (you should say why as well) and that the other two are separated away to explain why they are okay in certain conditions.
You mention twice "Keep z-index levels in variables in a single file". Could you clarify with an example? I don't understand what this rule is trying to say.
Thanks for the detailed guidelines.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.