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.
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 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 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
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.
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.