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.
We're bringing in outside content to our existing site along with its associated external CSS stylesheet and need to identify the CSS selectors that share the same name across the two files. Once identified, we plan on manually modifying each duplicate in the newly imported file, then changing the HTML accordingly.
Does anyone know of a tool that will do this? One painful way I thought about was to combine all the CSS into one Word Document and going down the page doing manual Finds? That would be nice to avoid though.
There is a firefox plugin called Dust me selectores which is designed to find unused CSS code. It may be what you're looking for.
You could merge the files into one, use a tool like CodeBeautifier with sort selectors enabled. A word of caution though: sorting selectors may change how they are applied to the final document.
Related
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 9 years ago.
I have always heard that it is better to avoid using <table> in HTML.
However, I encountered a situation in which a table would make my life easier when building a page that shows multiple products and their characteristics.
Should I try to hack it so that I do not need a table, or should I just go with a table?
No, you should not avoid the TABLE concept. Learn/Use it to display tabular data, not web layouts.
Learn about those elements from the W3C.
Tables
Div
Span
I use tables constantly in web apps - they provide a perfectly good and predictable way to display results in any browser.
Tables are for tabular data (like an excel sheet, etc)
Use CSS for times when the data is not tabular.
Tables are not dead, you just need to use them right :-)
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.
I've come in at the end of a big Drupal site build, and the resulting CSS files are... verbose and less than tidy, to say the least!
Are there any tools for checking the entire site to a) see if there are unused styles and b) how often styles are used (and thus assist in refactoring them).
I've had a look at the CSS Roundup Firefox Addon but this relies on manually clicking through all the pages and I want to make sure I don't delete any in-use styles.
Edit: found existing post on Stack Overflow entitled How can I find unused images and CSS styles in a website? and this What tool can analyze my site and report on unused / unneeded CSS?
csslint can help, though i can't say it'll do everything you want
http://csslint.net/
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.
Is there a "best" way to edit CSS?
I'm looking for a designer tool. It has to "visual"... less code.
Visual studio does a good job but it seems to be lacking when it comes to the actual design stage.
My suggestion is CSSEdit by MacRabbit. It's focused on just editing CSS, and is very visual without hiding code. You can edit CSS attributes through a GUI, or directly edit the text in the code. You can preview your work on any site, even applying your edited CSS to the display of live Web sites. As a plus or minus depending upon your platform of preference, it's a Mac only application.
Here's what I do:
Design the page semantically, using lists, headings, paragraphs etc.
Add classes and ids where appropriate.
Open the unstyled page in Firefox.
Open Firebug.
Write/edit the CSS there and see the results instantly.
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.
Does anyone have a check list on the best practices for XHTML?
Have a look at XHTML Best Practices.
If you use the W3C validator service, you'll learn a lot about how your XHTML should be structured.
Ensure the benefits outweigh the pain (otherwise stick to HTML)
Validate
Separate style from content
Be accessible
Be progressive
Separate your concerns (keep CSS and JS in external files)
Use UTF-8 (unless you are working in a language where 16 or 32 is more efficient)
Test in multiple browsers as you develop (fixing all the IE6 bugs at the end is harder then fixing them as they show up)
I'd say best practices are to make your code clean. Organize your tags. Put notes if you want in your code /This is a note/. Have an external style sheet.
Like may already point out, validate often at http://validator.w3.org/
validate your CSS too at: http://jigsaw.w3.org/css-validator/
Also, don't overlook the
<meta name="Description" content="you put in here the description of your page. It will appear on search engines" />
Give a specific title to each page.
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 11 years ago.
I'm looking for a tool that can analyze a large site and look for orphaned css.
I work on this project that has gone through a couple of UI updates. Scrapping the whole thing and redoing it all would take forever. What I would like is a tool that reads a css file and then lets you browse the site, keeping track of what definitions were used and how often.
Then I can go through the css file and find code that I did use and determine if it is indeed deprecated and can be deleted.
Thoughts?
Firefox has a great extension called Dust-Me Selectors for flagging up classes/ids that are not used on the current page.
There's also TopStyle, which promises to help you do the following (I've not used it, and can't vouch for it though):
Preview CSS while you write it.
Easily create pleasant color schemes for your site.
Style Checker validates your CSS syntax against multiple browsers.
Use Site Reports to see at-a-glance where CSS styles are used in your site.
Style Upgrade quickly replaces all outdated HTML code with equivalent CSS styling.
Internet Explorer 8 has this feature called Developer Tools which can help you with that. You can read about it from the IEBlog entry. If you don't have IE8 you can download the toolbar from here.
I would suggest CSSEdit. Been using it for years. Has an inbuilt validator and an x-ray inspector.