This question already has answers here:
Conventional Order of CSS properties [closed]
(9 answers)
Closed 8 years ago.
Is there a correct order to put your CSS properties in? I've never been told to put my properties in a certain order. I guess it's personal preference?
Server side languages have various standards you can code to. Are there standards for CSS?
I tend to do:
.element
{
/* display: */
/* position:, top:, right:, bottom:, left: */
/* width:, height: */
/* margin:, padding: */
/* color:, font: */
/* background: */
/* border:, border:radius: */
/* z-index: */
}
Though there is no standard around it.
And probably that's how a declarative DSL should be.
The following links might give you an idea on how you can form a standard for your domain
Conventional Order of CSS properties
CSS Lisible
CSS Comb
Order Your CSS Properties
I think there isn't a correct order to do that, you just do the way you want and try to organize the css properties the best way you can.
As far as I'm concerned, there isn't a specific order. Late properties shadow others, but that's all
There isn't a commonly-used standard (in my experience - ten years writing CSS, freelance at various different companies for the last 6, all in the UK).
I suspect this is because it doesn't matter that much. Assuming you have no duplicate properties, the order doesn't affect how the code works, and although it's a bit easier to read when property order is consistent, it's obviously easier when writing to go with whatever order your brain comes up with.
CSS Tricks did a poll on CSS property order last year. The most popular answer was "grouped by type" (closely followed closely by "randomly", i.e. no particular order), although "type" doesn't seem to be defined specifically.
Google's CSS Style Guide decided on alphabetical order for properties.
Related
Is there any way to disable all these !important options in semantic-ui?
I keep running into issues with things like:
.ui.right.sidebar {
right: 0!important; /* why is this important */
left: auto!important; /* why is this important */
-webkit-transform: translate3d(100%,0,0); /* why is this NOT important */
transform: translate3d(100%,0,0); /* why is this NOT important */
}
Why does almost every positioning property have !important? Is there a way to compile semantic omitting the !important modifiers? It is interfering with my custom styling, and I have to do extra work that feels hacky (like countering margin: 0!important; with padding-top: NNpx and just hope that at least one isn't marked as !important in any of the states it could be in)
Disabling !important in semantic-ui is a bad idea as it may lead to unpredictable results. To understand more about why there are !important keywords in the framework, here are some statements made by Jack Lukic, the author of SUI:
..CSS should have a specificity property for defining priority (it was
part of the original discussion when creating css), however they left
us with automatic weight calculations from an arbitrary point system.
This is pretty terrible when you run into something that happens to be
classified less ".ui.button" lets say, having to override '.ui.menu
.ui.button' , there are only two solutions, arbitrarily increasing
weight by repeating class names in selectors, or using important...
Source 1
And also here (among other places):
...CSS specificity has always been a terrible sort spot of the
standard, instead of giving developers a way to assign priority to
rules we have to with two options, increase rule specificity or 'drop
the hammer' with !important.
A lot of css rules in semantic aren't able to increase specificity beyond a certain point. The only assumption we can make about a red ui
button is that it will have classes .ui.red.button, no greater
specificity can be gained by altering the selector. If we then have a
rule that appears later with the same or greater specificity we're
stuck without important.
I'm positive that each decision to use important in semantic was after dealing with no other option. This happens a bit more than other
libraries because the specificity is so granular in the library.
If you want to override the behavior, you can do two things:
Use one of the 3000 theming CSS variables in SUI
OR
Override the behavior by using more specific selectors
See this
One way to make your custom CSS more specific is to use an id in the
body tag of your page and use the following selector:
#bodyid .create-new-menu-btn {
//Properties }
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am relatively new to CSS and yet I seem to have got the language reasonably well for a newbie. However, whilst many of the tutorials I have read often warn about "organising and structuring your stylesheet properly" (and I can certainly see why now I have created some rather long stylesheets myself) I cant for the life of me find any info about a standardised format for a styleheet or a logical pattern for layout that makes later human reading easy.
For example, do I create a comment-bracketed section for each "geographical" section of my page (header, row1, row2, article1 etc) and keep all styles for that section within those comment borders? The problem seems when I have styles that get re-used in other sections - and putting them under a section for page-wide styles then negates the purpose of grouping them by section at all. Likewise, structuring my stylesheet by grouping based on text styles, layout styles etc seems even more confusing.
Is there a "good practice"? I know this sounds dumb but it seems no matter what you do with HTML and CSS somebody is ready to tell you its wrong, bad practice or unsemantic and I'm left confused. I want my code to be a good example of my work in case an employer wants to check it in future.
I've never been actually taught, however I can let you know how I organise my CSS documents. As you say, I like to divide it up into "geographical" areas... i.e. the rules that apply to the header, the side bars, the main content, the footer, etc. And then, below these I add very specific rules, say if I need to style a form or a table on a particular page. Finally I add a "General Gubbins" section at the bottom when I add generic rules that may apply across the board.
Oh yes, I also like to add the designer's palette to the top for quick reference.
For example...
/*
PALETTE:
dark grey : #555555;
pink : #d93575;
*/
/* HEADER */
#header {...}
#header ul {...}
/* SIDE BAR */
#side {...}
#side ul {....}
/* CONTENT */
#content{...}
#content p {....}
/* FOOTER */
#footer{...}
#footer div {....}
/* FORMS */
form {...}
input {...}
/* GENERAL GUBBINS */
.center {...}
strong {...}
floatleft {...}
These guys advise you to "Organize the Stylesheet with a Top-down Structure" ( http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/ ). I often use multiple style sheets. In MVC for instance - you can regiser styles on a per-view basis. That way you can put view-specific styles in a specific style sheet while not messing with your 'shared' or 'layout' one.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What is the performance impact of CSS’s universal selector?
Ive read that using the * CSS selector isnt ideal as it takes longer to process. However how much is this really an issue? How much longer will it take a page to be displayed if I have the following in my CSS?
#div1 *,
#div2 * {
float: none !important;
width: auto !important;
height: auto !important;
text-align: left;
position: static !important;
}
It seems to me that the connection speed and number of large assets like images is going to make far more of a difference. The work im doing is for mobile optimization but the page size (due to various libraries) is around 750KB and there is nothing I can do about this.
As a side note im aware that using !important isnt ideal too but the messy code ive inherited means its required in this case.
Read this article.
The key to optimizing CSS selectors is to focus on the rightmost
selector, also called the key selector (coincidence?). Here’s a much
more expensive selector: A.class0007 * {}. Although this selector
might look simpler, it’s more expensive for the browser to match.
Because the browser moves right to left, it starts by checking all the
elements that match the key selector, “*“. This means the browser must
try to match this selector against all elements in the page.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Custom Cursor Image CSS
Is there a way to change the default cursor images for your website when you use, for example..
body{
cursor:hand; /* Changing what 'hand' is equal to*/
}
So then I wouldn't have to use cursor:url() on everything and instead just change what the names equal to.
So for example I'd like to be able to..
hand = URL;
progress = URL;
etc etc.
You can't change the cursorset of the Operating-system. (Just imagine - What would you say as a visitor of such a website changing your system-settings). You also cannot redefine the appearance of the keywords.
You have to define custom-images if you want to do so. The best thing you could do is group elements you want to have the same cursor.
input, select, [elements,]*{
cursor: url('someInputCursor.cur');
}
body{
cursor: url('mycursor.cur');
}
however, cross browser functionality is limited.
you should test...
You can't change cursor: hand; to use a different image. You could use a CSS pre-processor (e.g. LESS or SASS) to ease the task, e.g.
$hand: url('something.cur');
body {
cursor: $hand;
}
Or perhaps use a class (or a selector that covers all necessary elements) and edit the HTML accordingly?
.customcursor {
cursor: url('something.cur');
}
No, you cannot, because the cursor property value keywords have their meanings defined in informal prose in CSS specs, with no tools for giving any instructions on how to implement them. The obvious intent is to leave the exact shapes implementation-dependent.
Using tools like LESS, you can write style sheet code that uses defined variables, but such code needs to be translated into CSS then.
Note that the hand keyword in non-conforming. The corresponding standard keyword is pointer. (People have used hand because IE 5 did not recognize pointer.)
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
CSS has never supported constants or variables directly. Whenever I'm writing code like this:
span.class1 {
color: #377fb6;
}
div.class2 {
border: solid 1px #377fb6; /* Repeated color */
}
I wonder why such a seemingly simple feature has never made it into the standard. What could be hard about implementing a scheme whereby we could avoid repetition, something like this:
$theme_color1: #377fb6;
span.class1 {
color: $theme_color1;
}
div.class2 {
border: solid 1px $theme_color1;
}
I know there are workarounds, like using a class for each color or generating CSS code from templates, but my question is: given that CSS is so rich and complex, why weren't CSS constants ever introduced?
Current status [update in Dec 2015]
The W3C issued a draft about CSS variables just one month after this answer has been edited the last time. And this month has brought that draft up to a Candidate Recommendation. It will stay in review at least until June 2016. A test suite is available.
So, all in all, CSS will have variables, also called "custom properties":
A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo. The <custom-property-name>
production corresponds to this: it’s defined as any valid identifier that starts with two dashes. Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here.
Example 1
Custom properties define variables, referenced with the var() notation, which can be used for many purposes. For example, a page that consistently uses a small set of colors in its design can store the colors in custom properties and use them with variables:
:root {
--main-color: #06c;
--accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
color: var(--main-color);
}
The naming provides a mnemonic for the colors, prevents difficult-to-spot typos in the color codes, and if the theme colors are ever changed, focuses the change on one simple spot (the custom property value) rather than requiring many edits across all stylesheets in the webpage.
Unlike other CSS properties, custom property names are case-sensitive.
This feature is only implemented in Firefox and Chrome at the moment, and it will (probably) take quite some time until it's implemented in current browsers.
Old answer from 2012
This is the original answer from March 2012. It pre-dates both the "official" W3C draft and the experimental browser implementations.
Why aren't CSS variables in CSS 1 or 2?
EDIT: This was already questioned to Håkon Wium Lie, the father of CSS (Opera Watchblog (Wayback machine)):
Bernie Zimmermann: Håkon, why doesn't CSS support constants? Being able to assign an RGB value to a constant, for instance, could make stylesheet maintenance a lot more manageable. Was it just an oversight?
Hakon: No, we thought about it. True, it would have saved some typing. However, there are also some downsides. First, the CSS syntax would have been more complex and more programming-like. Second, what would be the scope of the constant? The file? The document? Why? In the end we decided it wasn't worth it.
So it's not in the standard because they thought it wasn't worth it.
Workarounds
Constants or variables as you have defined are merely placeholders. Since such a placeholder makes only sense if it's used on the same declaration it's useless as grouping already provides this mechanism:
When several selectors share the same declarations, they may be grouped into a comma-separated list.CSS2:Grouping
So instead of using a color in ten selectors, it's often better to collect common declarations and put them together. Instead of
.header{
color: red;
}
.section:nth-of-type(2n) > .ridi.culous > .article:hover{
color: red;
}
.footer{
color: blue;
border: 1px solid blue;
}
use
/* Color definitions */
.header,
.section:nth-of-type(2n) > .ridi.culous > .article:hover{
color: red;
}
.footer{
color: blue;
}
/* border definitions */
.footer{
border: 1px solid;
}
Also use inheritance whenever possible.
Note that you can declare almost some kind of variable if you're using abstract/simple classes like
.margin5em{
margin: 5em;
}
.corporateIdentityBackgroundColor{
background-color: #881200;
}
.corporateIdentityBackgroundImage{
background-image: url(we/are/awesome/corporation);
}
.backgroundCenter{
background-position: center center;
}
.backgroundNoRepeat{
background-repeat: no-repeat;
}
This will enable you to use
<div class="corporateIdentityBackgroundImage backgroundCenter backgroundNoRepeat">Ridiculos long class names</div>
<div class="article">
<p class="margin5em">Yesterday I found a new hobby: Creating class names that are longer then most common words.</p>
</div>
See also:
http://icant.co.uk/articles/cssconstants/
Zeta’s answer is quite excellent—it certainly got my upvote—but I wanted to drop a note that a Working Draft for “CSS Variables” (constants with another name) was published just ten days ago:
http://dev.w3.org/csswg/css-variables/
I wouldn’t get too worked up about it as yet, since I suspect it will undergo changes and it’ll be a while before support is widespread. Still, there’s at least some movement in this direction.
why weren't CSS constants ever introduced?
CSS is not a programming language that's why. You could use LESS or SCSS to have variables.
There's an argument for Colour Constants (we have a handful of predefined colour constants already anyway). Variables however lead to If statements, If statements lead to Functions, Functions lead to Javascript (and doobies).
Though this article shows exactly how unnecessary a colour constant is in reality. If you're planning on making a theme colour place all your theme colour declarations in one statement, or as has been mentioned make a class just for your theme colour. The former does require splitting the selector definition however which doesn't smell nice, and the latter does seem extraneous when you already have a class applied to the tag.
I see no need for other Constants in a well designed sheet. Numerous dimensional repetition indicates poor structure/design.