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.
Related
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
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
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 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:(