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
How many lines can a css file have (practically) for good maintainability? I am dealing with a css file which has 15K plus lines. I want a recommendation on this.
The size of an .css file is unlimited.
Like most files, CSS files can obviously be as long as you want. For improved loading times, and like you mention, for ease of maintainability, the shorter the CSS file the better.
15K lines sounds excessive. Where possible, whenever coding, you want to try and follow the general rule of 'never repeat yourself'. There are probably styles in that file that are very similar to one another or just not necessary. I'd recommend (a slightly arduous task) attempting to compress the file as much as possible, and combine or remove styles.
I don't think there is any definitive good practice limit to CSS file sizes. I've never needed one that is longer that 3000 lines, but a very complex site might require a file larger than that. The basic rule is try to make the CSS file as short as possible to achieve what you need to achieve.
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 7 years ago.
Improve this question
I'm always looking to learn from the best and ensure coding quality.
When it come to CSS styling within my responsive designs, my custom CSS style sheet can get a bit overwhelming. Constantly hitting ⌘ + F (Control + F) to locate my classes.
I could split sections of my classes into multiple style sheets (for example: media.css, typography.css etc...) however I believe calling into to many style sheets may jeopardise performance.
What are the best practices in keeping your CSS organised and well manageable?
Keep in mind that the file structure for production does not necessarily need to be the same as development.
Split up the files logically in development and group them together as needed for production. How the files are organized totally depends on your project. Of course, this implies that you have some sort of deployment pipeline in which to concatenate the files. This is not always feasible for small websites. There are hacky ways to glob files dynamically at runtime on the server, but that adds latency to the total request time.
One important advantage to this is reusability of common styles. You could have style libraries that are included in multiple stylesheets. When you need to change the core library, you're making the change in one place as opposed to many.
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 a beginner programmer. I am currently building my third site, but really my first relatively large one. I have a simple question about best practices. I find it much easier to have multiple styles sheets each for a separate section of the site rather than a large single one thats crammed with everything. Is this considered acceptable in terms of best practices?
That depends, there is no clear cut answer.
There are best practices, but they don't exactly translate to something as simple as having only one style sheet, or having several style sheets.
Some things to consider:
Number of requests. If you have more style sheets you also have more requests to the server, which makes the page slower.
Combining rules that are used on several pages in one style sheet can reduce the overall load time, eventhough it means that some pages will load and parse rules that are not used on that page.
Cacheability vs. initial load time. Having few style sheets with a lot of rules means a longer first load time, but once the style sheet is loaded subsequent pages will load faster because the style sheet is in the cache.
Maintainability. If having more style sheets makes the site easier to maintain, it means a smaler risk for having old unused rules bloating the style sheets.
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 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
And with old web look I mean something like this: http://info.cern.ch/hypertext/WWW/TheProject.html
Now, that's the oldest website. But it doesn't have a lot of content so it doesn't show off that much. I mean like, before good looking CSS. Before you had to worry that much about looks, compared to today. Before CSS if there was that. I am aware that before you styled it with HTML attributes, and not CSS.
So how do I achieve that look? I'm pretty sure different browsers have different default styles, that may vary. So I'm asking for a .css file that makes it all look like back then. Is there such a thing?
BTW, in case you haven't noticed at this point. I love the look the old web had. It's so primitive yet you could make such readable websites, I'm always impressed by it.
So how do I do this? Of course I would be using HTML5 for the structure and CSS for the styling, but I want to achieve that look.
Use pixelated images, ugly animated GIFs, hyperlinks everywhere, poor structure, no CSS, MIDI tracks, and done!
You want UGLY? Ok, I know something ugly. Its called Geo for Bootstrap
Check it out
And I also give you something beautiful