Programming. Performances web. 10 Best CSS Practices to Improve Your Code. It’s really easy to find yourself wondering how your CSS got to be such a mess. Sometimes it’s the result of sloppy coding from the start, sometimes it’s because of multiple hacks and changes over time. Whatever the cause, it doesn’t have to be that way. Writing clean, super-manageable CSS is simple when you start off on the right foot and make your code easier to maintain and edit later on. Here are 11 tips for speeding up the process, writing CSS that is slimmer, faster and less likely to give you a headache. 1.
Just like anything else, it pays to keep yourself organized. It will help you keep the cascading part of CSS in mind and sets your style sheet up to take advantage of style inheritance. Declare your most generic items first, then the not-so-generic and so on. Use a structure that works best for you while keeping future edits and other developers in mind. Resets and overridesLinks and typeMain layoutSecondary layout structuresForm elementsMiscellaneous 2. 3. 4. 5. 6. This: 7. 8. 9. A Problem With Using “overflow: hidden” to Clear Floats. The other day, someone asked me the following question: If I understand it right clear float is automatic in most modern browsers right?
If you’re new to CSS, then it would seem that the answer to this question should be “yes, of course — modern browsers don’t have these types of bugs!” But the necessity to clear floats is not a browser bug; it’s actually, well, more of a CSS feature. And it’s still needed in so-called “modern” browsers (assuming you’re using floats for layout). This doesn’t mean, though, that clearing floats will always be necessary. The eventual goal of CSS layouts is to never need to use floats for layout. Instead, we want to be able to use a better method. But clearing floats are a fact of developer lives today, and so I thought I’d explain why clearing them is still necessary, even in “modern” browsers.
What Does a Float Do? Here is, in part, how the W3C spec explains what floats do: You can see this behaviour demonstrated in the JS Bin below: Float Clearing Methods. Book - Scalable and Modular Architecture for CSS. Every project needs some organization. Throwing every new style you create onto the end of a single file would make finding things more difficult and would be very confusing for anybody else working on the project. Of course, you likely have some organization in place already. Hopefully, what you read among these pages will highlight what works with your existing process and, if I’m lucky, you will see new ways in which you can improve your process.
How do you decide whether to use ID selectors, or class selectors, or any number of selectors that are at your disposal? At the very core of SMACSS is categorization. There are five types of categories: Base Layout Module State Theme We often find ourselves mixing styles across each of these categories. Each category has certain guidelines that apply to it. Much of the purpose of categorizing things is to codify patterns—things that repeat themselves within our design.
Base rules are the defaults. Examples of Base Styles Example classes. Contenuti generati, numerazione automatica ed elenchi. In alcuni casi, gli autori possono volere che i programmi utente rendano del contenuto che non proviene dall'albero del documento. Un esempio comune in tal senso è un elenco [list, anche "lista"] numerato; l'autore non vuole elencare i numeri esplicitamente, ma lui o lei vuole che il programma utente li generi automaticamente.
Similarmente, gli autori possono volere che il programma utente inserisca la parola "Figura" prima della didascalia di una figura, o "Capitolo 7" prima del titolo del settimo capitolo. In particolare per l'audio o il braille, i programmi utente dovrebbero essere in grado di inserire queste stringhe. Nei CSS2, il contenuto può essere generato da diversi meccanismi: La proprietà 'content', in unione con gli pseudo-elementi :before e :after. Le proprietà acustiche 'cue-before', 'cue-after' (si veda il capitolo sui fogli di stile acustici). Di seguito descriviamo i meccanismi associati con la proprietà 'content'. 12.1 Gli pseudo-elementi :before e :after Esempi(o): Nota. CSS 2.1 selectors, Part 2. This is the second part of a three-part article series that explains the selectors that are available in CSS 2.1. Part 1 is about the more basic stuff like type selectors, class and id selectors, the universal selector, and simple selectors.
In this part I will take a closer look at the more advanced selectors, not all of which are yet fully supported in all major browsers. Support is getting better though, so learning about the selectors that are described in this article is time well spent. Combinators Combinators are used to separate the two or more simple selectors that make up a combined selector.
The available combinators are whitespace (any number of tab, space or other whitespace characters), >, and +. What each combinator does is described in the next few sections. Descendant selectors A descendant selector is made up of two or more simple selectors separated by whitespace. Each of the selectors that form a descendant selector can be a simple selector of any form. Child selectors. CSS Message Box collection. Message boxes are useful elements to display status messages after or during a specific user request. Some days ago I wrote this post about how to implement a nice Ajax chains of effects (fade in, delay, fade out) for a common message box using mootools. Today I want to share with you a collection of some simple CSS styles you can apply to your message boxes (clean, solid, iconized, alternated rounded borders, tooltip).
I added also a link to download a beautiful icon pack to use in your projects to design custom message box or other graphic elements. Download message box collection source code Clean message box I love clean and simple design and in general this is my preferred message box style: a border (1px) and a light background color: HTML code is very simple: <div class="clean-gray">Clean message box</div> ...a DIV layer with with some text within. .clean-gray{ border:solid 1px #DEDEDE; background:#EFEFEF;color:#222222;padding:4px;text-align:center; ...and the related CSS code is:
Escaping the Box Model -- 3nhanced.com - Imagine, Design, Develop, Create the Web. Tagged CSS by Jon Not knowing how padding, borders and margins interact with each other across the various browsers is a guarantee that you are going to struggle with CSS layouts. Having a good understanding of the box model will save you hours of figuring out why your layout keeps breaking. Even better, knowing how to break out of the box model will allow you to create layouts that were never possible before. Note: This is a concept based tutorial so don’t expect to learn much syntax. What is the Box Model The CSS box model consists of four different elements.
Content The content area is the space that a rendered element uses. Padding Padding is the layer immediately surrounding the content. Border Border has many of the same attributes as padding. Margin Margins make up the outer most layer in the box model. Collapsing Margins Margins have the attribute of collapsing when they touch other margins. Breaking Out Here are the basics of how to extend an element outside of the box.
Diagram b. Guide to Cascading Style Sheets. Also available in Chinese, Japanese, and Spanish Style Sheets Now! Change the appearance of hundreds of Web pages by changing just one file... Influence presentation without losing visitors... All with the power and flexibility of Web style sheets. Quick Tutorial A basic introduction to Cascading Style Sheets. CSS Structure and Rules An introduction to the various kinds of selectors, pseudo-classes, pseudo-elements, and cascading order. CSS Properties Descriptions of the various properties available in Cascading Style Sheets, level 1. Linking Style Sheets to HTML Various methods of incorporating style sheets into an HTML document.
Style Sheet Dependence How to misuse style sheets and make your pages inaccessible. CSSCheck Check the syntax and style of your Cascading Style Sheets with this CSS lint. CSS References Links to CSS specifications and other documentation.