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
Assuming that one is developing a web application which is sufficiently non-intensive that overhead is not a concern. Is it reasonable to implement CSS solely in Javascript/jQuery and completely abandon external css files?
$('<div/>').attr({'id':'special_box'}).addClass('little_box').appendTo('body')
$('<div/>').addClass('little_box').appendTo('body')
$('<div/>').addClass('little_box').appendTo('body')
...
$('.little_box').css({'color':'red'})
$('#special_box').css({'color':'blue'})
Is there anybody advocating this complete conflation? Is there anything that completely prevents it or makes it evidently unreasonable?
EDIT
The unreasonableness, as helpfully explained below, is that the jQuery css function is creating styles that are being applied to the individual element and not creating/augmenting master css rules as I'd assumed.
Although there do appear to be ways to achieve this conflation. I am not qualified to analyse them. Thanks all.
It is not reasonable, not only because it is slow (as you'd expect), any .css calls involving classes, e.g. $('.little_box').css(...), will apply css to only elements of that class that exist at the time, not .little_boxes created in the future.
why do you want to complicate yourself while development, CSS is far easy and better to use than doing css through javascript or jQuery.
Apart from being very time consuming to physically code, you CAN do this. However, it's alot more intensive than CSS and prevents alot of the advantages of CSS.
It's like building an oil rig and oil refinery to fill your car up. You could do it, but why not just go to the petrol station?
I would not advocate this complete conflation - certainly for the reasons that others have already stated, but also for these two reasons:
1) If your application grows and has multiple .js files then it will create an additional headache if you try to implement modular loading of the files using something like require.js
2) Again, if your application ever grew very large or you decided you wanted to, it would make it more work to start using Sass
As I'm sure is becoming apparent, the cons massively outweigh the (dubious) pros of this idea.
It's entirely possible to build a site that way, but it will be more work to do it, and also more work to maintain it. So, there is nothing that completely prevents it, but depending on the amount of styles it may be so much extra work that it would be unreasonable.
There is also a performance factor. CSS stands for cascading style sheets, and with such an approach you would lose both "cascading" and "sheets", left with only the style. In practice that means that you apply each style to each element instead of specifying rules that apply to multiple elements. The jQuery selectors can help you to apply the same style to multiple elements, but it will still loop through them and apply the style to each single element.
As this happens in the browser, you may get a noticable delay when the page loads. Also, the styles would be applied after all the elements are created instead of already be there when the elements come into existance, so the visitor may see the page being displayed completely without styling for a shoft while, then freeze completely while the styles are applied, before it displays correctly.
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 4 years ago.
Improve this question
$('.desktop_search').css({
visibility: 'visible',
width: '100%',
opacity: '1'
});
For instance, I'm changing the element with class desktop_search using JS above. Will it be better to provide all those CSS in my CSS Stylesheet first and just do toggleClass(new_class_name) or is it the same if I did the above? I'm asking because I've changed quite a lot of CSS styles using JS and I'm worried that it might have an impact to my performance. Most of the JS I use is to change CSS when a particular element is clicked or when the page is scrolled, etc.
EDIT:
More details. For example, I'd like an element this_element_will_expand to expand from width: 0 to width: 100% when I click on trigger_a_element which is a. Therefore, I will use this JS:
$('.trigger_a_element').click(function() {
if ($('.this_element_will_expand').css('width') == 0)
$('.this_element_will_expand').css('width', '100%');
else
$('.this_element_will_expand').css('width', '');
});
To answer the question of "performance" between using JavaScript to set inline styles versus having a style sheet has a couple points to consider.
Redraws: There is a very negligible difference between the two. One could actually argue that inline styles have actually a performance improvement over style sheet, but it is not something that should ever become a bottleneck in your app.
Page Refresh: The browser will cache the style sheet as well as the javascript. So they both should be performant on page load.
So I would argue that this is not a performance question as much as it is a maintainability question. Is it easier to have a css class that stores styles you are planning to use over and over again. I would argue yes. If you are setting an inline style that is very specific to one use case then I would argue that it would be easier to maintain the style inline in the javascript.
It has become good practice in recent years to avoid using JavaScript for styling as much as possible. Especially on mobile devices, CSS is typically hardware driven, whilst JavaScript can be taxing on the processor (which means CSS animations for instance runs faster and smoother).
Defining styles and using addClass / removeClass would be much better, and more extendable. If you want this to happen in more than one place for instance, and the exact styl changes at some point, you can update it in one CSS class instead of doing it multiple times in the JavaScript.
It would be certainly better to use addClass / removeClass since the javascript should not be in charge of manipulating the styles. Refer to this answer
I suggest to you to use tool base on what the purpose the tool. For example, use css for styling, use javascript for dynamic content, use html for structured web. You can use javascript to changing css if thats needed to dynamic content (don't always use javascript if not necesryly)
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 5 years ago.
Improve this question
So after trying out Vue.js for a little while, it got me thinking...Why do we have to use components? I don't understand the hype behind them as I can just take a for loop and create a div and get the exact same output as if I were using components.
Vue.js's documentation even says:
Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code.
But again, it seems it can be done with for loops what Components give you.
The same goes for React as well.
If someone can explain it better, I am all ears.
Thanks.
Not using components in Vue.js or React is like using a hammer for everything. You can obviously try to nail a screw with a hammer, but not everyone will understand you why, as you can implement every GUI element using divs instead of CustomXComponent.
Using components is like using a screwdriver to screw something. Not only their names and shapes are coherent with the thing you want to achieve, but they are faster to do so. Not using it may look like an unprofessional behavior, just not adapting to the right tools for the right things.
If you look into a bunch of divs, you have to look down further what they do. If I give you a custom component named AutoCompleteSearch you may abstract what it is doing, even though its implemented using plain divs.
For the same reason that you would want to use a for loop instead of copy and pasting the same thing N times - the end result to the user is the same, but you'd have code that's significantly more difficult to understand, maintain, and update.
Components are extremely useful because they are meant to be used in a much more complex context than a handful of div.
For example, Imagine if you needed to add a calendar to your page along with a big table of data, a large form, dialog boxes and other UI elements. It sure is doable without components but it will be much easier to maintain and more readable if you split your code into components.
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 years ago.
Improve this question
I've been working on an Admin interface for a desktop-first web application. There will be an iOS application for mobile users and if we need browser support on mobile, a mobile-first UI will likely be designed. I've only been working with CSS/JS/HTML for about 30-days, so please forgive any mistakes I make.
to get rolling, I started using Bootstrap, however, I ran into a number of issues and decided to abandon it. I do not require responsiveness in the traditional sense of a grid system and fine tuning my design using a grid model was truly painful.
I discovered on my journey that using #Media, I could adjust the CSS for various elements based on screen resolution and even go so far as to remove an element using width="0" and introduce a new element by turning it's width on. I'm using flexbox for my layout, which I find to be incredibly effective to work with and provides me with solid control over the presentation of my UI.
I plan to eventually convert my admin into a EmberJS app, which give me even more control over when and how elements are displayed.
Although I'm still learning, I've found resources like w2schools.com to be very helpful in adding elements like a sidebar using plain JS and CSS. This keeps my application simple and easy to follow, rather than having to work with a monolith framework.
My question is, is it acceptable to adjust your design based screen size and add and remove elements using a width="0" as the toggle or is there a better way? Also, is it acceptable to adjust your layout overall using #Media versus a grid?
I'd like to eventually turn my app into a native Windows app using Electron so I'd like to not make any bad choices that will cause me problems later.
Thank you for your help.
is it acceptable to adjust your design based screen size and add and
remove elements using a width="0" as the toggle or is there a better
way
there is a better way:
use css display: none property to hide and show elements but this also removes the space occupied by elements.
If you just need to set visibility off then use visibility: hidden
is it acceptable to adjust your layout overall using #Media versus a grid
yes its fine to use #media queries. But using bootstrap grid system is pretty easy and it can also handle cross browser issues which otherwise you would have to handle manually.
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 8 years ago.
Improve this question
Im trying to get a sense for proper web development techniques , and im wondering if there are any habits i should be developing outside of css usage in terms of structure and layout.
What I've gotten so far is a sense that strategic and logical use of divs can help to give needed control when working with javascript and css.
But are there any other basic things i should consider that may not be aware of?
For example, I know people used to control layout with tables, but is that still a thing? Or is it now bad practice?
Looking forward to your suggestions.
Regarding your table question- People generally choose divs over tables, BUT some things cannot be done well without tables. They still have their place. Divs and Tables inset within each other are often used for datagrid styled layouts for example. Often replacing tables with divs creates a nasty (oversized) amount of css code. If you can use divs cleanly, that is perfect. If it overbloats your code, then use the simpler cleaner old faithful table code - or combine them where it makes for better results.
More info on that here: Tables instead of DIVs (Joel Coehoorn's detailed answer: "The whole "Tables vs Divs" thing just barely misses the mark. It's not "table" or "div". It's about using semantic html.")
Regarding the topic of non-CSS since your question also refers to layout design formatting:
There are some things you cannot do well also without pure CSS, that in and of itself allows modern formats to work on multiple devices. This will reach more customers.
For newer layout types for sections of pages needing icons or photos, look into the use of inline-block styled lists. CSS does wonders with them. It is a nice third alternative.
For cross-device development, you should check out responsive and fluid formatting options. A good place to start is to look at http://html5boilerplate.com/ and also http://www.initializr.com/ (boilerplate and bootstrap).
If you haven't worked with them before, look into media queries for browser sizing and device orientation displays (landscape or portrait) - part of the fundamentals in responsive web development. You can then use your regular html within the constraints you set with these.
Try to think of your pages/documents in terms of structure rather than appearance. For example, a book is made up of a title page, table of contents and chapters. Similarly, the contents of a web page can usually be broken down into logical blocks, which are then styled as required. Don't forget that web pages may be read by screen readers - your want to structure your page so the spoken output makes sense.
There has been a discussion of tables vs CSS at Why not use tables for layout in HTML?. You may also want to check out CSS Zen Garden, mentioned in that thread. Beyond this, I strongly recommend validating any HTML and CSS you write. Check out http://validator.w3.org/ for that purpose.
Divs are span are a better options for laying out a page. Tables should be used if tabular data is to be displayed.
Other than that you should mostly consider re-factoring redundant code regularly and resolve paths to directories in config files. This will help you to manage your project better. Redundant code can become a huge problem, since making changes requires changing code at several places. Make sure that you re-factor code that is being used more than once or twice into functions and call them instead.
Try diving into CSS frameworks such as bootstrap or foundation since a big community contributes there and are usually built with best practices in mind. You will be surprised to see the problems you run into have already been encountered by many others and they have found an efficient way around it too. There are frameworks and libraries for JS too. Feel free to explore.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
i'm about to choose between using an animated gif, flash or html5/js for a short animation to display a sequence of different images.
what are your thoughts on animated gifs? Are they dead? Should I use HTML5?
THanks for some interesting thoughts. :)
I'd say an important factor is the size of images you want to cycle. For very small images, perhaps sub-100px, an animated GIF might be ok. For anything larger, such as portfolio or item images, they're pretty much unacceptable. It's not so much about semantics or SEO, but rather image quality; GIFs simply don't look good for complex (e.g. photographic) images.
HTML5 doesn't come in to the equation, the markup will be almost identical between (X)HTML4 and HTML5. The javascript is the key part in cycling images, and there are a whole bunch that do all sorts of fancy things, depending on your needs. One of the most well-known jQuery plugins is the cycle plugin. It's very easy to implement.
To return to the idea of semantics and SEO, a GIF embedded in a page doesn't look like many images, so search engines won't know it, meaning any one performing an image search pertaining to what you're trying to display won't find your images. If you use a JS cycle approach, all of your images will be embedded separately in to the markup, and search engines will pickup on this. It does allow users to download the individual images, whereas with a GIF it would require either deconstruction in a GIF editor or a screenshot, but this will either be an advantage or hindrance, which you can consider accordingly.
To summarise: you almost certainly want to cycle to images with javascript.
I would definitely not use flash for something so simple, especially when it makes that part of your website inaccessible to devices such as the iPhone, iPad, etc. HTML5 is nice, but no browser supports 100% of it, and some of the mobile browsers are very lacking in support. A gif would probably be the easiest hassle free way of doing this.
Animated gifs are not good or bad. They are a tool that is widely supported. If they fix your problem you should not hesitate to use them.
Animated gifs would work everywhere.
Flash would be extremely heavyweight and creates a dependency to a flash.
HTML5 is nice, but is not supported by everyone yet.
Depends how complex it is... if it's only a short series of images simply use JavaScript without HTML5. You'd only have to write a few lines of code to produce the effect.
Animated gifs aren't dead. In fact, they're probably more popular now than they have ever been because of so many animated gif memes. That being said, animated gifs can be useful, but consider the advantages of a more dynamic format, that animated gifs can't recreate:
Transitions between images
Can be generated dynamically
File size might be lower
If you don't need those features, or anything else that Javascript provides, then use an animated gif.
As previous answers mention, if an animated GIF is all you need, then go for it.
Flash would be a slight case of overbombing.
If you want something slightly more flexible, you can still use js without bringing HTML5 into the mix, of course.
By making a simple jQuery slideshow out of it, you could buy yourself transition effects and an easy way to replace images. But again, if you don't need that, or that is overkill, then go with the GIF.