-3

Well, as the title says: is it consider as bad practice to use empty divs to style the page? of course if it's performance wise(instead of using images for example).

And second question is: is there any difference between div(as block element) and span(as block element) in any term of performance or anything else?

Thanks.

tieysha60
  • 21
  • 2
  • 2
    I know this is your first question, and so you'll get forgiven for such a bad question.. but this site is not meant for questions like this. Questions should contain decent programming issues, with example code and details. Any questions that are asking for opinions, for others to do work for them, and other kind of things, are not allowed, and will be removed after a while. – Lee Jul 28 '16 at 13:23
  • What kind of styling are you talking about? I can't see how an empty div could be worse for performance than an image. – JJJ Jul 28 '16 at 13:24
  • WHAT?! I'm not asking for anyone to make the code. Yes, I'm new, but not stupid and not lazy :) I just don't understand for example what is the exact difference(if there's any) between `span {display:block;}` and a default div. And how bad is it to use an empty divs for styling if there's no other options... you know... for example some lines... anything. – tieysha60 Jul 28 '16 at 13:31
  • Juhana, exactly... but sometimes you want to draw a line for example, and you can't use `before` or `after` for the same div element, so you need a new one just for that. So I don't know how bad practice is it... just learning, you know :) – tieysha60 Jul 28 '16 at 13:32
  • 1
    I wasn't referring to your question, but was giving advice and examples. Although I was kindly asking for you to either edit your question to include code examples of what you're asking, and show us that you've at least tried things.. or delete it. – Lee Jul 28 '16 at 13:36
  • You can use `:before` and `:after` on the same element. That's why they are two separate pseudo-classes. A common example I like to use is to use a styled checkbox/radio button. Using `` after a hidden `` for the text and `label:before` for the empty box CSS and `label:after` for the `:checked` display of the dot/checkmark CSS within it. – Sunny Patel Jul 28 '16 at 13:37
  • Ok, Lee... nvmd ;-) – tieysha60 Jul 28 '16 at 13:38
  • yes, I know about `before` and `after`. I'm asking if it is not possible to use them for example, you know... – tieysha60 Jul 28 '16 at 13:39
  • @tieysha60 This site isn't for asking just any question about programming. Lee isn't calling you stupid or lazy. He's just letting you know why you're getting downvoted. I would head over to the help section where you can read up on what kinds of questions you should ask here. – MiniRagnarok Jul 28 '16 at 13:39
  • I think we just didn't understand each other :) – tieysha60 Jul 28 '16 at 13:44
  • @tieysha60 If you use `span` with `display: block` in stylesheet then your element is dependent on stylesheet. If you remove stylesheet or it fails to load, your `span` will be no longer a block element. While if you use a `div` it will be displayed as a block element. – Mohammad Usman Jul 28 '16 at 14:14

1 Answers1

1

To answer your first question bluntly, yes. If you are resorting to using empty divs to style a page, you need to learn more about the features that CSS provides. Given enough thought, you should be able to set up appropriate margins, or line-heights to make that happen. Or start working on a flexbox layout.

And for your second question, all elements are basically the same. But we appropriate different semantics to provide meaning. Quoted from SO: What is the difference between HTML tags <div> and <span>?:

  • But in modern HTML all elements are supposed to have meanings: a <p> is a paragraph, an <li> is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using <blockquote> whether the content was a quote or not.
  • So, what do you do when there is no meaning to the thing you're trying to do? There's no meaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design.
  • For this reason, they added two more elements to HTML: the generic, or meaningless elements <div> and <span>, because otherwise, people would go back to abusing the elements which do have meanings.
Community
  • 1
  • 1
Sunny Patel
  • 7,830
  • 2
  • 31
  • 46
  • So... no difference? :/ If I'll use `span` as a `display:block` would it be EXACTLY the same thing as the normal div? by any meanings? would the only difference be the tag name and that's it? am I getting this right – tieysha60 Jul 28 '16 at 13:40
  • Sorry, I forgot to add that the differences would be in each browser's default stylesheet for that particular element. To see this, inspect any div on a page (Chrome is easiest) and scroll down the list of *styles*. Towards the bottom, you'll see the defaults used. A nice short read between `` and `
    ` can be found [here](http://htmldog.com/guides/html/intermediate/spandiv/).     – Sunny Patel Jul 28 '16 at 13:47
  • ok, thanks. I think I got it – tieysha60 Jul 28 '16 at 13:58