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 8 years ago.
Improve this question
Does anyone know of a good tool that can parse and compare two CSS stylesheets in order to find which selectors have different styles?
I cannot use a standard diff-like tool because the two CSS files have very different layout. I need a tool that can parse and understand the CSS, then look for selectors that actually have different styles in the two stylesheets.
The only tool I've found is the CSS Comparer from Alan Hart, however it gets confused when there are styles that apply to multiple selectors.
Here's what I ended up doing, in case someone else has the same problem:
I used CSSTidy to "normalize" the two stylesheets I wanted to compare. Normalization in my case meant splitting multiple selectors and sorting selectors and properties. An online version of CSSTidy is available here.
After this, I used the CSS Comparer tool from Alan Hart to find out differences between the two stylesheets.
This did the job for my specific requirements.
I tried using CSS Compare. It seems to do exactly what you are looking for. However, it seems to have some issues with multiple selectors. The nice part is that it is command-line driven, so you can set up an automated process if you have lots of CSS files, or you can chain the CSS files together to compare them to one giant resultant SASS file. This tool will show you all the differences, including differences in the values of the classes.
What would be really nice if a tool showed you which styles overrode other styles in the same stylesheet. Many old sites have lots of baggage in this way and filtering it out would be great. Of course, an automated tool might cause issues, but at least something that generates a report like Firebug does, except for every selector and for the entire collection of CSS files, would be great. Sadly CSS Compare is not such a tool, and I don't know of one:(
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
I would really like to learn how to use Twitter Bootstrap 3. The problem is that it seems I can't find a good source to learn it from. Any source I've tried so far assumed that you somehow have some knowledge and wasn't explaining what are the available classes for elements, what are the classes they have used are actually doing etc.
I simply want a source it can either be a book/videos or w/e that will start from scratch and if possible, will use HTML5, modernizr and respond.js to make it cross-browser supported and actually give me a start point (base folder just like H5BP) which I can then later on start building my own websites.
Thanks in advance!
The bootstrap docs are really helpful, probably the best resource.
http://getbootstrap.com/getting-started/
http://getbootstrap.com/components
My first recommendation is to learn CSS in depth. Oftentimes, Bootstrap is just not necessary, but developers rely on it because they are too lazy to master CSS fundamentals. You are welcome to check my book series - Functional CSS - which covers almost the entirety of CSS using practical examples.
If you are keen on sticking with Bootstrap, then you can 1) print the source code for their example (Bootstrap examples) and simply re-implement them on your own, typing each block of code one line at a time and observing the effect, and 2) read the Bootstrap source code. The latter is a bit over 6000 lines and should not take long to go through. And, 3) reflecting on what you have learned in 1 and 2, create personal realistic website that uses Bootstrap.
If you are looking for a good source here is one: http://ieatcss.com/twitter-bootstrap-tutorial.html
3 Step by step real time examples are used in Ieatcss bootstrap 3 tutorial. You can easily understand them without any knowledge of the basics.
Don't worry about learning CSS & other messy things. The tutorials in http://ieatcss.com is targeted at complete beginners, you can easily understand them.
Regards,
Hussain.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Is it a good practice to add prefixes to all css classes to avoid conflicts with possible third party widgets/CMS/etc? Isn't this bad as it adds to file size ?
How far should I go ? For example if my name is John Doe and I work on a business theme should I use JDBT-menu?
Any article on this subject would be great.
Thanks
In my opinion, it's a very good idea to prefix CSS class names, along with implementing a strategy to follow logical naming conventions.
Whilst prefixes can be considered overkill for small projects, the lack of proper CSS namespace support can lead to conflicts on larger projects, especially when using third-party libraries. You can easily avoid such conflicts by prefixing CSS classes with your initials or a short abbreviation of your project name. Even on large CSS files you are only likely to add a few hundred bytes, and there are much better ways of minimising file size.
Take a look at the free online book, Scalable and Modular Architecture for CSS, for advice on CSS naming best practices. http://smacss.com
Personally, I don't think is a bad idea. It may come in handy for future developers working on the project, if they can identify your code from the CMS/Framework code nice and easy.
I work a lot with Bootstrap, and I always use prefix.
The answer is simple.
I would do it, because the increased file size isn't significant to me. Unless you have thousands of css classes, it won't make a noticeable difference. Minify your css and you should not have any issue with css file size (it will have really low impact on your bandwith).
But obviously, if you don't use any other party css, you shouldn't use that.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I have a website, and its separated between sections, my question is:
Is it a good pratice to separate the css files for each section?
Ps.: I have a 'global' css stylesheet.
What is it you mean by sections?
General practice (as far as I know) is to have one global style sheet to style the entire look of the site.
From there you can use combinations of minimal inline styling if needed and perhaps other style sheets for specific "plugin" like objects or sections.
In the end it's your call. There are pros and cons to any way you approach it.
With one giant containing style sheet, maintainability can become difficult. Searching through thousands of line of code 3 months later when you need to make a minor tweak is a bit tough.
On the other side, many smaller style sheet means more external file calls from the website, which can slow load times (minimally).
My personal recommendation for using style sheets, use whatever method makes maintainability easiest. Use lots of comments and logical ordering.
For development I would say it is a good practice as it is easier to find what you are looking for faster or to point other developers to where they need to change some code. You can then bring in CSS preprocessors such as LESS and SASS to "build" your CSS for deployment only.
It depends...
If you feel that people may only visit one section of the site, you could avoid overhead by only serving the stylesheet for that section.
If a user will bounce around between the sections, they will need both stylesheets and it makes sense to merge them.
As far as best practices are concerned, there aren't any one size fits all for segmenting CSS. It is generally accepted to just try and minimize HTTP requests and file size as well as reusing code as often as possible. Other than that, you can use your best judgement.
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
I'm looking for automated tools to help me refactor a bunch of CSS files, for example:
Remove unnecessary selectors (e.g. not used inside the page)
detect repeatable rules inside several selectors and suggest a merge
Are there any such tools?
Thanks!
Yes Google Page Speed does this CSS investigation. Link:
http://code.google.com/speed/page-speed/docs/overview.html
not totally automated, but this one works well.
I like the fact that I can see what I'm changing. While I've done UI for 15 years, there's always little things that I notice myself repeating via using this tool. In the long run, doing things a bit manually is going to make me a better developer.
Doing one that looks for unnecessary selectors is a dangerous game. You could do it, but if you ever find yourself doing dynamic and/or ajax injected divs, you'll immediately blow up your page or app using an automated tool. If you do it, make sure it's not something that works on the fly, without some sort of very good testing environment to verify the resulting output. My current corporate clients would never allow me to use any sort of point-of-request tool based on their requirements of 100% tested and verified CSS.
This tool can do automatic css refactoring, though its value in project still need to evaluate carefully.
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
A web page is usually consist of several areas, header, content, sidebar, footer, and can be more detailed, navigation, logo, slider, widgets...
I use comments to mark these areas in css file, as many others do. And used to scrolling or by search to locate the area while editing the css, it is slow and inconvenient especially when css file grows big.
Is there a css editor can recognize comments and produce an index table for quickly jump from one to another?
Netbeans has CSS selector jump support.
It indexes the CSS file you're working with and lets you choose which selector you want to jump to.
When you're editing HTML you can CTRL+click on the class or id to jump to the CSS rule that styles it (if there are several you get a list).
Here's an example:
Unfortunately, these Netbeans features will completely ignore your comments. I haven't come across a tool that does exactly what you're describing for CSS files.
If you were using a programming language you would probably use Javadoc-style comments, but these aren't typically used in CSS. You may be able to find a tool that will parse them and build an index anyway, but I'm afraid I can't suggest one.
Why not using separate css-files and then glue them in one file with ant? If you are using Eclipse - ant is already there. Or you can use ant as a command line tool.
Try it. You can perform other tasks with ant. For example you can minimize your .css or .js files as well.