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 9 years ago.
Improve this question
Edit: Due to an excellent comment by Kobi pointing to this StackOverflow Question, I have amended the question below:
Has anyone out there tried out Nicole Sullivan's Object-Oriented CSS framework or one of their own? If so, what were the advantages/disadvantages?
Are there any production sites using the framework Object-Oriented CSS?
I use both OOCSS and normal CSS in most of my stylesheets. I don't think that it makes sense to use OOCSS for styling of typography, but for things like columns, boxes and buttons, I think that it does make sense and it can really help to (in my opinion) make the code simpler.
Using a rather contrived (and terrible - classes should describe function, not form) example:
Using OOCSS
a.button {display: block; background-color: red;}
a.border {border: 1px solid orange;}
<a class="button border" href="#">My bordered button</a>
<a class="button" href="#">My normal button</a>
Using normal CSS
a.button_and_border {display: block; background-color: red; border: 1px solid orange;}
a.button_no_border {display: block; background-color: red;}
<a class="button_and_border" href="#">My bordered button</a>
<a class="button_no_border" href="#">My normal button</a>
As you can see, there's less CSS in the OO example, which I personally find easier to read. But I suppose at the end of the day, it's all down to personal preference and coding style :)
The OOCSS framework doesn't solve some of the problems defined by its own principles. OOCSS still contains redundancy and by moving the composition of components into the DOM, its coupling content back to the presentation.
OOCSS does make some good design decisions that should encourage users to maintain their CSS in a consistent fashion. This is a good thing. But the lack of documentation supplied with it means you'd have to reverse engineer it should it not quite fit your needs. This process wouldn't be reliable so you could end up back where you started... with messy CSS.
you shouldnt specify the tag in the oocss, its one of the pitfalls that she presented, so you can use the .button on any other tag and then extend that new tag..eg.
<button class="button">works on this</button>
<a class="button">works on this also</a>
<input type="submit" class="button" value="and this too"/>
specifying a.button in the css means you'll have to repeat it in the css again if u want to use it on another tag..
the main point is so that you dont repeat your styles and avoid redundancy..
you should download her examples on github
I am using it and loving it. The college I am employed uses rich intranet web applications that use a list {} object that I created. It arranges links horizontally and vertically, but has "extending classes" (skins) to convert them into header bars, menus, tool bars, tabs, accordions, and button groups. The List {} object contains no colors or borders, just a clearfix and a few modifiers. The actually appearance is stored in separate classes. I also use preprocessors to
I would make 3 suggestions if you go down this route.
Use the B.E.M (block / element / modifier) naming conventions
Think basic lego blocks and use use classes to extend them.
Use LESS or SASS to separate out the appearance
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 7 years ago.
Improve this question
I did some research and couldn't definitively find the answer to whether its best practice to use a class selector or tag selector for a nested element. Say I have the HTML:
<ul>
<li class="list-item-content" >
<img src="/images/flags/fr.png" class="country-flag">
</li>
</ul>
I could write :
.list-item-content img{
vertical-align: middle;
}
Or
.list-item-content .country-flag{
vertical-align: middle;
}
Which is best practice? Since the browser matches rules right to left, I would assume the second way is better as with the first way the browser with first match ALL images, then check the parents....
For more specific css you have to use both like following :-
.list-item-content img.country-flag{
vertical-align: middle;
}
It will define more clear nesting structure.
Personally, I think using two classes in the rule like $('.class1 .class2') matches more efficiently and is better practice. And maybe rarely need 3 classes.
In case you are very sure a class is unique, then $('.class1') maybe enough.
It depends of the complexity of your project and preference of your team.
In term of performance, selecting nesting items with something like this
.list-item-content .country-flag{}
which translage to
select .country-flag elements descendant of .list-item-content element
could have a performance penalty on large project (DOM) or in device with limited capabilities (like smart tvs or old mobile devices).
In order to mitigate this risk you can try to use a name convention which will help you to prevent selecting nesting element in an expensive way.
One of the methodology is called BEM.
Briefly the convention is as follow:
.block represents the higher level of an abstraction or component.
.block__element represents a descendent of .block that helps form .block as a whole.
.block--modifier represents a different state or version of .block.
So you HTML could be rewritten like this:
<div class="componenet">
<ul>
<li class="componenet__list" >
<img src="/images/flags/fr.png" class="componenet__list-flag">
</li>
</ul>
</div>
in this case you can select directing your class
.componenet__list-flag {}
More info here:
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
Most of the time you will not trying to match all img therefore 2nd convention is prefered
.list-item-content .country-flag{
vertical-align: middle;
}
This is another good practice by Harsh Sanghani as well.
.list-item-content img.country-flag{
vertical-align: middle;
}
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 7 years ago.
Improve this question
In an online tutorial, I was recently told to create a class for nav elements called "nav". I'm a beginner in CSS, but is it just me, or is this redundant/confusing/bad practice?
NO it's not redundant.
YES it's redundant if you think in your specific case you're fine with nav{ /*blaah blaah*/ }
<nav> is a Semantic HTML5 tag that represents toward SEO a navigation. A navitagion is all you want it to be. So in the case you have multiple nav elements in our page and you're OK to target-styles directly the tag element using nav I'll be glad to see that.
It's not redundant. The DOM element nav is different from the CSS class nav.
If you wanted to style this element by class, you would use this style declaration (for example):
.nav { background-color : #F00; }
if it were styled by element type it would be:
nav { background-color : #F00; }
This may seem trivial, but that period . makes a difference. It means you are identifying the item by class and not by element name. If you use the class syntax (with the .) then you could also write:
<div class="nav"></div>
This would show with a red background if you included the class definition, but not if you styled the element type directly.
In simple applications you may be able to get away with directly styling element types (e.g. <nav>) as opposed to classes (e.g. class="nav"), but as you get more complex layouts you are going to want to use classes. Additionally, if you use a selector-based library like jQuery, or document.querySelect() you may have good reasons for specifying a class.
If you truely can know that all <nav> elements can be styled the same in all your pages, then by all means just use the element selector, but to leave yourself flexibility it's best to use classes.
I have some css styles with background colors, borders, etc... like this:
.bg-red {
background-color:red;
}
.bg-blue {
background-color:blue;
}
/*more background colors*/
.border-red {
background-color:red;
}
.border-blue {
background-color:blue;
}
/*more border colors*/
/*Like this i also have foreground color, border thickness, border style, transition/hover styles (specially for button hover) */
Like this i can style for example buttons.
example
<button class="fg-green bg-white
border-color-red border-thickness-thick border-style-dashed
hover-bg-grey hover-fg-black
hover-border-blue">
</button>
To make this more readable and shorter, i want to change it to this using custom attributes and css3 selectors
<button color="fg-green bg-white"
border="red thick dashed"
hover-color="bg-grey fg-black"
hover-border="blue">
</button>
but is this good practice?
I've read a lot of questions about this, and i can't really decide what i should do.
1) Is it OK to add your own attributes to HTML elements?
and a lot of other questions
From this question, i learned that custom attributes are not W3C compliant. but that html5 allows you to create custom attributes using the data- prefix.
in my opinion, colors and borders are not really data (or are they?), and the prefix is mostly used for javascript. so i don't know if i should do this.
2)
Is it a bad practice to use custom HTML attributes and style them with CSS?
Here, i read that classes are better, but should i give up readability and use classes instead?
So, what is more important? Making the code more readable by using attributes, or using classes but making it less readable?
Or is there a better solution?
Suggestions are always welcome!
edit: i'm just a beginner, so i don't know much about what's good and what's bad practice...
EDIT AGAIN: Thank you all for this info, all the answers where usefull so i upvoted every single one.
Also thank you Alochi for your helpful comments.
This is not a good practice.
How to use custom attributes?
First, you should use data attributes instead of full-custom attributes:
<button data-color="fg-green bg-white"
data-border="red thick dashed"
data-hover-color="bg-grey fg-black"
data-hover-border="blue">
</button>
These are syntaxically valid, and you can use as many as you want. Keep in mind they shouldn't interfere with external libraries (which are also allowed to create their own data attributes).
Is Object Oriented CSS the solution?
What you're doing is called Object Oriented CSS, and was popularized by frameworks like Bootstrap (formerly Twitter Bootstrap).
You've started to strongly link your HTML to your CSS.
Content is no longer independent from layout!
Sure, you've got less work to maintain your CSS, but:
this work is deported on your HTML
your HTML is dependent from your CSS
your HTML is not semantic
If you want to use CSS, you should think to reduce your amount of classes, and use semantic classes instead, like this for example:
.button-valid {
color: white;
background-color: green;
border: 1px solid green;
border-radius: 5px;
transition: all .2s;
}
.button-valid:hover {
color: green;
background-color: white;
}
Using <button class="button-valid"> has far more meaning than <button class="bg-green fg-white radius-5 b-green bgh-white fgh-green">
From CSS to Sass, and from OOCSS to OOSCSS?
So far, the better solution is to start to use CSS preprocessors.
I you want to go further, I would suggest you to read articles about Sass and OOSCSS.
First of: There was never an exclusive list of allowed tags and attributes, except in XHTML (dtds!) for validation. HTML itself is meant to support custom data structure. I know, there are a lot of people out there, disagreeing with 'if it is not restricted, you may use it'.
Best practice? Well, separating data and style is the rule of thumb. Classes are 'backwards compatible', custom tags in HTML (btw: HTML5-CustomComponents) too. But not attributes used in selectors (please search for a suiting CSS reference yourself).
Adding custom attributes per se is not bad. But there is a general agreement on prefixing custom attributes (HTML5) with data- e.g. data-my-custom-attr="abc". In CSS3, this is used as [data-my-custom-attr] {} or [data-my-custom-attr="abc"] {} to be accessed.
jQuery for example, makes these data attributes natively accessible by their $(elem).data() command, e.g. var val = $(elem).data('my-custom-attr');
This is primarily opinion based but...
Is it OK to add your own attributes to HTML elements?
Can you do it? Yes. Should you do it? Probably not. Why? Well, there are a number of reasons but from the top of my head...
Your code becomes less future proof. For instance, if a future HTML spec decides to introduce a new attribute that clash with yours. This can be overcome with data-prefixed attributes or using XHTML with a custom schema but...
Your code becomes less reliable. Since it does no longer adhere to the W3C spec, results might be inconsistent between browsers. Making a website with a consistent look between browser's versions is hard enough as it is...
Even using data prefixed attributes, it might not improve readability like you claim, specially for others or even a "future you". You might forget what an attribute means and, well, it becomes hard to find it's meaning unless you extensively document your system for future reference.
Also, for readability sake alone, I personally find this equally readable
<button class="fg-green
bg-white
border-color-red
border-thickness-thick
border-style-dashed
hover-bg-grey
hover-fg-black
hover-border-blue">
</button>
Is it a bad practice to use custom HTML attributes and style them with
CSS?
Well, it kind of defeats the purpose of CSS, whose idea is separation of style and content. Your system is not so different than in-line styling. <div style="color: red;"></div>. Why is this separation important? Because if you wish to change the styling later, it becomes a lot harder. You will need to run through your entire html files changing each instance, instead of changing it in your CSS.
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
I am mostly a backend programmer, and am relatively new to CSS. So far, I hate it. My biggest complain is that is incredibly redundant and difficult to produce readable code.
Many times I need to apply styling to different but similar elements. However, I find it incredibly challenging to produce elegant code to do that.
The most simple way to do things in CSS seems to be to give an ID to everything and use custom code for every single element in the page, or classes when there are repeated elements with. However, this still leaves a lot of repeated code, like when I have two elements that are almost exactly alike, but have one or two different attributes, like width, background color, color or float side.
My current solution is defining many atomic classes, like
.bgRed { background-color: red; }
.bgBlue { background-color: blue; }
.fontCenter { text-align:center; }
.left { float: left; }
and so on, and applying multiple classes to an element, like this:
<span class='bgRed left' >My text</span>
But that's still very short of decent. Some attributes, like width and height, are usually strongly tied to it's elements, so I can't create an atomic class for it, and end up resorting to using it's ID.
Finally, my question: Why doesn't CSS support some kind function-like structure? Would a feature like this be useful in CSS? Is CSS badly designed or I just don't know how to use it properly? Why was CSS designed the way it is?
How I imagined functions in css would work:
Defining a css function:
_sidebar(float_side, color, width){
float: float_side;
backgroud-color: color;
width: width:
height: 200px;
color: #FE02A5
list-style: none;
display: table;
}
And applying:
<div cssfunc='sidebar(left, #FF0000, 150px)' >
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
Bonus question: How do you maintain you CSS code readable and organized, with minimal code repetition?
This is not the intended usage pattern for CSS. A general clue is if you have specific formatting words like colors or alignments in your class name, you're not following the "spirit" of CSS.
The intention for CSS classes is to use semantic categories for class names. For example instead of having a class named bgRed, use one called warning. The difference might be subtle in some cases, but the difference in philosophy usually helps maintenance. Instead of combining "literal" css rules at the element level, you'd combine more meaningful semantic ones like class="sidebar warning".
With that said, some people still find the lack of reusability of formatting between CSS rules cumbersome. There are fixes for that as well. The best solution is to use a CSS pre-processor like LESS or SASS. These languages compile into CSS, but support things like mixins and variables that function very much like the css enhancement you have in mind.
HTML defines what to show, CSS defines how to show it. If you use classes like "bgRed" or "left", you are doing this old way.
CSS doesn't define support functions, but LESS does. Imagine this:
.sidebar(#side, #color, #width) {
float: #side;
backgroud-color: #color;
width: #width:
height: 200px;
color: #FE02A5
list-style: none;
display: table;
}
.sidebar-important {
.sidebar(left, red, 100px);
}
.sidebar-misc {
.sidebar(right, blue, 50px);
color: grey; // overwrites .sidebar function
}
Then in HTML:
<div class="sidebar-important">Important news</div>
<div class="sidebar-misc">Something else</div>
This way, you can easily change values in LESS file, compile it to CSS and you won't need to change it in HTML.
Bonus answer:
LESS.
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 8 years ago.
Improve this question
I understand the title is a bit misleading, but I come from an Object-Oriented background, and I've recently began a shift towards web development. I've only got a basic grasp of HTML, and been learning and messing around with CSS, but there are some parts of it that are a bit confusing, and I'm trying to get it into terms I can understand.
My CSS:
.Person .span4 p
{
margin-left: 10px;
margin-right:10px;
margin-top:10px;
}
From what I can understand, this means that any p tag that is inside a container, like with the class of "span4", which is in turn inside another container that has class="Person" will be formatted with the specifications listed above.
In other words person.span4.p.format(String[] formatArgs), where the formatArgs are the margin-left, right, and top.
The Question: Is this an appropriate way to look at it?
I know it might be comparing apples to oranges, but I'd like to get an opinion before I go running with some conclusion that could be very wrong, and an actual explanation on how these work.
Your question about .Person .span4 p is correct, that will style a p element that's a descendant of an element with a span4 class that's a descendant of an element with a Person class.
However I wouldn't try to interpret classes in HTML as similar in any way to OO classes. They're completely different concepts, and I think that'll just end up confusing things.
Classes can be assigned to HTML elements using the class attribute (class="span4"), and these can then be used in CSS or JavaScript to apply additional styling or behaviours to those elements. Think of giving an element a class as tagging it with a particular keyword, so it can be easily targeted later. Elements can also be assigned multiple classes by separating them with a space, eg. class="span4 box".
In addition, .Person .span4 p isn't actually a "class", it's a selector. The .span4 syntax is called a class selector, the p is an element selector, and using a space between two selectors creates a descendant selector. Additionally #myId is an ID selector, and there are plenty of other types of selector as well.
I'd recommend this guide as a good way to get up to speed on the correct terminology.