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 7 years ago.
Improve this question
As the title says, I want to 'purify' the CSS of my rails application, to find unused CSS selectors.
I found a gem called deadweight but is too old. I can't even install it today (Dependencies failing)
So, is there another or actual way to clean the CSS? or an alternative to deadweight?
Thanks a lot!
As mentioned in the comment, there is a good reason why you shouldn't be looking for such a tool - javascript. Even though, given selector might not exist in your templates, you might have some javascript which will add a class to one DOM element, an attribute to another and you might have another rare case which will add another class to another element or move it complete somewhere else inside the DOM.
To actually find whether your CSS selector exists or not, your tool would need to render all your templates and keep executing random js events until given selector shows off - and it will need to be able to tell whether it is ever gona find it. This is a halting problem, proved to be computable impossible to solve.
That being said, you can always use tools like the one listed on other answers - they might give you a list of suspicious selectors, however you will need to spend significant amount of time with every single one of them to find if there is a single case in your application when it can actually be used.
Word of warning: DustMe crawl the website through all the links on your page to get a better view of whole website - you don't use link_to ..., method: <post|delete|put>, do you?
Here are a few other solutions that might be worth trying:
dust me selector Firefox add on
Helium Tool
Related
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 2 years ago.
Improve this question
I am new to CSS and I wanted to know what is the best practice Internal Style or External Style or Inline Style as a beginner. Please tell me the basic difference also.
Here, you can find the differences between the three: https://www.w3schools.com/css/css_howto.asp
The most common one on regular websites are external stylesheets. It's the cleanest way because you separate your structure (HTML) from your styles (CSS). Internal CSS is not used a lot when hard coding a website, but it can be legit in some module based architectures. Inline CSS is also used a lot when you work with JavaScript to add styles to elements programmatically.
Edit: as cooskun wrote, the specificity is different between internal/external and inline. Inline get parsed at the end, so it is more specific. With internal and external it depends on which you declare last.
[Please try to Google your question before you post it, I am sure this has been asked before. I am not yet allowed to comment questions]
The first thing is the specificity. I could explain this detailed but it's better to have a look on this fancy website which explains the specificity perfectly.
CSS Specificity
The second reason is the code organization. If you prefer inline-style then you can't reuse your code and it makes the code hard to read, hard to maintain, hard to ...
My recommendation, go with external styles. When you have more experience in CSS, you will know where is the best place to use inline styles.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I also found this post, Why should I not use style IDs using CSS? saying
Styling IDs goes against DRY principles and is something that should
be avoided, if it makes sense. There are situations where you need to
style a single object and you know it will never be shared with
anything else on the page so I think saying never style IDs is
disingenuous, as long as you're aware of the maintainability risk and
it's acceptable do what you need to do to get the job done.
What I use more or less all the time is querySelector/querySelectorAll
They give you a whole lot more than getElementById can, though can do the same as well like this, using CSS selectors
var el = document.querySelector('#foo');
Btw, id an element is not bad practice, though sometimes it is not as practical as using classes, mainly as they always need to be unique, which on the other hand is their strength, find one using getElementById is fast.
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 8 years ago.
Improve this question
I am starting to follow the SMACSS principle when writing CSS. Having read the book twice, I think I got a good grip on the theory, but now I've got some problems putting that to actual work.
In my base folder, I've got normalize.css together with a custom CSS reset, that for some parts overwrites, for other parts extends normalize.
Now I've created a class that removes all padding & list-style from a list. So that class depends on the styling defined previously, but is neither state or module to me.
Where do I put in such a class?
As said by Evgeniy this should be in base in case you want to use it as default.
But another concern: If you don’t fetch normalize.css via bower or npm or git, you should best modify the css there to fit to your styling instead of overwriting rules later on. This saves you filesize and also keeps specifity low and under control.
If you fetch it with a package manager there’s still some post processor like uncss which can remove the duplicated rules in a post processing step. It can be a bit tricky to configure but works pretty well and can save a lot of bytes.
If this modification should be applied as default for all lists (like reset) - you need to put it to BASE.
If this modification is only for some special pages, then use THEME.
In other cases it should be placed into MODULE, as some base class like .m-list or sub-class .m-list-plain
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'm starting a new ASP.Net based project using javascript, JQuery etc on the browser.
I'm no expert at javascript and (after years of C# etc) get annoyed with its unstructured, typeless nature, no class hierarcy, everything global, etc. (It may not really be as bad as it sometimes feels!)
I'm aware there's various projects about to make javascript 'better' - things like knockoutjs, typescript, node.js and others - and I'm sure they all have their strengths and weaknesses, and probably one can use combinations of them.
I'm interested to know people's experiences and recommendations for what to use to make the javascript side of ASP.Net programming a little more structured (more like C#?) without too much of a learning curve.
Well first of all as javascript syntax is C-like you can write it in such a way that code will look like C. For instance check source code for asp.net ajax library.
Second, there is number of projects which were aimed to help write C# code that is translated to Javascript, that can help you as a starting point. Check http://sharpkit.net/ for that.
But regardless of what you are going to use you absolutely have to understand how javascript works in browser, what is DOM, what facilities window, document and navigator gives you etc etc
I belive that is your main problem, after all, it is really easy to learn how to use namespaces in javascript and bring structure to your code.
Also typescript that you mentioned in comments is really good at making code cleaner and more structured. It also adds classes and inheritance and types and some other cool features that you miss in language again.
So to sum up - you have to learn browser environment, the same way you have to learn .net classes on top of knowing c#-language. You can learn some easy tricks like AMD/require.js/js-namespaces to bring structure to your code, or since you are new and came from .net world - just adopt typescript.
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.