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.
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 6 months ago.
Improve this question
I have read many posts Like this one That talk about the similarities and the pros / cons of using SCSS $ vs using custom properites or var() in CSS.
I get all that and I understand the gist. My question is: Is there any overhead or degradation by forcing the browser to parse CSS variables, vs compiling the CSS and the browser just displaying the native css outputted by SASS.
We are starting a large scale project, and I am OK using custom features as I don't see a need for SCSS any longer since CSS introduced the usage of variables. I am just worried that this puts an unnecessary burden on the browser when we can just compile one time and the variables are parsed.
Am I being too analytical about this or is there something to placing the burden on the browser?
So there have been some tests regarding the performance of regular CSS —compiled from SCSS or otherwise— vs CSS w/ Custom Properties. I've done some myself with ~5k CSS variables on 10k+ HTML nodes. Those figures are similar to some of the other few articles I've seen. The performance delta is ~0.8% slower with custom properties. It's not 0, but insignificant for most reasonable use cases; we're talking >50ms differences.
I believe the actual performance issues come with style recalculation when changing variables via JavaScript. If you're using a variable declared on a parent, that is then changed, the browser will recalculate all of child elements using said variable. So better scoping and setProperty > inline styles (making changes to the HTML attribute) can give you better performance in that scenario.
Here's an interesting post on performance with this on Chrome, specifically: Improving CSS Custom Properties performance.
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
In my web project, I made an extra CSS file (for example css3.css) only for CSS3 properties. That means I separated the CSS3 code from my main CSS file (style.css). It helps me maintain the CSS3 properties for cross browser compatibility issues.
What kind of problems, if any, will this create for my website? What kind of problems, if any, will this create in terms of maintenance?
Thanks
No, because there is not a strict CSS2 vs. CSS3 separation, plus it would be a nightmare to maintain.
You want to address different browser vendors with post-processors like Autoprefixer for instance.
Or target different IE version via conditional comments.
On top of that, you should deliver a single, minified CSS file of your app, rather than many separate ones [unless you have good reasons for the split, e.g. loading a separate theme for mobile devices on slow connections].
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.