|
Firstly, I make it a point to put nearly all formatting in CSS. This will make all the pages look similar. Too many times over the years, the web page style would change depending on the programmer. If I'm working with someone that is not strong in CSS, I tell them to just use divs and do not add any styling; I'll do it.
I typically have a Main (parent) CSS document and then it's children, based upon its function. In the Main, the basic structure of the web pages, fonts, size, and other selectors that will be reused. For the children CSS documents such as a sidebar, formatted tables for tabular data, printing, and even colors I have separate. Having all colors separate allows me to easily create themes and plug style such as a sidebar or tabular data when needed. And yes, I do use multiple selectors for HTML attributes; such as:
<div class="content theme p8 mt50 b red"></div> And for the CSS coding guidelines, I put everything on one line; I don't make it look like a programming function because CSS is not a programming language.
|
|
|
|
|
Quote: And for the CSS coding guidelines, I put everything on one line; I don't make it look like a programming function because CSS is not a programming language.
Ha, I do and I don't. Generally depends on the project I'm working on and the mood I'm in where CSS is concerned as to whether they get the "one-liner" treatment or not. But in most cases if I'm defining something that has only 1 - 3 attributes, say for basic <p>'s, then they get put on one line. But if I need something more complex, such as adding gradients or something that needs a lot of attributes, I don't put them on one line (the minifier can deal with that one) because it's simply easier on my eyes to see what I'm doing (classic example - styling stupid form elements...  )
p { ... }
form { ... }
...
input[type="blah"] {
blah;
blah;
blaaaaaaah;
}
...
CSS can be a massive pain for sure, no one can ever deny that one (!!) and get way out of control all to easily, so I stick with a "standard" (more of a personal convention in reality) I've molded for myself over the years that works quite well for me and other's can easily grasp. Urg... haha.
Lately though I've been leaving it all to Bulma or Bootstrap and run the other way so I can do the actual work I need to do and deal with it after, not gonna lie
|
|
|
|
|
Yea, that is a good idea to add line breaks on complex styles. I'm old school CSS and followed Eric Meyer's style back in the early 2000's, though I do break up complex styles to a certain point. I compare it to SQL. I hate it when I have to fix someone else's select statement and it has 50+ attributes all on separate lines and I have to scroll up and down to just get to the tables.
|
|
|
|
|
Are you asking what my best practices are or what I actually do? 
Best practices (in my view) are to use CSS to describe the function of the element, not the style.
So instead of
<div class="centered bold padded info-background">A message</div>
I would do
<div class="alert-box">A message</div>
So that when you decide all your alert boxes will be flush left, or be in italics, or by pinned to the bottom, you're not changing classes on elements, you're changing the style definition of the alert-box class.
For layout I try and define broad types of layout (container, row, column etc) and use them in combination CSS classes that provide intent, not style. I'm not a fan of throwing HTML onto a pile and then using CSS to reorganise it on the screen, so if I'm changing layout I'm changing HTML, and so will change the element's CSS classes at the same time so everything reads sensibly.
cheers
Chris Maunder
|
|
|
|
|
I think what Chris writes here, and Marc alluded to in the original post, is an important point to be emphasized for beginners.
You want to describe the functionality. So, not that "this is a green message", but "this is a success message", so the style name gives some meaning to the use.
Often, this means that you have what seem like repeated (or very similar) styles, because the "success" message looks just like the "informational" message--but doing it on a functional level allows those things to more easily migrate away from each other in the future.
I still find it difficult to properly break the style from the structure of the page, so when restructuring happens, it often means style changes as well.
As to Marc's other question, I'm not so familiar with the cascading part.
At my last place, we just started using bootstrap for styling, it seemed like that was a really nice approach.
|
|
|
|
|
Totally agree.
This rule is violated in many other places besides CSS!
Like code that used to be:
... WARNING ... something about a color and maybe an icon.
Referenced as WARNING
Refactored to
... YELLOW ... yellow
Referenced as YELLOW.
Why is it yellow? (that information has been lost now)
|
|
|
|
|
If you like Bootstrap you might also like Semantic UI. I find their approach a little neater and more expressive.
cheers
Chris Maunder
|
|
|
|
|
It's appropriately named!
|
|
|
|
|
For perfect CSS in an ideal world (which seems to be what you want to talk about), I would say you should put every set of styles that occurs separately elswhere in the same project in a separate CSS class, while keeping the overall number of classes as little as possible. It can also be a good idea to draw additional separation lines between CSS classes "by subject" (page layout, object style, colors, fonts, ...) and put them not only into separate classes but into separate CSS files. This is an object-oriented CSS approach. By this, you for instance gain the possibility to have your design person maintain the colors.css for you, which means more control for her/him and less work for you.
But all this means a lot of effort, because as your project progresses, you sometimes have to split one CSS class into two or vice versa and then refactor all usages of these classes. But the more experienced you become with this approach, the less this will happen bc you will learn to think ahead to avoid the pain of refactoring. And that's when your initial effort will pay off, for yourself and for your company as well.
Cascading can be very useful in everyday practice for doing a rather loose specification in a more top-level element and be more precise in a child/descendant element. Or a second use case I can think of from my everday practice is to define a "base" style for a bunch of elements and still be able to "override" them and specify exceptions in particular cases.
|
|
|
|
|
I didn't think cascade was bad until my ~3 year stint as a front end specialist. In that time I learned to use B.E.M[^] and the world was good. Cascade is bad.
Elephant elephant elephant, sunshine sunshine sunshine
|
|
|
|
|
I have a device with a USB-C cable to charge it.
I have no USB-C ports, but I do have a very nice little fast charger (Qualcomm support) with multiple USB 2 / 3 connectors (Type A style).
"Ah!" I thought. "I'll get a simple little USB-A male to USB-C female converter".
FleaBay sells 'em cheap.
They arrived today. All five of them. "Odd." I thought. "I only need one".
"They are a little small." I further thought.
There's a reason for that Griff, you idiot. Those are USB-C Male to USB-B female. 
Not one detail is actually correct.
Oh ... c**k.
Sent from my Amstrad PC 1640
Never throw anything away, Griff
Bad command or file name. Bad, bad command! Sit! Stay! Staaaay...
AntiTwitter: @DalekDave is now a follower!
|
|
|
|
|
|
If only someone could come up with a "universal" port... 
|
|
|
|
|
They have - several times.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013
|
|
|
|
|
How about a Universal Serial Bus - that'd do it, wouldn't it?
Wait a moment ...
Sent from my Amstrad PC 1640
Never throw anything away, Griff
Bad command or file name. Bad, bad command! Sit! Stay! Staaaay...
AntiTwitter: @DalekDave is now a follower!
|
|
|
|
|
Obligatory XKCD[^]. 
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I wish someone would come up with a universal rf connector for mobile phone/gps etc connections.
The number of connector types is astounding. Drives me nuts.
Same problem, different phy.
|
|
|
|
|
Have similar that myself! the shame 
|
|
|
|
|
Yeah - took three days to get here as well.
I've ordered the right bit from Amazon on Prime delivery, so it'll be here tomorrow - but I still feel like a prat. 
Sent from my Amstrad PC 1640
Never throw anything away, Griff
Bad command or file name. Bad, bad command! Sit! Stay! Staaaay...
AntiTwitter: @DalekDave is now a follower!
|
|
|
|
|
USB C, well just run on down to the shops and buy a Mac.
but seriously the department stores that sell PC's and iplods usually sell various adapter cables, seeing as the iplod has USB C they would probably have charging cables ... these days even some $1 shops have them.
Message Signature
(Click to edit ->)
|
|
|
|
|
True, I did see a USB C cable on Saturday in the local $1 'Proper Job' don't ask...
|
|
|
|
|
I have a converter. Swim across to Netherlands and take it.
Or, if you have a power bank, they generally give the converters too. Plug in power bank (USB 2.0?) to computer, connect it to device. Done.
"It is easy to decipher extraterrestrial signals after deciphering Javascript and VB6 themselves.", ISanti[ ^]
|
|
|
|
|
True, engineering thought process, problem, correct solution, bodge around method...
|
|
|
|
|
glennPattonWork wrote: bodge around method
That's more or less all the code running in production servers around the World. It is product of "We only have (insert ridiculously low time duration here) and you need to deliver this component."
"It is easy to decipher extraterrestrial signals after deciphering Javascript and VB6 themselves.", ISanti[ ^]
|
|
|
|
|
lw@zi wrote: Swim across to Netherlands
Speaking of which, how do you like it here? 
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
