I probably have a very simple and stupid question, but I just can't figure it out.
I know this is possible with grunt and less, but how-where-and-when...
I want my less line-numbers in my rendered css as comments so I can debug faster and easyer. (I know you can add less to your html for developing reasons but its just cleaner to directly write it in css.)
The following outcome is were I'm searching for:
Could someone send me in the right direction?
Thanks in advance!
Related
So my buddy asked me what is this, we know it is a type of css but never seen this syntax. We could only guess what it is doing, but I have a one question what is it actually doing? I did not see the whole site just this snippet here
input#{:id}.simple-typeahead-input{
#apply for-text-input;
// never saw input#{:id} like this then connected to the actual class
}
is this common practice with LESS or is it wrong? I have know idea I just started learning SCSS. What does this snippet even do. I can only guess but I would like to know exactly what it does if anyone knows. :)
I just had the idea of adding some visual distinction to my CSS/SASS comments so that I can notice them quicker when I rush trough a pile of files that I am currently working on. So I thought, why not use dingbats, you don't see stuff like that in your code, so why not start using it?
For example this cross dingbat here:
My question - is it semantically wrong to use dingbats in CSS/SASS or JS or whatever code comments it is in that manner?
SASS doesn't seem to mind this. Page loads neatly as well.
Not for people with OCD though.
I know this has been asked before, but I can't find any thread that can exactly help me. I'm a bit of a noob, but I know my way around. Here's what I have so far:
HTML File
https://dl.dropbox.com/u/9757676/Website%20Stuff/Website.html
Javascript file:
https://dl.dropbox.com/u/9757676/Website%20Stuff/script.js
(it wouldnt let me post the code)
is there an easier way to do this, perhaps put all the images into an array? and I also need help making a next and back button, perhaps one problem can solve the other
Check jQuery tools: http://jquerytools.org/demos/tabs/slideshow.html.
It has lots of good plugins that could possibly help you.
I'm currently developing a professional website and I have reached around 750 lines of CSS for around 4 pages, the bulk going into the homepage. I have curly braces in separate lines. I could probably reduce it a bit by going through it again.
But I was just wondering, what would you consider as being too much css?
Regards,
I think there isn't a limit at all. Just write the code you need, and when you've finished try to optimize it.
A gotcha on this (not directly related to the OP, but for others who might come here) ...
IE9 and below only recognizes the first 4096 selectors in a CSS file. Everything after that is merely silently ignored.
How large is your CSS File? Sure, you have to worry about hard the browser has to work in terms on load when interpreting the CSS.. is it efficient, are you over working it?
Keep your size as low as possible is a given, but there are quite a few factors to think about. You can always minify, gzip compression when your done to save some time. Take a look at a testing tool http://tools.pingdom.com/
There's plenty of articles on this so I won't bother reeling off my personal opinion, so check these out
http://css-tricks.com/efficiently-rendering-css/
https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-US&redirectslug=Writing_Efficient_CSS
http://speckyboy.com/2011/03/08/website-speed-part-1-write-more-efficient-css/
Assuming your home page doesn't have tens of nested components that have different roles/looks, you're probably being a bit non-clever with your CSS. There are two things to worry about here:
Bandwidth: If your CSS file's size is more than 50KBs or so, some of your clients with low connection speeds/bandwidth might experience
some notable lag.
Rendering: It's possible that your CSS file is complex enough to force the client's layout/rendering engine to make some extra effort while
rendering.
Both the issues would reduce your website time-efficiency. What to do?
The simplest example on how to optimize your CSS file is to collect rules that you use for many elements in one class. There are many other tips to help reduce the size of your CSS file; the other answers already link you to some articles with helpful tips, but if you want to give programs that automate the process a try, take a look at CSS Tidy (and an online tool based on CSS Tidy).
I hope that helped!
It depends on what is your website supposed to do. If it is a small blog and you need, say, 3000 lines of CSS, that is probably too much. If it is an online store with multiple sections and a complicated layout, it might not be enough. It depends on your needs.
Hi for the last month I have started to learn CSS.Fist thing I did is read everything i could find on www.w3school.com , after that I started reading CSS Mastery 2nd edition.I have build a couple of my own websites with succes but I'm still not happy with what I know , I even practiced with the new CSS3 elements.
I've seen alot of cool stuff build using css especialy on http://www.cssplay.co.uk/ but the only problem is the source code is not displayed and I don't know how the bloody things are.A good example is this:
http://www.cssplay.co.uk/menu/tilt.html
And these is only one of the things that I've seen on this website and would like o learn how to build them.
So anyone know any other similar sites that ofer a good explanation on the more advanced stuff about css(not beginer stuff like building some drop down menus , rollover or hover efects )?Any advice is much apreciated thank you!
As already mentioned, tools like Firebug/Chrome Inspector are definite must haves.
I gained the most experience from real world problems with various different browsers. You make a site, it doesn't look so good in a particular browser. So you search on the internet. Find a solution and memorize it. I think that CSS in itself is a fairly simple tool, I class 'advanced' CSS as mastering the various techniques required to make sites work cross browser and in browsers like IE6/IE7+.
Also, Never give up with CSS, if you find a problem try and find an answer. Most of the time, there will be a simple solution.
In general, make sure your CSS is as simple as can be. I generally find that most complicated CSS can be replaced with relatively simple code, and find people get carried away and forget simple techniques to achieve similar solutions. One such problem, would be putting a button on the right hand side of a div, like below:
-----------------------------------------------
| Button |
-----------------------------------------------
You may see that some people will float the button right, adding more complexity than necessary. What ever happened to text-align:right? :-)
Finally, make sure you find a couple of blogs you like, for example http://csstricks.com and read them, taking note of new techniques. Try and master a '2 column layout', understand the difference between block/inline-block/inline, margin collapsing, tables, html forms, IE6/7 hasLayout, the list goes on. Most of which you will cover if you try and make a website template from scratch. Maybe start with an existing site and see if you can achieve the same layout.
I'm not sure with CSS how to learn it's pitfalls without encountering them mistakenly.
It looks like the stylesheet for the maze is located at: http://www.cssplay.co.uk/menu/candr/tilt.css. You can use that against the source code to figure it out.
One of my favorite is A List Apart. Great articles, not only about CSS like I linked, but about web design and more.
Also HTML Dog has some nice CSS entries.
Then, you can find great CSS resources on the w3 site.