What are the best practices with respect to styling HTML elements using CSS? What's the preferred granularity for styling HTML elements? i.e., do you have lots of
div.searchbox input
div.searchbox p
div.searchbox p.help
OR
input.searchbox
p.searchbox
p.searchboxhelp
Which css code is considered easy to maintain? Is using grid frameworks and reset considered best practice?
Thanks
I totally prefer the first approach. The search box is a defined entity with specific styling rules. If the search box has unique visual settings that no other element on the page has, which is usually the case, that is the way to go.
If there are any global rules in addition, you'd define them globally in a different section of the style sheet:
input { font-size: 16px; color: blue }
If there are any rules that a number of input elements on the page (not all in the search box) should share (e.g. "the search input field, and the login input fields should stand out a bit, and have a yellow background") you can create a global class in addition to the "local" rules:
input.highlight { background-color: yellow }
and add that class definition to every input:
<div class="searchbox">
<input type="text" class="highlight"> <!-- Gets applied the "highlight"
and the "searchbox" styles -->
</div>
But the basic foundation should always be a "local" set of rules as you do in your first example IMO.
I normally try to reach a compromise between:
input.searchbox
and
body div#layout div#main div#content div.section div.subsection form input.searchbox
Related
I'm migrating my site from Bootstrap to Tailwind 3 and, in the process, built-in solutions (Dropdown, Tabs, Accordion...) needed to be replaced with alternatives. The section I'm working on right now is a custom Comments Editor I created.
I'll leave a link to what Tailwind's Playground generated for me in a CodePen because the code is longer than the maximum number of allowed characters here. The decision to create a Pen is only because in the Playground it doesn't work as the anchors open in new windows/tabs.
Anyway, the code that really matters, what makes the tabs work, is this one:
[data-target] {
scroll-margin-top: 10rem;
}
[data-target]:last-of-type + [role="tabpanel"], :target + [role="tabpanel"]{
display: flex;
}
[role="tabpanel"], :target ~ [data-target]:last-of-type + [role="tabpanel"]{
display: none;
}
As the title says, I'm looking for a way to change the background-color of the tabs, hinting to the User which one is currently active.
To accomplish that, I would need to switch Tailwind's bg-color-0 with bg-color-100 and take border-b-color-0 out of the once active tab and give it to the new one. But I don't know if I can do that only with CSS.
Not add/remove the classes per se, only their corresponding styles
I've seen a lot of implementations of Pure CSS Tabs, and all of them used hidden <input> fields. Though this implementation doesn't use them, I've added and named them accordingly, but I could only target them with CSS if the User clicked exactly where they're positioned (top-left of the tabs) instead of any part of them.
I'm aware I'll eventually have to add JS to switch the ARIA attributes, but is the basic functionality possible to be accomplished with CSS only? If not, is there an alternative implementation with which I could?
Thank you for your time :)
I am trying to use BEM naming convention and having some slight difficulty in deciding where to include a modifier for a specific page.
For example, say I have an orange button:
<button class="btn btn-orange">Button A</button>
My project has 3 different pages:
- pageA.html - pageA.scss
- pageB.html - pageB.scss
- pageC.html - pageC.scss
On pageB.html the button should have a margin-top:30px. Is it correct to write the modifier this way:
.btn {
padding: 5px 20px;
background: orange;
margin: 0
&--margin-top {
margin-top: 30px;
}
}
And what is the best way to include a modifier like that only for a specific page? In this case that would be for pageB.html. Should I include that modifier inside the pageB.scss or .buttons.scss?
I think you're confusing two concepts here - BEM, which is Naming Convention with the problem of structuring your projects. Both have nothing to do with each other, and I think BEM is not opinionated in terms of structuring your SASS files.
But, there's a couple of questions you ask here:
Is it correct to write the modifier this way? - it is correct if you want to stick to BEM convention, although I would say, the name you picked .btn--margin-top might not be very fortunate in a long term - imagine, you'll want to include another btn modifier with margin-top property set to, let's say 40px. How will you name it?
What is the best way to include a modifier like that only for a specific page? - These CSS classes you are usually not making for specific page. Whole point of BEM is to enable you, to write more modular CSS, and having this in mind you should use these CSS classes, by assigning them to your Blocks/Elements/Modifiers respectively. Trick here is to determine what is a block/element/modifier in your markup. What you'll achieve by this is reusable CSS, so you can quickly apply same css, by adding BEM classes.
Think in terms of Blocks or Components, NOT pages. You want to use it only on pageB - just add btn--margin-top class to your pageB markup.
Should I include that modifier inside the pageB.scss or .buttons.scss? - it depends on how you structure your project, and I would say that usually, buttons and other UI elements, are in most cases common to whole website/webapp, so there is no need of having them "attached" to specific page (which concept I think you need to drop, if you want to take full advantage of BEM). Besides, whatever suits you will be good for you, and unless you're not working within a team of developers, just stick to your own method, so you'll know in future where to look for things.
In production sites I solve this problem by using a file for the page that is deliberately more specific.
The other answerer is correct, BEM doesn't solve this problem but the solution is available in the css architecture.
I tend to structure projects as follows:
modules
sections
pages
with each getting more specific.
A section might have some specific way of rendering a button, in which case the sass would be like this:
.section {
.button--primary {
// styles
}
}
For a page, the same, but with a page specific key:
.page {
.button--primary {
// styles
}
}
You could even do:
.page {
.section {
.button--primary {
// styles
}
}
}
The key is keeping on top of the specificity in the structure of you sass files. Your button file would not change and you could be sure of dropping it in anywhere in the HTML of your site and having it render correctly and, as a module, it should only contain styles you would want to apply site-wide. For example:
.button--call-to-action {
background-color: $brand-colours__call-to-action;
}
(the hyphens are used to denote that call-to-action is a variation of button and the underscores to denote that call-to-action is one of a set of colours that belong to brand-colours)
Your margin top would then be defined simply as margin-top: 20px; in part of your sass that limited it's effect to the desired portion of the site.
As an aside, usually find that almost everything in the specific page files can be refactored further up the chain into variations of sections and modules, meaning often that they end up empty.
I can't set the background color (or border color) of an input text, if it is a dojo datepicker.
My dojo datepicker is an input text with the two additional attribute:
dojoType="dropdowndatepicker"
displayFormat="yyyy-MM-dd"
I assume dojo has its own style, so even if I provide a style that specifies the background color, dojo overrides it.
something like this does not work:
<input type="text" ..other attributes.. style="width:5em;border:solid #FF0000;">
Any help is appriciated.
And may I just add that my dojo version is old as dirt ( will be upgraded) but currently I can't take advantage of the newer features like dijit, etc.
Dojo uses templates for most of their widgets. The HTML code you write (with dojoType attributes and stuff) is nothing more than a placeholder to configure your widget. Inline CSS applied to this HTML will be applied to the top level of your widget.
Your widget usually consists out of multiple HTML elements and so it may happend that the CSS you write inline, will not be applied to the correct element. Also, Dojo indeed uses themes (wich you usually define as a class="themename" on a parent tag (usually <body>) and most default themes of Dojo are using !important CSS lines for various features.
The best way is to inspect what HTML elements are created when you use a widget and to define a style on that specific element. But because the CSS attributes of the Dojo themes are using !important, it's recommended to be more specific than what they define. The easiest way is to add a custom classname to the <body> tag, for example:
<body class="claro custom">
</body>
Then define your style like:
.custom .dijitTextBox > .dijitInputField {
background-color: yellow;
}
.custom .dijitTextBox > .dijitArrowButton {
background: red;
}
I also made an example JSFiddle.
Have a look at this thread - i think this could help you out:
Changing default style of DOJO widget
Regards
add !important to the end of your rules:
<input type="text" ..other attributes.. style="width:5em !important;border:solid #FF0000 !important;">
This should apply stuff to the input. Please check if the element isn't replaced when dojo starts using it and if you are applying the style to the correct element.
The basic question I'm wondering about is what is preferred in terms of readability, reuse, coding style, etc. One thing to note is that this JSP could be used in multiple parts of a page, for this naive example lets say its just a div that needs to be styled a certain way and put on a page several different times.
I realize I could externalize the class to a shared CSS file, but this class will only ever be used by this part of the page, say for instance this box is the only one that will ever need to be purple in the entire product, in my opinion it doesn't make sense to dirty up a shared CSS in order to clean up my JSP. So what is better
Option 1 (Using ID selectors)
<% String contextName = request.getParameter("myContext"); %>
<style type="text/css">
#<%=contextName %>_myDiv
{
font-weight: bold;
background-color: purple;
height: 20px;
}
</style>
<div id="<%=contextName %>_myDiv">
<div>Blah Blah Blah!</div>
</div>
Option 2 (Using class selectors)
<% String contextName = request.getParameter("myContext"); %>
<style type="text/css">
.<%=contextName %>_myDiv
{
font-weight: bold;
background-color: purple;
height: 20px;
}
</style>
<div class="<%=contextName %>_myDiv">
<div>Blah Blah Blah!</div>
</div>
It seems to me that option 2 would make things easier to debug since they are using a shared class, however if there are (for example) 50 of these boxes on the page then it will result in this class being declared 50 times. Does this create extra leg work for the browser. Alternately if I use the ID selector method then I create 50 unique styles that do the exact same thing causing extra work for the browser to match up all the IDs.
So what is better? NOTE: both these ways work, I'm just looking for the pros and cons of each method.
You shouldn't have style elements in the body anyway, so you should put the style in a style sheet. As an id should be unique in the page, you would use a class.
If you don't want to do that, then there is no reason to have a style tag either. Just put the style in the element:
<div style="font-weight:bold;background-color:purple;height:20px;">
<div>Blah Blah Blah!</div>
</div>
If a style is used once, use an ID.
If a style is used more than once, use a class name. The class only needs to be declared once, but is referred to in any element using that class name.
Multiple class names can be used to handle variation from a "base" class.
In general, you should use an external stylesheet to allow the browser to cache the file.
You will want to use classes. This is because you may have more than one instance on the page of that object.
However, For what you are doing it would still be better to hard code your different style options and place them in a css file.
It does not have to be shared with other pages just link it directly on your given view. This will also keep you from having 50 duplicates of one style reference. Then just generate the class for that particular object.
You should check the hierarchy.
"ID are unique, Class is not unique"
check out this article
http://css-tricks.com/the-difference-between-id-and-class/
I am building a jQuery UI site. I can see how easy it is to add widgets or dialogs and also I have seen it is possible to style elements using the theming api:
http://jqueryui.com/docs/Theming/API
So how do I style things like normal text or html headers 1-3 or html tables?
I would like to use the classes and styles from jQuery UI so everything fits together and changes when I change the theme.
I have tried to apply ui-widget-content or ui-widget-header to divs or h1,h2, but maybe there is a better way, or an in depth tutorial somewhere.
I usually detect the class of the theme I want to customize, and then instead of changing directly in the jquery css, (because I prefer to have udner control my changes, and ebcuase if I update the theme, don't need to add the changes again) , I add these modified classes in an "override" block or how you want to name it, so that are same classes, but with an important;! or other hierarchy trick added. For instance, calling the parent ID to give it more weight: #content .ui-widget-content {whatever} , or .ui-widget-content {whatever property:whatever value !important;}
Is usually some small bits, never a large portion of things that I want to customize, so adding these 2 or 3 classes in my main.css does not hurt. It depends, though.
edit: Oh... with "oder" you meant "order". Sorry, was not understanding well your question (is a bit unclear).
If you are not supporting IE7, you might be interested in using:
tr:nth-child(even) {background: #fff}
tr:nth-child(odd) {background: #000}