Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Is this bad practice?

Featured Replies

In my CSS if I'm styling a div I refer to it like this:

 

div#header {
selector:value;
}

 

rather than

 

#header {
selector:value;
}

 

Noticed the appended "div" before the hash.

 

I do the same with anything I'm styling, img#image, h1.something, h2.something, div.something etc.

 

Is this bad practice?

 

The reason for me doing so is so I can pick out a div or img immediately.

No it's not, Sometimes you want so assign something that should only ever be applied to divs.

 

It's quite easy to accidently get mistaken and put something like

 

<p id="whatever">

 

If you've used div#whatever then you've just prevented impairing the layout :)

 

Plus it's easer to read, and with classes, you may have a class which does something, however it has to be tailored slightly different for use in a <p> tag as opposed to how it's used in a div tag.

 

so using

 

div.format{}

 

and

 

p.format{}

 

Means you only have to remember the class="format" for what you need, but it will apply the one tailored to that specific element.

 

It's not bad practice, but could be a little excessive. You could comment your code to prevent having to re-create multiple elements for the same thing (or having to creating unnecessary element lists).

 

At the end of the day, it comes down to that balance between file size and usability. Trimming a file completely makes it near impossible to develop with. While not trimming a file down of clutter again means their's more to look at and harder to develop for. Everyone has their own balance between file size and usability. People tell me to keep all my css as one liners, but that's difficult on smaller monitors.

  • Author

I append the element i'm styling as to make it readable so I can pick out what I'm looking for immediately.

why not use a comment if you are so worried about it

 

/* Div */ #header {}

 

/* image */ .image {}

 

 

 

It might get messy but at least that way you won't have to create duplicates of things that do the same thing for different elements, as doing it that way for everything will mean that if you wanted to use the same class for two different elements the way you are doing it you would have to make two classes that are the same...which is a bit pointless in my opinion.

 

 

 

Coding is one of those things that is just a comfort, I have been told that I code css messily but I think that is just because I have a system and unless the css is a huge file I will never comment anything, and just know where things are...where as if someone else looks at it it looks unorganised...its not its just different to how others code :p So as long as you are not creating classes (ids...ect) that are identical to other ones there is no harm in the way you are coding, its just if you end up having 7 things that are the same but for different elements then you might want to think of condensing it into one and just using comments so that you know where things are.

  • Author

I'm not "so worried" about it. <_<

 

Wouldn't my method work better because you don't have to have the extra code (/* */) ?

In some ways yes, but in other ways you'd have to duplicate an element style to apply it to multiple elements,

 

say you want the styling for both paragraphs and divs.

 

You have to have

 

div.mystyle{
property:value;
property:value;
property:value;
property:value
}

p.mystyle{
property:value;
property:value;
property:value;
property:value
}

 

Which is more than

 

.mystyle{ /* Para's and divs */
property:value;
property:value;
property:value;
property:value
}

 

Although granted you could do this

 

div.mystyle, p.mystyle{
property:value;
property:value;
property:value;
property:value
}

 

The savings are fractional, i suppose it should mostly be down to preference. Which is easier for you to work with? Which would be easier for others to pick up? If it's quicker for you, then those savings in time more than likely outweigh the savings in bandwidth.

  • Author
The savings are fractional, i suppose it should mostly be down to preference. Which is easier for you to work with? Which would be easier for others to pick up? If it's quicker for you, then those savings in time more than likely outweigh the savings in bandwidth.

 

Ok, I agree.

 

I will stick with this method then. :)

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.