|
CSS is powerful, but can throw Separation of Concerns out the window. A single class is often used for selection, box layout (height, width), and "theming" (color). What are peoples thoughts on separating CSS? For example, a skeletons.css file that only contains layout styles and a skin.css file that only contains theming styles.
.bigBox{ height: 40px; width: 40px; }
.littleBox {height:10px; width: 10px;
.red {color: #F00; }
.blue { color: #00F; }
<div class="bigBox red"></div>
<div class="littleBox blue"></div>
The browser parses the css into box and "theme" trees when it processes them. Does doing that ourselves provide value?
|
|
|
|
|
|
Interesting, thanks.
I've been playing with dynamic css through WebSockets and I'm doing things like this
<style type="skeleton">
.node { height: 20px; width: 20px; }
</style>
<style id="greenTheme" type="skin">
.node { background-color: green; }
</style>
<style id="blueTheme" type="skin">
.node { background-color: blue; }
</style>
I parse these and send them over WebSockets. Using script I go straight to the CSSOM (styles collection) and delete "greenTheme" and then add "blueTheme". Or I modify the sheets dynamically. I'm not a CSS guy, so I don't know if there are big issues with using the same class name in several files. It seems to work OK.
|
|
|
|
|
Not sure about that, never had to change CSS dynamically like that.
I could imagine you'd either send the file green-theme.css or blue-theme.css, but not switch it with AJAX or even WebSockets.
By the way, when you use a preprocessor like LESS, SASS, or SCSS you can use a variable.
$primary-color: green;
$primary-color: blue;
.node {
background-color: $primary-color;
}Now you only have to switch or overwrite some variables instead of writing your complete theme twice 
See also my reply to Marc Clifton below.
|
|
|
|
|
RandyBuchholz wrote: For example, a skeletons.css file that only contains layout styles and a skin.css file that only contains theming styles.
I'm fine with that, but I tend to think (and mind you, this is based on the fact that I still consider myself somewhat junior with web development) that the bigger problem is the abuse of CSS. So you lets say you have class="bigBox" for several divs. Now someone asks you to change the style in for just one of those divs. Now you have to create a separate style for just that one div. What if you don't realize that there are other divs using that style? How do you find them? Sure, by searching, which seems easy enough but I've discovered isn't, particularly if you don't have access to all the scripts -- perhaps it's a common style sheet used across multiple web apps.
The result then ends up being a mess of another kind -- lots of styles with minor variations, not to mention the potential nightmare of nested styles. And what do you name them? bigBox2? bigBoxThatJoeWanted?
So, knowing that, you create separate styles based on the function of the div. So you might have bigBoxLogin and bigBoxLogout. But then your mostly needlessly creating redundant styles for the potential future of having to change the style later on.
Alternatively, you could just code the style directly in the div. But that's frowned upon and worse, if you want to change the style for all the divs of a particular "look", you're back to the first problem -- searching for where the common styles are used.
Or, you have styles associated strictly with the unique id of the element. Still the same problem.
Personally, I believe that the idea of associating styles with an id or a class is a totally farked up kludge. It's bassackwards IMHO. Tags should be what they're supposed to be -- ways to find an unique element or a set of common elements.
Personally, I'd like to see a completely separate mapping, ok, use the class and id tag values, that would map those values to the css that styles those elements. And there should be a simple rule -- an ID overrides / extends any styling that the element's class value mapped style defines.
To me, that would be a clean separation of concern and make it really easy to change the style globally or of specific element without caring about whether the style is used elsewhere.
Maybe such a thing exists. It shouldn't be to hard to actually write something like that that applies styles to elements after the DOM is loaded but before the page is rendered.
|
|
|
|
|
Marc Clifton said: Personally, I'd like to see a completely separate mapping, ok, use the class and id tag values, that would map those values to the css that styles those elements.
...
To me, that would be a clean separation of concern and make it really easy to change the style globally or of specific element without caring about whether the style is used elsewhere.
Maybe such a thing exists. It shouldn't be to hard to actually write something like that that applies styles to elements after the DOM is loaded but before the page is rendered
I do something similar, but on the server side, with Razor. I can put semantic classes in the Razor page and these get converted to "lower level" classes when the page gets rendered.
|
|
|
|
|
I find that LESS, SASS, or SCSS, combined with SMACCS (see my answer above), solves quite a few problems.
Let's say you have an order page and an invoice page.
Let those pages be wrapped in a div with the class order-page and invoice-page respectively (I stopped using ID's in my CSS since I read some good reasons not to that I've forgotten by now).
Now there's a table in both pages, let's say overview-table.
With SCSS you can now write a sort of "object oriented" CSS:
table {
}
.overview-table {
}
.order-page {
.overview-table {
}
.something-else-order-specific {
}
}
.invoice-page {
table {
}
.overview-table {
}
}Makes for pretty decent and separated CSS files and overriding styles for one specific page becomes a lot easier.
Could be done with regular CSS, but a preprocessor makes it a lot easier and clearer.
And with a preprocessor you can use variables and mixins, which can make it even easier to change a style globally or locally.
Ultimately, you can still compile it to a single CSS file and include it on your layout.
|
|
|
|
|
I don't have anything to add, but wanted to give a +5 for a cool topic. 
This reminds me of the CSS messes that I need to tidy up. (lots of obsolete/unused styles that are just cluttering things up) This thread may give me some ideas. Thanks!
"Go forth into the source" - Neal Morse
|
|
|
|
|
This may be because it's a contrived example, but I'm thinking if you're going to have a CSS class named "red", whose only job is to set the color of the given element to red, then you might as well hardcode the color right in the HTML.
If you decide "red" should instead be yellow, then your CSS names are just going to cause confusion, unless you also change the name at the same time. Although I get what you probably meant to say, and that would be perhaps to name "red" to something like "error" instead--representing a state rather than details about its implementation.
|
|
|
|
|
Yeah, it's just contrived. The main idea was basically separating by which pass the browser uses it. Anything that takes "box-space" (changes the box layout) would be separate from things that don't change the box layout.
But I was thinking in a more "what it is" way than "how it is used". I see your point. I generate a lot of html dynamically (with components or .Net with TagHelpers), so I translate states, like "error", into a predefined set of classes on the server side. I can see how that would be more difficult when writing by hand. I sort of mix. So for me, I would just have <error>Error Message</error> in my code. That might end up as <div class="errorBox errorTheme">Error Message</div> in the page html, where errorBox defines the box, and errorTheme has color, rounding, etc.
|
|
|
|
|
I'm an old-school desktop/server developer, and I've only recently had the "chance" (? if you wanna call it that) to do web development, and I'm quickly coming to the same conclusion re: CSS that you brought up in your original post. It's an intriguing idea and I'll be sure to give it more thought. Before I learn bad habits. 
|
|
|
|
|
Have you checked out how common frameworks such as Bootstrap [^] or Semantic UI[^] do it?
cheers
Chris Maunder
|
|
|
|
|
I took a look. They both mix structural and stylistic parts at some levels, but separate at others.
|
|
|
|
|
Nothing like consistency, right? 
For a personal answer to your question I would group your CSS semantically.
Define groups of user elements (containers, sidebars, banners, text areas, lists etc). I wouldn't use adjectives (big, small etc) so instead of bigBox I'd use "box". Your 'bigBox' may evolve one day into being smaller than other boxes.
You could then have a set of placement classes: "box side", "box main-content", "box callout".
Then a set of use-case classes: "box callout error"
Finally, you may wish to have style classes for theming, but never name the class based on their internal style. Instead of "lightblue" it could be "main-theme", or "sub-theme". This allows you to change your colours in one place and have the class names still make sense.
As a postscript there's the cheat classes we all use. "bold", "small" etc. We want the text to stand out boldly, and we can't think of a synonym for bold that won't be confusing, so we do class="label bold" instead of class="label" style="font-weight:bold">. Because we may want "bold" to mean "slightly bigger" or "with lasers flying out of it". I'm still waiting for W3C to ratify the text-decoration: lasers value. Still waiting...
cheers
Chris Maunder
|
|
|
|
|
I'll vote for lasers!
Your naming suggestions make sense. Thanks.
|
|
|
|
|
I have been separating my CSS documents based upon it's function since around 2004. The reason I started doing it was to easily find what I needed and so classes didn't conflict with one another. I have not used Bootstrap or W3 yet. Typically, I have a structure.css (container), a main.css for the main content including HTML controls, grid, calendar, nav, foot, and head.css. Then I'll import another for a certain page if needed.
So the way you're using skelton.css layout and skins.css for coloring is the way I do it. I cannot say that is best practice with Bootstrap and others out there, but I have more control and I know what I code. And since I know what I code, it is easier to modify, since I don't have to learn anyone else's framework.
|
|
|
|
|
Cool. Yeah, the conflicts is was what I was thinking about. Also side effects. If I keep things that change the box layout separate from those that don't, I know I can use any of the second anywhere and the layout the users sees won't be impacted.
|
|
|
|
|
char is a type and c is a name, to me, it always make more sense to put the name alone and have the type together, like "char* c", I can tell immediately that it is a pointer to a char, so its always goes like [type] [name].
But in contrast, most C/C++ code I found prefer the other way around, like "char *c". Is there any specific reasons why this is so?
|
|
|
|
|
No idea from where this comes, but I also prefer char* c before char *c.
My only Argument:
In case you have a e.g. a method with an argument you don't use, something like
void Method(Object* Sender)
my Compiler shows a warning.
To avoid the warning I Need to
void Method(Object* /Sender/)
or
void Method(Object* )
that's why for me char* c is more intuitive.
On the other Hand variable declaration....
char *a, *b;
It does not solve my Problem, but it answers my question
modified 19-Jan-21 21:04pm.
|
|
|
|
|
I also prefer char* c as char* is a type, in this case a pointer to a char.
Everyone has a photographic memory; some just don't have film. Steven Wright
|
|
|
|
|
Goes back to K&R, they invented the thing and people followed their style.
also in C you cant declare arrays that way:
char c[];
char[] d;
Tis the style of this language, inasmuch to continue that style far more logical to write */
char *e;
1. and so "char* c" is stylistically wrong in both C & C++. (And older compilers will correctly flag that as an error.)
2. In C "char *" is not a type, it's a pointer to a type. Yup, pointers are not types, they are pointers.
... cats, dogs and cows are types of animal, beef is not an animal but it does 'refer' to one
Signature ready for installation. Please Reboot now.
|
|
|
|
|
I would say "*" is a type modifier
[Edit]
Quote: In C "char *" is not a type
Really? Ok I don't know C, but I think this is also allowed in C
typedef char@ theCharPointerType;
@ instead of *, because * seems to be a Problem in cp
And if the above is ok in C, how can you state that a pointer to char is not a type?
It does not solve my Problem, but it answers my question
modified 19-Jan-21 21:04pm.
|
|
|
|
|
cant be a type modifier either,
char *c --> * means pointer, "char" is is the default 'pointed to' modifier for that declaration.
In the language definition it's valid to cast a * to address any [other] type. If the type was considered "char*" or in fact if "char" had anything to do with 'the type' then casting pointers to address other type would become wrong.
hence:
char* c" /* is wrong, "char*" is NOT the type because there is no such thing, it's wrong, plain wrong! */
char *c /* is the proper form */
Signature ready for installation. Please Reboot now.
|
|
|
|
|
Can be, it is anyway a more philosophical Thing. In case char* is plain wrong it should not be allowed to do this: typedef char* myCharPtr;
It does not solve my Problem, but it answers my question
modified 19-Jan-21 21:04pm.
|
|
|
|
|
Lopatir is correct. The way to read the declaration
char *c
is: c (the name of the variable)
is a pointer (the * prefix)
to a character (the type)
where the pointer property actually belongs to the variable, not the type.
Having said that I always write:
char* c
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
