Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I am working with some CSS that is poorly written to say the least. I am not a design/CSS expert, but I at least understand the C in CSS. While the builtin CSS support inside of VS-2008 is far improved over previous versions, it still doesn't quite do what I am looking for.
I was wondering if anyone know of a good program or utility that will help me to refactor and clean up my CSS like what ReSharper allows to do with C#.
Some features that would be nice to have:
Examine CSS files and determine ways to extract common styles like font-style, color, etc...
Plugin to VS-2008 would be awesome!
Examine markup files and make some suggestions on improving the current use of classes and styles.
The Dust-Me Selectors Firefox extension can scan a website and tell you what CSS is used and what is not. Removing unused CSS is one good first step in refactoring.
I have often found that when some section is removed from a website, the HTML is removed but the CSS is not.
TopStyle is popular and always the one I hear recommended. It has recommendations on styles etc.
I use Aptana but this doesn't do an refactoring just flags up errors and allows you to target certain browsers. Using this a a decent CSS book may help.
Firebug is a very good Firefox extension that allows you to examine which CSS declarations are active for which DOM element in your document tree.
Although it does not make any suggestions for improvements, it's a great help when debugging/simplifying CSS code by hand.
The Web Developer extension is also a great help.
If you're using ASP.NET 2.0, there's ReFactor! for ASP.NET
I've had good luck using Stylizer in the past. It's nicer and only costs 1/6 of TopStyle.
There's a Ruby gem called HAML that ships with an executable called css2sass. That executable translates CSS into SASS, which is a metalanguage on top of CSS that makes it much easier to refactor (by better illustrating the relationships among your selectors). Might be worth taking a look.
I used to use WestCiv's StyleMaster, which is a pretty good CSS editor / inspector / debugger app. Combine that with the afforementioned Firebug, and you can't help but stay on top of your CSS.
My attempt at playing around with Less for .NET.
I might be a little late but the ReSharper 6 early access preview (EAP) does this for you!
In a CSS file, entering "#" will auto-complete every ID from your project. Same with a period "." to list all your classes.
Best part: when you rename the selector it will rename it project-wide. It makes refactoring CSS much faster, if not pleasurable.
I like Expression Web's CSS facilities. But it doesn't do much for minimizing or unifying your CSS. You have to understand how CSS works to use it properly.
EditCSS for firefox is amazing.
This site at least helps to sort and minimize your rules: http://www.cleancss.com/
It doesn't get you to where you want to be, but it's a good first step.
Maybe CssTidy or CssOptimiser can help to clean-up and make smaller
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
EDIT: While my specific issue is due / relating to the Twitter Bootstrap
system, the solution I am looking for does not need to be Twitter
Bootstrap specific, but more a solution for any CSS style sheets.
I am starting to explore the world of Twitter Bootstrap for a current project I'm working on. I am using Bootstrap 3.3.6
The Issue (why I have the problem below)
The basic Bootstrap CSS file is 6760 lines, as well as additional files for adding my own custom CSS to the site. In total this gives that the site for each page loads ~8700 lines of CSS (unminified).
But the rules applied to the website use only ~700 of these lines. That's a massive overhead for each page, and even with minifying the CSS into the .min.css format this is still a huge percentage overhead.
I am looking for a way of reducing this overhead without removing any of the used rules from the CSS files.
What I've tried (And why it didn't work or is impractical)
I have previously used with great success the Firefox Dust-Me CSS refiner which can identify all unused CSS rules in a page, or even on a whole site.
This is the sort of thing I want, but it has two serious drawbacks:
It only retains CSS rules that are used on the page for the device/media that is used (so for example, it tells me that all the rules in the IE10 viewport bug workaround CSS file are not used because I'm using Firefox browser rather than IE10). It also does not take into account media query specific rules.
The other main drawback for using Dust-Me (specifically, but other similar programs I've found have a similar shortfalls) is that while it will tell me which rules are not used, it doesn't give me an ability to copy/paste the used CSS from the source files.
I have also looked into a few other CSS spare rule removers and the Google Chrome Developers Audit which is useful, but does the same thing, listing in text format the unused rules, which is barely half the job I am looking for.
The Problem (Why I need your help to solve this)
So I am in a position I have a Google Chrome Audit that tells me that 88% of bootstrap.css and 65% of bootstrap-theme.css are unused. These unused elements are listed in text format, and there are hundreds of them. currently I can only see that I would need to do find/replace on each one, removing them [the rule identifiers] from the source before then going through the CSS file and removing all the commands that no longer have any rules.
So I am asking this:
What is the best method or approach for me to read the CSS from a whole website, and
return only all the CSS rules that are referenced in the site, so rules that
are not referenced are not returned to the operator?
I can then take the output from this function and then minify it and save the massive CSS overhead of bootstrap.
Or, is there a completely different way of doing this I've not considered?
Additional:
I have read How to remove unused styles from twitter bootstrap? which is similar to what I'm asking, but the correct answer here references some sort of Bootstrap selection where I can choose which styles I take from the Bootstrap. This is dated 2013 and seems to refer to Bootstrap version 2.
Also, I do not use Grunt and am unfamiliar with Less. Sorry :-/
You can customise the components that are compiled at http://getbootstrap.com/customize/.
This way you will have a smaller outputted file but all dependencies will be met.
To get even finer control you can use the source .less files to compile only the components you want.
You can use unused-css.com which takes an URL as input, which is what you asked for.
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 6 years ago.
Improve this question
I'm trying to be a back-end web developer. But learning a little of CSS just to put it in my toolbox if i needed it someday.
I know about CSS properties and stuff. All what i really "suck" in is arranging elements in CSS. I really waste so much time trying to figure out why does this element behaves in weird manner like this, or how to get that element to the left, or how to align elements the way i have in my mind.
I don't want to take much time learning it as i'm moving forward for what i'm going to be specialized in. So if there're videos or a crash courses on arranging elements using floats or position property or any other good technique to achieve that i would be grateful.
I started experimenting with CSS by downloading some free templates available. Just try searching in Google. There are plenty of.
Creating a CSS layout from scratch is a nice place to start your journey. You may understand CSS by going through SIMPLE, beginner level tutotal from W3Schools.
You may have a look at CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices to get some inspiration and to develop some ideas by your own.
You may also try a couple of CSS softwares like Westciv Style Master and Top Style (but they dont come free). The Resource section in westciv site is really helpful for beginners. It has got Guide, Tools, Tutorials etc. Also you may have a look at complete css guide in their site.
Finally, you may experiment CSS with the help of 11 Useful Online Tools for Better CSS Development
Hope this helps.
No videos, but two other suggestions:
1) You should take a little time (a few hours maybe) and get used to the CSS box model. It is worth getting a precise idea of how CSS works. fa(You know, a few hours of trying out can save you a few minutes of reading what's going on ;-))
2) Get yourself a suitable tool (I recommend Firebug for Firefox) and play around a little with the CSS properties of your favorite page "in real time". Very convenient and efficient to get used to the topic.
I got to learn css pretty fast by study other people CSS and tinkling with it using firebug trying all sort... the more advance the CSS the more you learn, i think you should pretty try the same thing too
I learned most of my CSS knowledge between W3Schools, questions on this site, and Google searches.
Honestly, the only way to absorb any real knowledge is to actually USE what you're learning. Just as you probably couldn't walk if you only ever heard what walking was like, you probably won't develop the skills to be a good CSS coder(or any type of coder for that matter) if you don't practice what you're learning.
That's why I like W3Schools, since they put examples into their tutorials to let you practice what they are trying to show you.
Good positioning reference:
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Good Float reference:
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
It's not really a coding question, but I don't know where to ask it elsewhere.
I'm looking for a tool to clean up unused css selectors.
I know this tool Dust-Me selectors, but I want it to clean it automaticly.
Can anyone help me with this?
Depending on the complexity of your site, I don't think it's a good idea to clean up CSS automatically. I've used those tools myself (DustMe-Selectors mostly) but as soon as it comes to dynamic pages (and sites), all of the tools lack the ability to really find out what is used and what not.
Consider a site using selectors like "item-selected", "item-soldout", "item-bargain", etc. If the site will apply selectors dynamically to e.g. items in a shop, tools may not find those selectors in your markup because they are not used at the moment but maybe used as soon as the shop-configuration changes.
So I'd suggest to go with one (or more) of the tools suggested here and carefully evaluate the suggestions for unused selectors, but rather not use something to clean my code automatically.
There's a windows based utility called CSS Cleaner available here. Obviously the issue is that it has to run through every pages in your project to determine which selectors aren't used. And it can't see into any CSS generated by your code.
Be careful with auto-clean up. If you are not 100% familiar with the site -- don't do it. There may be classes or IDs in your code that are there for JS and not CSS.
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 6 years ago.
Improve this question
As web based designer who has designed web sites using tables but never with css, how can a novice get started with css?
Related SO posts
SO - Css Book & website for CSS
SO - Css blog
Get started by reading tutorial web site first. This way, he will see how to create simple CSS and see the benefits.
http://www.w3schools.com/css/
http://www.echoecho.com/css.htm
http://www.csstutorial.net/
http://www.w3.org/Style/Examples/011/firstcss
http://www.westciv.com/style_master/academy/css_tutorial/
Than, I suggest since he knows how to design website to check other website source and see their CSS files. Zen Garden is a good start.
If he requires more information, he can always get a book (I do not think it's necessary but if he wants a book), he could try Core-Css.
Definitely get the Firebug plugin for Firefox. Go to a site you like and check out the CSS for it. Turn some off and on, change things, just get a feel for how it all comes together. Great learning tool.
Read CSS: The Definitive Guide, Third Edition by Eric A. Meyer. It's one of the best technical books I've read.
To all the other suggestions I would add Smashing Magazine's list of CSS articles.
I recommend Transcending CSS: The Fine Art of Web Design by Andy Clarke. It's less about the technical aspects of CSS and more about the mindset switch that needs to happen when moving from tables based design to separating content from design.
When I started learning CSS, I found myself coding pretty much the same way. Instead of tables and tds, I was using divs and spans. Still working from the outside (design) inward (toward the content) and designing my markup and contents around the look of the page, locking it into the design. Transcending CSS gets into the process of going from the inside (content and markup) out (design) leaving the site's appearance flexible.
Technical info is easy enough to find. I tend to frequent W3Schools.
I'm a big fan of reading tech books, so I learned from Beginning CSS Web Development: From Novice to Professional
I learned a lot from Eric Meyer on CSS and More Eric Meyer on CSS. The books take you through several examples step-by-step, starting with unstyled pages and explain the purpose for each step along the way. They would only be a starting point though, since they're a little bit dated. Sites like A List Apart will give you the most up-to-date information.
Start simple. Read a few sites like A List Apart and Position Is Everything.
Don't try to replace your whole site at once - change one piece at a time.
Keep testing it in different browsers - the earlier you find out it looks different in one (or all!) the better.
The book that got me started was Web Standards Solutions: The Markup and Style Handbook. by Dan Cederholm It is not a reference, but gives you a good start with real-world examples. Dan does a good job of holding your hand, taking it slow and not boring you. I bought it several years ago and still refer to it on occasion.
This is the only CSS book I own. I use the web as my CSS reference.
SitePoint have a large amount of tutorials and reference on this. They even have a book that sound like it would answer your question directly!
HTML Utopia: Designing Without Tables Using CSS, 2nd Edition
http://www.sitepoint.com/books/css2/
with 4 chapters available free
For French there is a good site : http://www.alsacreations.com/ there is tutorials on HTML, xHTML and CSS and many examples (how to create "pretty" menus etc...)
I learned a lot of CSS by downloading free site designs from http://www.oswd.org/ and trying to implement the same effects on my own. It also gave me some insights into ideas for site-wide design patterns in CSS.
I'm a fan of the brute-force approach. Learn a few basics then start trying to recode your HTML using pure CSS. Every time you need a new technique, google it. You may want to subscribe to the CSS-discuss mailing list or read the wiki.
http://www.w3.org/Style/CSS/#specs
Someone already listed a w3c link. This link goes to the specs which is how I learned what I know about css. Anyway, start with level 1 then move on to the other levels. Well, level 1 should get you most of what you'll use so you may just want to learn level 1 then google the other things you want to do as needed.
I have found that using a DreamWeaver template is a good first place to start when creating a new page. They have made some very simple templates that allow you add any formatting you want, you just need to know things like 2 or 3 columns or elastic or fixed. Before I started doing this, I was constantly trying to figure out how to position stuff, but this has helped a lot, at least giving me a start.
Also consider a reset CSS file. It really helps dealing with browser differences.
Along with this, of course read tutorials and search the net.
Have a look at the Web Design From Scratch website. It has been really useful to me.
One important concept that most references are missing is that the CSS attributes aren't independent or cumulative. The most important properties, 'display' and 'position' react to each other and even change the behavior of other attributes. They interact in such a way that any guide that tries to teach these attributes independently is fail.
Most people doing HTML/CSS don't understand this, and are stuck fiddling without a real clue.
The only book I've found that relates these attributes at all is "Pro CSS and HTML Design Patterns". Eric Meyers book might... Personally I hate the style "Pro CSS and HTML Design Patterns" is written in, but its still the most effective guide to CSS that I have found.
I wrote an overall intro guide including some good CSS links elsewhere (see the comments too)... might be useful.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I like the simplistic look and design of some of the Microsoft blogs. Alas, I can't join the Microsoft dev party and create my own development blog on the blogs.msdn.com page because I don't work at Microsoft, and I already have my own wordpress blog.
I was looking to have my blog styled to one of the default looking themes shown here: http://blogs.msdn.com/jmeier/default.aspx
Could Microsoft take legal action against me if I used a stylesheet from their page? If I made my page 'based' off their stylesheet, e.g. written from the ground up, would that be copyright infringement?
Could Microsoft take legal action against me if I used a stylesheet from their page?
Absolutely, since you infringed their copyright. On the other hand, it's debatable whether the stylesheet alone constitues a sufficient threshold of originality to justify legal actions1. At the least, taking without asking is often considered rude. ;-)
1) No. It certainly doesn't. A sophisticated design however will.
Yes, you can get in legal trouble for copying a site's stylesheet since it's typically a copyright violation. Worse, you could get publicly bashed on blogs like youthoughtwewouldntnotice.com, making such blog posts about you high-ranked Google results for your name, thus tarnishing your reputation irreversibly.
Don't do it, it's not worth the risks.
You could. You probably wont.
Most importantly: Why bother? CSS is pretty simple, it's essentially positioning a bunch of boxes around, and colouring them..
Just look at their CSS files and layout, and reimplement it yourself.. It'll probably end up easier than reworking their CSS to work with your site (unless you completely copy their site, including the CSS, HTML and layout images), plus you'll learn a lot about CSS while you do it.
AFAIK, and IANAL, and all those other useful acronyms....
Under UK law, I believe you can get away with this kind of thing as long as there are at least 6 demonstrable and obvious differences between the copied article and the copy. Since I'm not a lawyer, I'm not going to go into what constitutes a demonstrable and obvious difference, but I would imagine a colour change would count as one...
You would obviously have to check the laws of your region before taking this advice.
Of course you will, Microsoft China was in a similar situation back when their Juku Blogging Service was found out to be a rip-off of Plurk, and yes, line by line code copying.
Microsoft responded with: “Microsoft takes intellectual property seriously, and we are currently investigating these allegations. It may take some time due to the time zone differences with Beijing.” when they were asked about it.
Here's a link to that article I was referring to.
I think Microsoft uses one of the templates that come out of the box with community server. But even if they didn't, I haven't heard of a case of someone having a cease and desist based on leveraging someone else's css.
Technically, they could. It is a violation of their copyright. If they exercised this right, however, it would likely be a PR disaster.
I think you're probably safe if you use it.
This would be a horrible idea, but you couldn't get into any trouble if you simply linked to their css.
You could also link to a copy of their css that was located somewhere else that is not associated with your website ;o)
Just some thoughts ...