Structuring your CSS for maintainability: rules and guile lines to write CSS
As you start work on larger stylesheets and big projects with a team, you will discover that maintaining a huge CSS file can be challenging. So, we will go through some best practices for writing CSS that will help us to maintain the CSS project easily.
The document is an introduction to HTML and CSS that provides a tutorial on the basic syntax and structure of each language. It begins by explaining how to create simple HTML files and add basic HTML tags like headings, paragraphs, and lists. It then introduces linking an external CSS stylesheet and using CSS selectors to style HTML elements by changing properties like colors, backgrounds, padding and more. The document provides examples of additional CSS concepts like classes, inheritance, the box model, specificity and more. It concludes by recommending additional resources for references, validators, code editors and tutorials.
Introduction to the styling language of the Web - CSS and learn its foundations. We will cover CSS syntax, how to add CSS to your HTML, various CSS properties, the box model, CSS units and custom properties. Understand how to use CSS to style individual elements and create layouts with an example of a styling the landing page of a portfolio.
Basics of Front End Web Dev PowerPointSahil Gandhi
Here are some tips for hands-on part 2:
- Add a class like .paragraph to the <p> tags containing your sentences
- Add an ID like #image to the <img> tag
- In an internal or external CSS file:
.paragraph {
color: blue;
font-size: 20px;
}
#image {
padding: 10px;
display: block;
margin: 0 auto;
}
- For background:
body {
background-color: lightgray;
}
- Play around with other CSS properties like text-align, font-family etc.
This document introduces Cascading Style Sheets (CSS) and discusses how it provides more advanced presentation control compared to HTML. CSS allows one style sheet to control the appearance of all HTML files. It also gives greater control over page appearance and behavior. However, CSS is more complicated than HTML and requires sound HTML skills to use sensibly. The document provides background on CSS specifications and browser support. It outlines steps for getting started with CSS and describes CSS rules, cascading, inheritance and recommended learning resources.
Spectrum 2015 going online with style - an intro to cssNeil Perlin
This document introduces CSS (Cascading Style Sheets) and provides an overview of some basic CSS concepts:
- CSS allows authors to define styles that can be applied consistently throughout a project for formatting elements like headings, paragraphs, etc. This improves efficiency and consistency compared to local formatting.
- A style sheet is a separate file containing all styles for a project. It cascades in that changes can inherit to child styles.
- The document discusses CSS basics like style rules, the box model, relative sizing units, and different CSS levels.
- It recommends best practices like defining styles upfront in a CSS before authoring and avoiding inline styles.
Front End Best Practices: A Selection of Best Practices, Tips, Tricks & Good Advice For Today’s Front End Development. Practices mentioned in this presentation range from basic principles to more advanced tools and techniques. By Holger Bartel for WomenWhoCodeHK 23/07/2014
CSS is used to control the style and formatting of web documents. It allows for creating stunning web sites by controlling colors, fonts, layouts, and other design elements. CSS is also important for web designers and developers because it provides powerful but easy to learn controls over HTML formatting and applies styles consistently across pages. The basic structure of a CSS stylesheet uses selectors to target HTML elements and declarations to specify property values that control the appearance of those elements.
This document provides an introduction to CSS (Cascading Style Sheets) and discusses various ways to implement CSS styles, including internal stylesheets, external stylesheets, inline styles, classes, IDs, and using divisions and spans. It covers CSS syntax, properties like margins, inheritance, and combining selectors. The document is divided into 18 chapters that progressively introduce CSS concepts from the basics to more advanced topics like browser issues.
The document provides an overview of how to use CSS3 in WordPress. It introduces the presenter and their goal to teach the audience at least one new thing. It then covers CSS/CSS3 basics, terminology, syntax, properties, specificity, inspecting CSS, new CSS3 modules like colors, gradients, border radius, and how to add CSS in WordPress through themes, plugins or inline styles. Resources for further learning CSS are also provided, followed by time for questions.
This document provides an agenda and slides for a FEWD (Front End Web Development) class. It discusses the CSS box model, nested selectors, HTML templates, and starting the Relaxr landing page assignment. Key points include:
- The CSS box model consists of margins, borders, padding, and content
- Nested selectors allow targeting elements within other elements
- Students are instructed to create a GitHub repository and commit their weekly work
- Layout techniques like floats and HTML5 structural elements are reviewed to help structure the Relaxr assignment pages
If you are new to CSS or have been using it for years this presentation should give you more insight into how to write and use CSS to make your web sites better.
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
Here are the steps to build a basic horizontal navigation menu bar:
1. Create an unordered list <ul> with class="menu"
2. Add list items <li> for each menu item
3. Style the <ul> with display:inline-block and border-bottom
4. Style the <li> with display:inline-block, padding and hover effect
5. Add a class="current" to highlight the active page
6. Use a border-left on .current to create a left arrow
Let me know if any part needs more explanation! Building menus is a common task and these techniques will serve you well.
This document provides guidelines for writing CSS code, including:
1. Separating presentation from content using CSS and validating markup and CSS.
2. Organizing CSS files by specific sections (e.g. typography.css, grid.css) and using a master CSS file to import other files.
3. Avoiding inline styles and CSS hacks, using semantic markup, and making sites accessible to all users.
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15Andy McIlwain
“Custom CSS” is often touted as a feature for blogging and website services like WordPress, Tumblr, Blogger, and Squarespace. But a blank code editor can be a daunting thing for non-coders. Where do you even begin?
We’re going to tackle that problem in this session. We’ll explore the fundamentals of HTML & CSS, the building blocks of the web. You’ll learn how to use your browser to inspect page code, and how to write basic CSS to customize the look and feel of your blog or website.
A talk on front-end developer tools including Yeoman, Grunt.js, Require.js, Bower, and SASS given at Drupal Camp LA 2013.
This talk doesn't address Drupal specifically, but it was aimed to give the audience of drupal developers a look into the state of the art.
The document provides information on various CSS techniques for styling web pages, including:
- Three methods for inserting stylesheets: external, internal, and inline stylesheets.
- Selectors like id, class, and element selectors for applying styles.
- Properties for styling various page elements like text, backgrounds, links, tables, and lists.
- New CSS3 features like rounded corners, drop shadows, multi-column layouts, transitions, animations and custom fonts.
- Examples are given for many of the properties to demonstrate their usage.
If you are a theme developer, using Sass or Syntactically Awesome Stylesheets is a time saving way to write your code and it is easy to learn once you are familiar with CSS. In this session, you will learn how to harness the power of variables, nesting, and mixins to take advantage of everything that SASS has to offer to write awesome code. In order to get the most from this session, you must have a good understanding of HTML and CSS.
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeSuzanne Dergacheva
This document discusses strategies for creating lean and maintainable Drupal 8 themes. It explains some of the complexity that can arise from Drupal's flexible theming system and powerful configuration options. It then provides recommendations for limiting complexity, such as being consistent, recognizing unnecessary complexity, considering maintainability, adding documentation, and refactoring existing complex themes. Specific techniques recommended include using libraries and view modes appropriately, limiting the use of templates and preprocess functions, and writing clean and reusable CSS/Sass code.
This document discusses using HTML/CSS in WordPress themes. It recommends using the Underscores starter theme to reduce time and effort. The Underscores theme provides default pages and structures that save developer hours. Key theme files like functions.php, header.php and footer.php are outlined. Styling elements with style.css is also covered. Child themes are recommended over directly modifying themes to avoid issues with updates. The document concludes with a practical example of creating a custom template file to build homepage slices directly in WordPress.
This document provides an overview of intermediate web design concepts including meta tags, favorites icons, CSS, and ways to add CSS to HTML pages. It discusses using meta tags to provide non-visible page information to search engines, adding a custom favorites icon, basic CSS syntax and properties, and embedding, internal and external methods for linking CSS to HTML pages. The document aims to teach intermediate web design skills and CSS implementation.
This document provides an overview of intermediate web design concepts including meta tags, favorites icons, CSS, and ways to add CSS to HTML pages. It discusses using meta tags to provide non-visible page information to search engines, adding a custom favorites icon, basic CSS syntax and properties, and three methods for including CSS - external, internal, and inline stylesheets. It emphasizes that external stylesheets allow applying styles across multiple pages and that inline styles should only be used for one-time instances.
This document introduces CSS (Cascading Style Sheets) and provides examples of how to use CSS to style HTML elements. CSS allows separation of document structure (HTML) from presentation (CSS). There are three ways to associate CSS with HTML - external CSS files linked via <link>, internal <style> sections, or inline styles via the style attribute. CSS selectors target elements by tag name, class, ID, or context. Classes and IDs allow targeting groups or individual elements. CSS rules define styles using properties and values within curly braces. This allows consistent styling across pages by changing a single CSS file.
Css training tutorial css3 & css4 essentialsQA TrainingHub
Learn CSS - Cascading style Sheets to crate awsome looking for your general html Ui & Create responsive HTML Templates by understanding this css tutorial
This document provides an overview of Cascading Style Sheets (CSS) including:
- CSS allows separation of document content from page layout/formatting through external style sheets or internal styles defined in <style> tags.
- CSS has three levels (CSS1, CSS2, CSS3) that add new capabilities. CSS handles properties like fonts, sizes, colors, spacing and positioning of HTML elements.
- Styles can be applied via internal, embedded, or external stylesheets. Inheritance allows CSS rules to apply to child elements. Conflicting styles are resolved through a cascading priority system.
The document discusses using CSS frameworks to speed up web development by avoiding having to repeatedly write CSS resets and layout code. It describes the Blueprint CSS framework, including how it provides a grid system, typography styles, and other components out of the box. The author explains how using a framework like Blueprint CSS can save significant time over building sites from scratch each time.
The document provides an overview of CSS (Cascading Style Sheets), which is the language used to style HTML elements and tell the browser how elements should be rendered. It covers CSS basics like selectors, properties, values, and rules. It also discusses CSS concepts like the cascade, specificity, inheritance, and adding CSS via links, style tags, and inline styles. The history of CSS is summarized, from its origins in the 1990s to modern features like Grid, Flexbox, and custom properties. Key sections are highlighted, including selectors, the cascade, specificity, and adding CSS to HTML.
The document provides guidelines for standardizing markup and CSS code, including:
1. Commenting on code blocks for HTML and CSS using consistent formats.
2. Recommendations for file naming and organization of CSS, images, and JavaScript.
3. Best practices like using a reset, sprites, minimal browser hacks, and validating code.
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!Stefan Bauer
CSS can get overly complex and unwieldy very quickly - especially on SharePoint Projects. To achieve the SharePoint branding you desire, often results in thousands of lines of CSS across many files. This approach is error prone and also a maintenance nightmare! However, there is a better way…
SASS (“Syntactically Awesome Style Sheets”) is fast becoming the preferred approach to develop your CSS! SASS is an extension to CSS which arms you with programming features such as variables, functions, loops and many more.
Join my session and I will take you from a complete SASS novice to someone that knows where SASS fits and how to use it with SharePoint.
Key Takeaways :
- I will explain what SASS is and where you would use it.
- How to use SASS to brand SharePoint without requiring lengthy deployments.
- How to create simple Rich Text Editor Styles using mixins and includes.
- How to apply a Grid layout and make it Responsive.
- How to structure your branding correctly to make it more maintainable.
- How CSS 4 fits into the picture and does it make SASS obsolete?
The seminar covered the history and introduction of CSS, what CSS is, why it's used, CSS syntax including selectors and properties, and ways to insert CSS like external, internal, and inline styles. CSS was first proposed in 1994 and has evolved through levels 1, 2, 2.1, and 3. It allows separating design from HTML for easier maintenance, centralized styling across pages, and reduced file sizes. Syntax uses selectors and declarations with properties and values. Comments can explain code. CSS properties control various aspects of text, fonts, backgrounds, and lists.
Describes the philosophical, programming, methodology, and business standards needed to keep technical communication current in an increasingly technical era.
This document discusses future-proofing technical documentation work and jobs. It introduces Neil Perlin, an internationally recognized content consultant, and outlines some challenges like unexpected technical changes and the need for content to be efficiently extensible. The document recommends considering the unknown future by setting standards for philosophy, programming, methodologies, and business support. It provides specific recommendations around CSS, templates, validation, and more to help make content adaptable to future changes and tools.
The document discusses how to use Cascading Style Sheets (CSS) with Corvid Servlet Runtime templates to control formatting and layout. CSS allows separating design from content, making templates simpler and easier to maintain. It also enables adapting appearance for different devices. The document provides examples of using CSS classes to style template elements and explains how to set up a demo system using the included CSS and templates.
The document discusses how to use Cascading Style Sheets (CSS) with Corvid Servlet Runtime templates to control formatting and layout. CSS allows separating design from content, making templates simpler and easier to maintain. It also enables customization of appearance for different devices. The document provides examples of how to apply CSS classes and rules to Corvid template elements to control fonts, colors, positioning and more.
The document provides an introduction to CSS (Cascading Style Sheets) including the different methods for linking an external CSS stylesheet (internal, external, inline). It describes CSS syntax using selectors, properties, and values to style HTML elements. Specific CSS properties like margins, padding, and classes/IDs are defined. The document is a tutorial that teaches CSS basics through examples to style text formatting, layout, and design elements of a webpage.
The document discusses CSS frameworks, which aim to abstract routine CSS tasks into reusable modules. It covers the frustrations of CSS development like lack of code reuse. Popular frameworks like Blueprint, 960gs and CSS Scaffold are examined. Frameworks provide advantages like increased productivity but also have disadvantages like creating bloated code and design restrictions. In summary, frameworks can help speed up development and improve designs but are not perfect solutions and building your own comes with further complications.
Vskills certified CSS designer Notes covers the following concepts.
1 CSS Basics
1.1 Introduction
1.2 Why to use CSS
1.3 CSS Editors
1.4 A CSS Example
1.5 Custom CSS
1.6 Cross Browser Testing
1.7 Including CSS
1.8 Validating CSS
Get complete e-book on CSS.
http://www.vskills.in/certification/Web-Development/certified-css-designer
The document provides an overview of a crash course that introduces common web technologies like CSS, PHP, and JavaScript and instructs attendees to download files to follow along with examples of creating a basic website with styled text, a menu included via PHP, and a randomly changing image generated by JavaScript code. The course emphasizes learning structures and asking questions over producing a polished final product.
Similar to Structuring your CSS for maintainability: rules and guile lines to write CSS (20)
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Chris Swan
Have you noticed the OpenSSF Scorecard badges on the official Dart and Flutter repos? It's Google's way of showing that they care about security. Practices such as pinning dependencies, branch protection, required reviews, continuous integration tests etc. are measured to provide a score and accompanying badge.
You can do the same for your projects, and this presentation will show you how, with an emphasis on the unique challenges that come up when working with Dart and Flutter.
The session will provide a walkthrough of the steps involved in securing a first repository, and then what it takes to repeat that process across an organization with multiple repos. It will also look at the ongoing maintenance involved once scorecards have been implemented, and how aspects of that maintenance can be better automated to minimize toil.
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Erasmo Purificato
Slide of the tutorial entitled "Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Emerging Trends" held at UMAP'24: 32nd ACM Conference on User Modeling, Adaptation and Personalization (July 1, 2024 | Cagliari, Italy)
Comparison Table of DiskWarrior Alternatives.pdfAndrey Yasko
To help you choose the best DiskWarrior alternative, we've compiled a comparison table summarizing the features, pros, cons, and pricing of six alternatives.
An invited talk given by Mark Billinghurst on Research Directions for Cross Reality Interfaces. This was given on July 2nd 2024 as part of the 2024 Summer School on Cross Reality in Hagenberg, Austria (July 1st - 7th)
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionBert Blevins
Cybersecurity is a major concern in today's connected digital world. Threats to organizations are constantly evolving and have the potential to compromise sensitive information, disrupt operations, and lead to significant financial losses. Traditional cybersecurity techniques often fall short against modern attackers. Therefore, advanced techniques for cyber security analysis and anomaly detection are essential for protecting digital assets. This blog explores these cutting-edge methods, providing a comprehensive overview of their application and importance.
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfNeo4j
Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.
How Social Media Hackers Help You to See Your Wife's Message.pdfHackersList
In the modern digital era, social media platforms have become integral to our daily lives. These platforms, including Facebook, Instagram, WhatsApp, and Snapchat, offer countless ways to connect, share, and communicate.
Blockchain technology is transforming industries and reshaping the way we conduct business, manage data, and secure transactions. Whether you're new to blockchain or looking to deepen your knowledge, our guidebook, "Blockchain for Dummies", is your ultimate resource.
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfjackson110191
These fighter aircraft have uses outside of traditional combat situations. They are essential in defending India's territorial integrity, averting dangers, and delivering aid to those in need during natural calamities. Additionally, the IAF improves its interoperability and fortifies international military alliances by working together and conducting joint exercises with other air forces.
Best Programming Language for Civil EngineersAwais Yaseen
The integration of programming into civil engineering is transforming the industry. We can design complex infrastructure projects and analyse large datasets. Imagine revolutionizing the way we build our cities and infrastructure, all by the power of coding. Programming skills are no longer just a bonus—they’re a game changer in this era.
Technology is revolutionizing civil engineering by integrating advanced tools and techniques. Programming allows for the automation of repetitive tasks, enhancing the accuracy of designs, simulations, and analyses. With the advent of artificial intelligence and machine learning, engineers can now predict structural behaviors under various conditions, optimize material usage, and improve project planning.
Structuring your CSS for maintainability: rules and guile lines to write CSS
1. Structuring your CSS for
maintainability
Class-9: Rules and guile lines to write CSS
Sanjoy K. Paul
Lead Application Developer | Software Architect | DevOps | Trainer
www.SanjoyPaul.com | skpaul@DevsStation.com | +880-1511-927992
3. KISS - Keep It Simple & Short(hand).
DRY - Don’t Repeat Yourself.
IMP - Important! is not that important.
- Make It Readable
- Keep It Consistent
- Use a Reset
TDS - Top-Down Structure
- Comment is the savier
- No Inline
4. Organizing your CSS
As you start work on larger stylesheets and big project with a team, you will
discover that maintaining a huge css file can be challenging.
So, we will go through some best practices for writing css that will help us to
maintain the css project easily.
5. How to keep your stylesheet organized and tidy?
6. Does our project have a coding style guide?
- If we are working in a team or existing project? then
- First thing to check is whether the project has an existing style guide for CSS?
- The team style guide should always win over your own personal preferences.
- There often isn't a right or wrong way to do things, but consistency is
important.
7. Keep it consistent
- set the rules for the project or are working alone,
- then the most important thing to do is to keep things consistent.
- Consistency can be applied in all sorts of ways,
- Using the same naming conventions for classes,
- choosing one method of describing color,
- or maintaining consistent formatting
- for example will you use tabs or spaces to indent your code? If
spaces, how many spaces?
8. Keep it consistent
Pros:
- Having a set of rules you always follow
- Reduces the amount of mental overhead needed when writing
CSS, as some of the decisions are already made.
Cons:
- Sometime it’s hard to maintain the consistency if you are in a
tight deadline
9. Formatting readable CSS:
There are a couple of ways you will see CSS formatted.
Some developers put all of the rules onto a single line
.box { background-color: #567895; }
h2 { background-color: black; color: white; }
Other developers prefer to break everything onto a
new line:
.box {
background-color: #567895;
}
h2 {
background-color: black;
color: white;
}
CSS doesn't mind which one you use. I personally find it is more readable to have each property and value pair on a new line.
10. Comment your CSS
Adding comments to your CSS will help
- Any future developer work with your CSS file
- Also will help you when you come back to the project after a break.
/* This is a CSS comment
It can be broken onto multiple lines. */
11. Comment your CSS
/* || General styles */
...
/* || Typography */
...
/* || Header and Main
Navigation */
...
- Add a block of comments between logical
sections
- It will help to locate different sections quickly
when scanning through,
- Or even give you something to search for to
jump right into that part of the CSS.
- If you use a string which won't appear in the
code you can jump from section to section by
searching for it. We can use || or --start an. ..end
12. Comment your CSS
We don't need to comment every single thing in our code, as much of it is self-explanatory. We only comment on the things where we make a
particular decision for a reason.
Another example: Including reference tutorial/any links as a comment. It will help us to recall in future.
/** CSS Code guideline
https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/CSS
*/
Example: we may have used a CSS property in a specific way to get around older browser incompatibilities.
.box {
background-color : red; /* fallback for older browsers that don't support gradients */
background-image : linear-gradient (to right, #ff0000, #aa0000);
}
13. Create logical sections in your stylesheet
It is a good idea to have all of the common styling first in the stylesheet. This means all of the styles which will generally
apply unless you do something special with that element. You will typically have rules set up for:
● body
● p
● h1, h2, h3, h4, h5
● ul and ol
● The table properties
● Links
Lets see some code...
14. Using CSS Vendor Prefixed
Some of these CSS browser prefixes have been listed below:
iOS: -webkit-
Safari: -webkit-
Firefox: -moz-
Chrome: -webkit-
Opera: -o-
MS/IE/Edge: -ms-
Each browser have a set of specifications related to any style. This is one of the reasons why browser prefixed are
implemented in order to ensure that these browsers support any of the specific features or style that we would like to
implement.
If we are planning to add a CSS 3 transition to any of our CSS code, then
we will can use transition property and implement a vendor prefix with it.
Below is the code for the same:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
16. Break large stylesheets into multiple smaller ones!??
For example, you might have an online store as part of the site, with a lot of CSS
used only for styling the product listings and forms needed for the store. It would
make sense to have those things in a different stylesheet, only linked to on store
pages.
This can make it easier to keep your CSS organized, and also means that if multiple
people are working on the CSS you will have fewer situations where two people
need to work on the same stylesheet at once, leading to conflicts in source control.
17. CSS methodologies
- OOCSS (Object-Oriented CSS): Treats page elements as objects, giving all objects classes, treating the objects’ classes as single
entities in style sheets, and taking it from there.. https://github.com/stubbornella/oocss/wiki
- BEM (Block, Element, Modifier): Block Element Modifier is a methodology that helps you create reusable components and code
sharing in front-end development. - https://css-tricks.com/bem-101/
- SMACSS (Scalable and Modular Architecture for CSS): a flexible guide to developing sites small and large. Arguably
becoming one of the most useful contributions to front-end discussions in years. - http://smacss.com/
- Atomic CSS: is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function. -
https://acss.io/
- ITCSS - Inverted Triangle CSS: A sane, scalable, managed CSS architecture achieved with mindful CSS code organization. -
https://itcss.io/
18. HTML!
What we do to write HTML code?
- Always Declare Document Type (<!DOCTYPE html>)
- Use Lowercase “Element” and “Attribute” Names. Don’t mix uppercase and lowercase (body, div, article)
- Always Quote Attribute Values
- Always Specify “alt” for Images (and also width and height)
- Close All HTML Elements
- Close Empty HTML Elements? (<meta charset="utf-8" />, required in XML and XHTML)
- Never Skip the <title> Element (SEO)
- Add the lang and charset attribute, both are important for SEO indexing (SEO, <html lang="en-us" />)
- Meta Datas (key, description, og and )
- Avoid Long Code Lines
- Spaces and Equal Signs
- Blank Lines and Indentation. Don’t use it unnecessarily.
- Omitting <html>, <body>, <head> tags?
- Viewport
- Create Your HTML First
- It will be updated and continued with time..
19. Summary
KISS - Keep It Simple & Short(hand).
DRY - Don’t Repeat Yourself.
IMP - Important! is not that important.
- Make It Readable
- Keep It Consistent
- Use a Reset??
TDS - Top-Down Structure
- The Comment is the savior
- No Inline
- Maintain the Spacificity (*, tag, class, id)
- ...
20. Validating your CSS!
You can always use the W3C free CSS validator to examine whether your CSS code has been organized and structured
appropriately.
One of the other benefits of using it is to help you find errors within your stylesheet.
This will save your time to troubleshooting comparing to doing it manually.
Markup Validation Tool: https://validator.w3.org/
CSS Validation Tool: https://jigsaw.w3.org/css-validator/
Browser Compatibility Testing Tool: https://app.crossbrowsertesting.com/ https://www.lambdatest.com/